/* exepanel, after the Fabric web dashboard (2016-2017): deep navy, slate blue cards with a
   footer bar, thin large numbers, blue bars, teal and orange changes, an orange ring on an
   unusual day. The sign-in page follows Fabric's web login: a navy glow, a faint diamond
   lattice and the layered mark. A few restrained touches of the GoSquared and Fabric era:
   refined segmented controls, switch and LED with fine 1px edges, recessed LCD wells for live
   counters and the journey tiles. System fonts, tabular numbers, no external assets. */

:root {
  --page: #0f2131;
  --rail: #0a1622;
  --card: #132b41;
  --card-hover: #15304a;
  --card-foot: #183753;
  --card-side: #183450;
  --line: rgba(150, 195, 240, 0.08);
  --line-2: rgba(150, 195, 240, 0.15);
  --text: #f1f6fb;
  --text-2: #a5b8cb;
  --text-3: #6b8298;
  --blue: #1f86e8;
  --blue-2: #2fa3ff;
  --bar: #1b62b2;
  --bar-now: #2b9cf2;
  --teal: #34d1c3;
  --orange: #f7a23b;
  /* The panel's identity: navy, electric blue and the turquoise glow (the map and its bars). */
  --navy: #001080;
  --electric: #3070e0;
  --turquoise: #88d8f8;
  --phosphor: #00ff41; /* the map's sale glow only */
  --refund: #d66e64;
  --red: #ff7a64;
  --violet: #b49cff;
  --green: #4fe08a;
  --amber: #ffbf47;
  --radius: 4px;
  /* The country rows' fixed columns (ui.js countryRow): the LED meter (16 LEDs of 4px, 2px
     apart) and the amount, so the meters line up in every row. */
  --meter-col: 94px;
  --amount-col: 80px;
  /* The app palette: one neon hue per app (the API's "hue", 0 to 7), glowing on the navy.
     Only where an app is identified: its icon, its Mission Control accent, its segments and
     legend dots, its pins and its events on the Live Map (ui.js appColor reads these). */
  --app-0: #ff4fa3; /* pink */
  --app-1: #3de0ff; /* cyan */
  --app-2: #b6ff3d; /* lime */
  --app-3: #ffe14d; /* yellow */
  --app-4: #ff8a3d; /* orange */
  --app-5: #b07cff; /* violet */
  --app-6: #ff6b6b; /* coral */
  --app-7: #4dffb8; /* mint */
  /* The skeuomorphic touches, in one place. */
  --gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.012) 46px, transparent 47px);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 -1px 0 rgba(0, 0, 0, 0.28) inset, 0 0 0 1px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.28);
  --emboss: linear-gradient(180deg, #1f4466 0%, #173653 100%);
  --emboss-edge: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 -1px 0 rgba(0, 0, 0, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.35);
  --well: linear-gradient(180deg, #04101b, #071826);
  --well-shadow: 0 2px 5px rgba(0, 0, 0, 0.6) inset, 0 0 0 1px rgba(0, 0, 0, 0.45) inset, 0 1px 0 rgba(255, 255, 255, 0.06);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--page); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 14px/1.45 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  background: var(--page);
}
body.signing-in { background: #050e19; overflow: hidden; }
a { color: var(--blue-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
code { font-family: var(--mono); font-size: 0.92em; color: #bfe4ff; }
[hidden] { display: none !important; }
.muted { color: var(--text-3); }
.light { font-weight: 300; color: var(--text-3); }
.negative { color: var(--orange); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; border-radius: 6px; }

.text-link {
  background: none;
  border: 0;
  padding: 0;
  color: #7cc6ff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.text-link:hover { color: #b5e0ff; text-decoration: underline; text-underline-offset: 3px; }
.link-button { background: none; border: 0; padding: 0; color: #ffd98a; font-weight: 600; cursor: pointer; }
.pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 20px;
  border: 0;
  border-radius: 19px;
  background: linear-gradient(180deg, #2a95f0, #1569c8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 18px rgba(21, 105, 200, 0.35);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.pill-button:hover { filter: brightness(1.08); }
.pill-button:disabled { opacity: 0.55; cursor: default; }
.danger-button { border: 0; border-radius: 6px; padding: 4px 10px; background: rgba(255, 122, 100, 0.16); color: var(--red); font-weight: 600; cursor: pointer; }
.icon-button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); cursor: pointer; }
.icon-button:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.icon-button svg { width: 16px; height: 16px; }

/* Preview */

.preview-bar {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  color: #ffdf9a;
  background: rgba(58, 42, 6, 0.88);
  border: 1px solid rgba(255, 200, 80, 0.22);
  backdrop-filter: blur(8px);
}
body.signing-in .preview-bar { display: none; }

/* Sign-in: Fabric's web login */

.signin {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  overflow: auto;
  background:
    radial-gradient(ellipse 62% 58% at 50% 36%, #0f3d68 0%, #0b2b4d 34%, #071a30 64%, #040c17 100%);
}
.signin-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 41%, rgba(47, 163, 255, 0.22) 0, rgba(47, 163, 255, 0.06) 22%, transparent 42%),
    radial-gradient(ellipse 120% 40% at 50% 112%, rgba(2, 8, 16, 0.9), transparent 70%);
}
.signin-lattice {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 52vh;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 58% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.7) 38%, transparent 78%);
  mask-image: radial-gradient(ellipse 58% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.7) 38%, transparent 78%);
}
.signin-column {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(380px, 100%);
  padding: 48px 24px 56px;
  text-align: center;
}
.signin-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 64px; }
.signin-mark {
  width: 108px;
  height: 108px;
  filter: drop-shadow(0 10px 30px rgba(47, 163, 255, 0.4)) drop-shadow(0 0 2px rgba(191, 240, 255, 0.4));
  animation: float 6s ease-in-out infinite;
}
.signin-word {
  margin: 24px 0 6px;
  font-size: 46px;
  line-height: 1;
  font-weight: 200;
  letter-spacing: 0.01em;
  color: #8cd5ff;
  text-shadow: 0 0 24px rgba(47, 163, 255, 0.35);
}
.signin-lead { margin: 10px 0 0; color: #7f9bb6; font-size: 13.5px; letter-spacing: 0.02em; }
.signin-view { display: flex; flex-direction: column; align-items: center; width: 100%; }
.signin-title { margin: 0 0 6px; font-size: 18px; font-weight: 500; color: #dff1ff; }
.signin-copy { margin: 0 0 18px; color: #8ea9c3; font-size: 13px; line-height: 1.55; max-width: 320px; }
.signin-hint { margin: 18px 0 0; color: #8ea9c3; font-size: 12.5px; max-width: 300px; line-height: 1.5; }
.signin-links { display: flex; gap: 18px; justify-content: center; margin-top: 30px; }
.signin-form .glass-field { margin-bottom: 10px; }
/* The setup code field sits above the round button: room for the button's glow. */
#view-setup .glass-code { margin-bottom: 44px; }

/* Centered layout for the passkey and setup views (user, 2026-10-28): the round button sits
   at the exact middle of the screen on both, the brand near the top, what belongs to the
   button above and below it, and the links in a footer. Short windows keep the flow layout. */
@media (min-height: 800px) {
  .signin[data-view="passkey"] .signin-brand,
  .signin[data-view="setup"] .signin-brand {
    position: fixed; top: calc(9vh + env(safe-area-inset-top)); left: 0; right: 0; margin: 0;
  }
  .signin[data-view="passkey"] .signin-mark,
  .signin[data-view="setup"] .signin-mark { width: min(108px, 10vh); height: min(108px, 10vh); }
  .signin[data-view="passkey"] .signin-word,
  .signin[data-view="setup"] .signin-word { margin-top: 12px; }
  #signin[data-view="passkey"] #view-passkey,
  #signin[data-view="setup"] #view-setup { position: fixed; inset: 0; pointer-events: none; }
  #view-passkey > *, #view-setup > * { pointer-events: auto; }
  #signin[data-view="passkey"] .orb,
  #signin[data-view="setup"] .orb { position: absolute; top: calc(50% - 52px); left: calc(50% - 52px); }
  #signin[data-view="passkey"] .orb-caption,
  #signin[data-view="setup"] .orb-caption { position: absolute; top: calc(50% + 52px + 24px); left: 0; right: 0; }
  #signin[data-view="passkey"] .orb-label,
  #signin[data-view="setup"] .orb-label { margin-top: 0; }
  /* Setup needs the room above the button for its field: the tagline steps aside. */
  .signin[data-view="setup"] .signin-lead { display: none; }
  #signin[data-view="setup"] .signin-above {
    position: absolute; bottom: calc(50% + 52px + 28px); left: 0; right: 0;
    display: flex; flex-direction: column; align-items: center;
  }
  #signin[data-view="setup"] .glass-code { margin-bottom: 0; }
  #signin[data-view="setup"] .signin-title { margin-bottom: 14px; }
  #signin[data-view="passkey"] .signin-links,
  #signin[data-view="setup"] .signin-links {
    position: absolute; left: 0; right: 0; bottom: calc(32px + env(safe-area-inset-bottom)); margin: 0;
  }
  #signin[data-view="passkey"] #setup-hint {
    position: absolute; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); margin: 0 auto;
  }
  #signin[data-view="passkey"] .signin-error,
  #signin[data-view="setup"] .signin-error {
    position: fixed; top: calc(50% + 52px + 160px); left: 0; right: 0; margin: 0 auto;
  }
}
.signin-form .pill-button { margin-top: 8px; min-width: 200px; }

.glass-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 280px;
  max-width: 100%;
  height: 42px;
  margin-bottom: 26px;
  border-radius: 21px;
  background: rgba(4, 16, 30, 0.55);
  border: 1px solid rgba(110, 185, 255, 0.2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 10px rgba(0, 0, 0, 0.35) inset;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.glass-field:focus-within { border-color: rgba(127, 200, 255, 0.55); box-shadow: 0 0 0 3px rgba(47, 163, 255, 0.16), 0 2px 10px rgba(0, 0, 0, 0.35) inset; }
.glass-field svg { position: absolute; left: 14px; width: 16px; height: 16px; color: #5f86ab; }
.glass-field input {
  width: 100%;
  height: 100%;
  padding: 0 36px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: center;
  outline: none;
}
.glass-field input::placeholder { color: #6c8cab; }
.glass-code { width: 260px; }
/* A field's small caption above it (the passkey picker, the setup code). */
.field-caption { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); color: #7f9bb6; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; }
.glass-field:has(.field-caption) { margin-top: 20px; }
/* The passkey picker: slim and plain, so it never reads as a code field. */
.glass-slim { width: 240px; height: 34px; border-radius: 17px; }
.glass-slim input { padding: 0 16px 0 34px; font-size: 13px; text-align: left; }
.glass-slim svg { left: 12px; width: 14px; height: 14px; }
.glass-code input { padding: 0 16px; font-family: var(--mono); font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; }
.glass-code input::placeholder { letter-spacing: 0.14em; color: #4e6e8e; }

/* The round passkey button, in the spirit of the power button on Fabric's login box. */
.orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: transform 0.18s ease;
}
.orb-face { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 22px rgba(21, 105, 200, 0.55)); }
.orb-ring {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(127, 200, 255, 0.22);
  box-shadow: 0 0 46px 8px rgba(42, 157, 244, 0.28), 0 0 0 7px rgba(42, 157, 244, 0.05) inset;
  animation: breathe 3.6s ease-in-out infinite;
}
.orb-glyph { position: relative; width: 50px; height: 50px; color: #fff; filter: drop-shadow(0 1px 4px rgba(0, 40, 90, 0.5)); }
.orb:hover { transform: scale(1.035); }
.orb:hover .orb-ring { border-color: rgba(160, 215, 255, 0.4); }
.orb:active { transform: scale(0.97); }
.orb:disabled { cursor: default; }
.orb.busy .orb-ring {
  border-color: transparent;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(127, 208, 255, 0.85) 92%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: spin 1.1s linear infinite;
}
.orb:focus-visible { outline: none; }
.orb:focus-visible .orb-ring { border: 2px solid #8fd6ff; }
.orb-label { margin: 36px 0 8px; font-size: 15.5px; font-weight: 600; color: #e6f4ff; letter-spacing: 0.01em; }
.orb-note { margin: 0; font-size: 12.5px; color: #7593b0; }

.apple-block { margin-top: 26px; }
.pill-apple { background: #f2f5f8; color: #0a0f14; box-shadow: none; }
.signin-error {
  margin: 20px 0 0;
  max-width: 320px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  color: #ffd2c8;
  background: rgba(255, 122, 100, 0.12);
  border: 1px solid rgba(255, 122, 100, 0.25);
}
.qr { padding: 10px; margin-bottom: 12px; border-radius: 12px; background: #fff; }
.qr img { display: block; }
.secret { font-size: 12px; color: var(--text-2); margin: 0 0 14px; }

/* Shell: the icon rail, the top bar, the page */

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 68px;
  background: var(--rail);
  border-right: 1px solid rgba(0, 0, 0, 0.35);
}
.rail-mark { display: grid; place-items: center; height: 68px; }
.rail-mark svg { width: 34px; height: 34px; filter: drop-shadow(0 2px 8px rgba(47, 163, 255, 0.35)); }
.rail-items { display: flex; flex-direction: column; margin-top: 6px; }
.rail-foot { display: flex; flex-direction: column; margin-top: auto; padding-bottom: 12px; }
.rail-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 52px;
  border: 0;
  background: none;
  color: #6f879e;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.rail-item svg { width: 22px; height: 22px; }
.rail-item span { display: none; }
.rail-item:hover { color: #d6e6f5; background: rgba(255, 255, 255, 0.03); text-decoration: none; }
/* A money page while the panel is usage first (a free app): still there, dimmed like a
   disabled control; its title says why. */
.rail-item.quiet:not(.active) svg, .rail-item.quiet:not(.active) span { opacity: 0.45; }
.rail-item.active { color: #fff; background: linear-gradient(90deg, rgba(31, 134, 232, 0.2), rgba(31, 134, 232, 0.08)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 -1px 0 rgba(0, 0, 0, 0.25) inset; }
.rail-item.active svg { filter: drop-shadow(0 0 6px rgba(47, 163, 255, 0.55)); }
.rail-badge {
  position: absolute;
  top: 7px;
  left: 50%;
  margin-left: 4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: radial-gradient(circle at 50% 30%, #ff9b7f, #e8513a 70%);
  box-shadow: 0 0 0 2px var(--rail), 0 0 8px rgba(255, 110, 80, 0.6), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}
.rail-item.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue-2); }
.rail-item[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 9px;
  border-radius: 6px;
  background: #1b3a58;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.main { margin-left: 68px; min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 28px;
  background: rgba(13, 30, 46, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.page-title { margin: 0 6px 0 0; font-size: 17px; font-weight: 500; letter-spacing: 0.005em; }
.switcher { position: relative; margin-right: auto; }
.switch-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px 0 6px;
  border-radius: 8px;
  border: 0;
  background: var(--emboss);
  box-shadow: var(--emboss-edge);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.switch-button:hover { filter: brightness(1.12); }
.switch-button:active { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) inset; }
.switch-button:disabled { opacity: 0.45; cursor: default; }
.switch-caret { width: 14px; height: 14px; color: var(--text-2); }
.app-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 260px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #112a40;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.app-menu li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.app-menu li:hover, .app-menu li:focus { background: rgba(47, 163, 255, 0.12); outline: none; }
.app-menu li[aria-selected="true"] { background: rgba(47, 163, 255, 0.18); }
.menu-text { display: flex; flex-direction: column; line-height: 1.25; }
.menu-text b { font-weight: 600; font-size: 13.5px; }
.menu-text small { color: var(--text-3); font-size: 11.5px; }

/* Segmented controls: a recessed track, the chosen segment raised and lit. */
.segmented {
  display: inline-flex;
  padding: 2px;
  border-radius: 8px;
  background: var(--well);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) inset, 0 1px 0 rgba(255, 255, 255, 0.06);
}
.segmented button { border: 0; background: none; padding: 5px 10px; border-radius: 6px; color: var(--text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); }
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"] {
  background: linear-gradient(180deg, #3aa3ff 0%, #1f86e8 55%, #1a72cc 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 10px rgba(31, 134, 232, 0.3);
}
.segmented.small button { padding: 3px 9px; font-size: 11.5px; }

.toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px; color: var(--text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.toggle-track { position: relative; width: 34px; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); transition: background 0.2s; }
.toggle-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #dfe9f3; transition: transform 0.2s; }
.toggle[aria-checked="true"] { color: var(--orange); }
.toggle[aria-checked="true"] .toggle-track { background: var(--orange); }
.toggle[aria-checked="true"] .toggle-knob { transform: translateX(14px); background: #fff; }

.live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.live { background: var(--well); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) inset, 0 1px 0 rgba(255, 255, 255, 0.05); border-color: transparent; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8aa0b4, #4b5f72 70%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
.live[data-state="live"] { color: #8fe8b0; }
.live[data-state="live"] i { background: radial-gradient(circle at 40% 35%, #d8ffe6, var(--green) 45%, #1d9a52 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 8px rgba(79, 224, 138, 0.8); animation: breathe 2.4s ease-in-out infinite; }
.live[data-state="reconnecting"] i { background: radial-gradient(circle at 40% 35%, #fff0c8, var(--amber) 45%, #b97a10 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 7px rgba(255, 191, 71, 0.7); }
.avatar-button { display: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); color: var(--text-2); cursor: pointer; }
.avatar-button svg { width: 18px; height: 18px; }
body.sandbox .topbar { box-shadow: 0 2px 0 rgba(247, 162, 59, 0.55); }

.page { width: 100%; max-width: 1280px; margin: 0 auto; padding: 26px 28px 36px; flex: 1; }
.page.enter { animation: enter 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
body.loading .page { cursor: progress; }
.foot { width: 100%; max-width: 1280px; margin: 0 auto; padding: 4px 28px 34px; color: var(--text-3); font-size: 11.5px; }
.foot p { margin: 2px 0; }
.foot a { color: var(--text-2); }

/* App icons */

.app-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  background: #2a6fc4;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.app-icon img { width: 100%; height: 100%; object-fit: cover; }
.app-icon-sm { width: 24px; height: 24px; border-radius: 6px; font-size: 11px; }
.app-icon-lg { width: 64px; height: 64px; border-radius: 15px; font-size: 28px; font-weight: 600; }
.app-icon-all { background: linear-gradient(160deg, #11365a, #0b2238); }
.app-icon-all svg { width: 72%; height: 72%; }
.hue-0 { --app: var(--app-0); }
.hue-1 { --app: var(--app-1); }
.hue-2 { --app: var(--app-2); }
.hue-3 { --app: var(--app-3); }
.hue-4 { --app: var(--app-4); }
.hue-5 { --app: var(--app-5); }
.hue-6 { --app: var(--app-6); }
.hue-7 { --app: var(--app-7); }

/* Overview header: the app and its live activity line */

.identity { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; margin-bottom: 10px; }
.identity-who { display: flex; align-items: center; gap: 16px; }
.identity-name { margin: 0; font-size: 28px; font-weight: 400; letter-spacing: -0.005em; line-height: 1.15; }
.identity-sub { margin: 3px 0 0; color: var(--text-2); font-size: 12px; font-weight: 600; }
.activity-wrap { position: relative; height: 64px; }
.activity { position: relative; }
.activity-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.activity-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #2b8fe6; transform: translate(-50%, -50%); }
.activity-dot.now { width: 11px; height: 11px; background: #7fd0ff; box-shadow: 0 0 0 4px rgba(47, 163, 255, 0.25), 0 0 16px 3px rgba(47, 163, 255, 0.7); }
.identity-now { display: flex; gap: 12px; align-items: flex-start; }
.meter { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.meter-label { color: var(--text-2); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* Headline and today's chart, as on Answers' growth page */

.headline-block { margin: 6px 0 22px; }
.headline { margin: 0; font-size: 28px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.25; }
.hl-num { color: var(--blue-2); font-weight: 600; }
.subline { margin: 6px 0 0; color: var(--text-2); font-size: 14px; }
.subline b { color: var(--text); font-weight: 700; }
.headline-extra { margin: 6px 0 0; color: var(--text-3); font-size: 12px; }
.headline-extra:empty { display: none; }

/* The Sandbox hint (parts.js sandboxHint): Production is empty but Sandbox has test purchases. */
.sandbox-hint { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 9px 10px 9px 14px; border: 1px solid rgba(247, 162, 59, 0.35); border-radius: var(--radius); background: rgba(247, 162, 59, 0.08); color: var(--text-2); font-size: 13px; }
.sandbox-hint[hidden] { display: none; }
.sandbox-hint svg { flex: none; width: 16px; height: 16px; color: var(--orange); }
.sandbox-hint-text { flex: 1; min-width: 0; }
.sandbox-hint-button { flex: none; padding: 5px 11px; border: 1px solid rgba(247, 162, 59, 0.5); border-radius: var(--radius); background: transparent; color: var(--orange); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.sandbox-hint-button:hover, .sandbox-hint-button:focus-visible { background: rgba(247, 162, 59, 0.14); }

/* A card's error state (parts.js guard): the frame stays, a muted line says what failed. */
.card-error { margin: 0; padding: 10px 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255, 122, 100, 0.06); color: var(--text-2); font-size: 12.5px; }
.card-error::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--red); vertical-align: 1px; }
.page-error { margin-bottom: 14px; }
.page-error .card-error { border: 0; }
.growth-chart { position: relative; height: 210px; margin-top: 18px; margin-right: 44px; }
.growth-plot { position: absolute; inset: 0; }
.legend { display: flex; gap: 18px; margin-top: 30px; color: var(--text-3); font-size: 11.5px; font-weight: 600; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend .lg-today::before, .legend .lg-week::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--blue-2); }
.legend .lg-week::before { height: 9px; background: rgba(160, 190, 222, 0.22); }
.legend .lg-tz { margin-left: auto; }

/* Charts */

.chart { position: relative; }
.chart-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.grid-base { stroke: rgba(255, 255, 255, 0.2); }
.grid-faint { stroke: rgba(255, 255, 255, 0.05); stroke-dasharray: 3 4; }
.bar { fill: var(--bar); transition: fill 0.2s; }
.bar-now { fill: var(--bar-now); }
.chart-ticks { position: absolute; top: 0; bottom: 0; left: -30px; width: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.tick { font-size: 9.5px; line-height: 0; color: var(--text-3); text-align: right; }
/* Right-hand axis labels sit outside the plot, so the line's end and its glowing dot never
   cover them (the chart keeps a right margin for them). */
.chart-ticks-right { left: 100%; right: auto; width: auto; display: block; }
.chart-ticks-right .tick { position: absolute; left: 12px; line-height: 1; text-align: left; transform: translateY(-50%); white-space: nowrap; }
.chart-x { position: absolute; left: 0; right: 0; bottom: -17px; display: flex; justify-content: space-between; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-3); }
.chart-x-hours { bottom: -22px; }
/* A rolling window's clock labels sit at their time (chart.js growth span). */
.chart-x-at { display: block; height: 12px; }
.chart-x-at div { position: absolute; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 760px) { .chart-x-at div:nth-child(even) { display: none; } }
.ring {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(247, 162, 59, 0.14), 0 0 12px rgba(247, 162, 59, 0.35);
  pointer-events: none;
}
.placeholder .chart-svg { filter: blur(5px); opacity: 0.5; }
.placeholder .bar { fill: #2a6fc0; }
.shadow-area { fill: rgba(160, 190, 222, 0.09); stroke: rgba(160, 190, 222, 0.2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.growth-line { fill: none; stroke: var(--blue-2); stroke-width: 2.2; }
.reveal { animation: reveal 1.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.growth-dot {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--blue-2);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(47, 163, 255, 0.22), 0 0 18px 4px rgba(47, 163, 255, 0.6);
}
.growth-dot-small { width: 7px; height: 7px; box-shadow: none; background: #2a85d8; }
.pulse { animation: pulse 2.2s ease-in-out infinite; }
.spark { width: 100%; height: 28px; overflow: visible; }
.spark path { fill: none; stroke: var(--blue-2); stroke-width: 1.6; }
.spark circle { fill: #8fd6ff; }
.minibars { display: block; width: 100%; height: 26px; }
.minibars rect { fill: #3d83cf; }
.minibars rect.zero { fill: rgba(255, 255, 255, 0.09); }

/* Cards */

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--gloss), var(--card);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
/* A flat card (no gloss or edge), for cards over the Live Map; a collapsed card shows only
   its header. */
.card.card-flat { background: var(--card); box-shadow: none; }
.card.collapsed > :not(.card-head) { display: none; }
.card-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px 10px; }
.card-head h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; }
.card-note { color: var(--text-3); font-size: 12px; font-weight: 600; }
.card-fine { margin: 0; padding: 0 18px 16px; color: var(--text-3); font-size: 11.5px; }
.card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  margin-top: auto;
  padding: 0 14px 0 16px;
  background: linear-gradient(180deg, #1b3c5a, var(--card-foot));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 -1px 0 rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
}
.card-foot svg { width: 16px; height: 16px; color: var(--text-2); }
.card-foot .chev { margin-left: auto; width: 18px; height: 18px; color: var(--blue-2); transition: transform 0.15s; }
.card-foot:hover { text-decoration: none; background: #1c3f60; }
.card-foot:hover .chev { transform: translateX(2px); }

.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis-4 > .kpi-wide { grid-column: span 2; }
.kpis + .row, .kpis + .card, .row + .card, .card + .row { margin-top: 14px; }
.kpi-body { padding: 16px 18px 6px; flex: 1; }
.kpi-top { display: flex; align-items: baseline; gap: 10px; min-height: 42px; }
.kpi-value { font-size: 34px; font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; }
.kpi-value.bump, .hl-num.bump, .identity-now b.bump { animation: bump 0.9s ease; }
.kpi-label { margin-top: 1px; font-size: 12.5px; }
.kpi-label b { font-weight: 700; }
.kpi-label span { color: var(--text-3); font-weight: 500; }
.kpi-chart { height: 112px; margin: 14px 0 26px 30px; }
.kpi-chart-tall { height: 150px; }
.revenue-card .kpi-body { display: flex; flex-direction: column; }
.revenue-card .kpi-chart-tall { flex: 1; min-height: 150px; }
.map-card .map-body { flex: 1; }
.kpi-chart-big { height: 240px; }
.kpi-empty { margin: -8px 0 12px; color: var(--text-2); font-size: 12.5px; }
.card.empty .kpi-value { font-size: 21px; font-weight: 600; letter-spacing: 0; white-space: normal; }
.card.empty .kpi-label { display: none; }
.card.empty .kpi-chart { margin-left: 0; }
.delta { font-size: 14px; font-weight: 400; white-space: nowrap; }
.delta.good { color: var(--teal); }
.delta.bad { color: var(--orange); }
.delta.flat { color: var(--text-2); }

.row { display: grid; gap: 14px; margin-top: 14px; }
.row-mid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.row-low { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.row-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.row-detail:has(> :only-child) { grid-template-columns: 1fr; }
.row-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.code-block { margin: 0 18px 12px; padding: 12px 14px; overflow-x: auto; border-radius: var(--radius); background: var(--well); box-shadow: var(--well-shadow); font-size: 12px; }

/* Map: Fabric's audience map. A flat world a shade lighter than the card with hairline
   borders (an SVG), the turquoise circles on a canvas over it (map.js). */

.map-card .card-head { align-items: center; flex-wrap: wrap; row-gap: 8px; }
.map-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
.map-card .map-controls .segmented { margin-left: 0; }
.map-body { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 18px; align-items: center; padding: 2px 18px 14px; }
.map { position: relative; width: 100%; aspect-ratio: 1800 / 705; touch-action: manipulation; }
.map-land, .map-glow { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.map-land path { fill: #1b4269; stroke: #0f2a42; stroke-width: 0.7px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map-tip {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px 7px;
  border-radius: 5px;
  background: rgba(7, 18, 29, 0.94);
  box-shadow: 0 0 0 1px rgba(150, 195, 240, 0.14), 0 4px 14px rgba(0, 0, 0, 0.45);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -100%);
}
.map-tip.below { transform: translate(-50%, 0); }
.map-tip b { color: var(--text); font-weight: 700; }
.map-tip-time { color: var(--text-3); }
/* The tooltip's accent: a phosphor green edge and a lit top line. */
.map-tip { box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.28), inset 0 1px 0 rgba(0, 255, 65, 0.45), 0 4px 14px rgba(0, 0, 0, 0.45); }
.map-tip b { color: #d6ffe0; }
.map-side { min-width: 0; }
.map-summary { margin: 0 0 4px; color: var(--text-3); font-size: 12px; font-weight: 600; }
.map-summary:empty { display: none; }
.map-note { padding-top: 0; padding-bottom: 14px; }
.countries { margin: 0; padding: 0; list-style: none; }
.countries li { display: grid; grid-template-columns: 22px minmax(0, 1fr) var(--meter-col) var(--amount-col); align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.countries li:last-child { border-bottom: 0; }
.c-flag { font-size: 15px; }
.c-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.c-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.c-bar i { display: block; height: 100%; background: var(--orange); border-radius: 2px; }
.c-value { font-weight: 600; text-align: right; white-space: nowrap; }
.c-count { display: none; }
.c-empty { display: block !important; color: var(--text-3); }
.page-revenue .map-body, .map-body.list-only { grid-template-columns: 1fr; }
.page-revenue .countries li { grid-template-columns: 22px minmax(0, 1fr) var(--meter-col) var(--amount-col) 36px; }
.page-revenue .countries .num-badge { display: inline-block; justify-self: end; }
.countries .num-badge { display: none; }

/* Feed */

.feed { margin: 0; padding: 0; list-style: none; }
.ev {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 34px;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
}
.ev-avatar { position: relative; width: 34px; height: 34px; }
.ev-flag { position: absolute; right: -6px; bottom: -5px; font-size: 14px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.ev-main { display: flex; flex-direction: column; min-width: 0; }
.ev-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.ev-kind { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); }
.ev-kind[data-tone="money"] { color: var(--teal); }
.ev-kind[data-tone="trial"] { color: var(--violet); }
.ev-kind[data-tone="bad"] { color: var(--orange); }
.ev-product { overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 13.5px; }
.ev-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 12px; }
.ev-money { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.ev-local { font-weight: 600; font-size: 13.5px; }
.ev-usd { color: var(--text-3); font-size: 11.5px; }
.ev-money.negative .ev-local { color: var(--orange); }
.ev-time { color: var(--text-3); font-size: 11.5px; text-align: right; }
.ev.arrive { animation: arrive 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.more { display: block; width: 100%; padding: 12px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--blue-2); font-weight: 600; cursor: pointer; }
.more:hover { background: rgba(255, 255, 255, 0.02); }

/* Empty state: Fabric's blurred placeholder and a helpful line */

.empty-state { position: relative; padding: 14px 18px 18px; min-height: 160px; }
.ghost-rows { filter: blur(4px); opacity: 0.55; }
.ghost-row { display: block; height: 30px; margin: 9px 0; border-radius: 4px; background: linear-gradient(90deg, rgba(43, 120, 205, 0.45), rgba(43, 120, 205, 0.08) 75%); }
.ghost-row:nth-child(2) { width: 82%; }
.ghost-row:nth-child(3) { width: 91%; }
.ghost-row:nth-child(4) { width: 64%; }
.empty-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 24px; text-align: center; }
.empty-text b { font-size: 16px; font-weight: 600; }
.empty-text span { color: var(--text-2); font-size: 12.5px; max-width: 340px; }

/* Events table, as Fabric's */

.kinds-cols, .kind-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(70px, 0.9fr) minmax(150px, 1fr) minmax(0, 0.7fr); gap: 16px; align-items: center; }
.kinds-pick .kinds-cols, .kinds-pick .kind-row { grid-template-columns: minmax(0, 1.25fr) minmax(70px, 0.9fr) minmax(150px, 1fr) minmax(0, 0.7fr) 20px; }
.kinds-cols { padding: 0 18px 8px; color: var(--text-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.kinds { margin: 0; padding: 0; list-style: none; }
.kind-row { padding: 10px 18px; border-top: 1px solid var(--line); }
.kind-label { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 14px; font-weight: 500; }
.kind-label > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kind-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; color: var(--blue-2); background: rgba(47, 163, 255, 0.14); }
.kind-icon svg { width: 16px; height: 16px; }
.tone-money.kind-icon { color: var(--teal); background: rgba(52, 209, 195, 0.13); }
.tone-trial.kind-icon { color: var(--violet); background: rgba(180, 156, 255, 0.14); }
.tone-bad.kind-icon { color: var(--orange); background: rgba(247, 162, 59, 0.14); }
.tone-neutral.kind-icon { color: var(--text-2); background: rgba(255, 255, 255, 0.07); }
.spark.tone-money path { stroke: var(--teal); }
.spark.tone-trial path { stroke: var(--violet); }
.spark.tone-bad path { stroke: var(--orange); }
.spark.tone-neutral path { stroke: #7f9ab3; }
.kind-stat { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; }
.kind-stat b { font-size: 19px; font-weight: 300; }
.kind-stat .delta { font-size: 11.5px; }
.kind-stat small { flex-basis: 100%; color: var(--text-3); font-size: 11.5px; font-weight: 600; }

/* Apps: Fabric's Mission Control */

.mc-band { position: relative; height: 112px; overflow: hidden; border-radius: var(--radius); background: linear-gradient(180deg, #0f3050, #0b2238); }
.mc-lattice { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.95; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.mc-title { position: absolute; left: 24px; bottom: 16px; }
.mc-title h2 { margin: 0; font-size: 26px; font-weight: 300; }
.mc-title p { margin: 2px 0 0; color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.mc-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.mc-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  background: var(--gloss), var(--card);
  border-radius: var(--radius);
  border: 1px solid transparent;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
}
.mc-card:hover { border-color: rgba(47, 163, 255, 0.35); background: var(--card-hover); transform: translateY(-1px); }
.mc-main { padding: 20px 24px 22px; min-width: 0; }
.mc-id { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.mc-names h3 { margin: 0; font-size: 27px; font-weight: 300; line-height: 1.15; }
.mc-names p { margin: 3px 0 0; color: var(--text-2); font-size: 12px; font-weight: 600; }
.mc-now { text-align: right; line-height: 1.15; }
.mc-now b { display: block; font-size: 24px; font-weight: 300; color: var(--text-2); }
.mc-now span { color: var(--text-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.mc-now .mc-active { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 6px 0 0; }
.mc-now .mc-active b { display: inline; font-size: 13px; font-weight: 600; color: var(--text); }
.mc-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 22px; }
.mc-value { display: flex; align-items: baseline; gap: 8px; font-size: 28px; font-weight: 300; white-space: nowrap; }
.mc-value .delta { font-size: 12px; }
.mc-label { margin: 2px 0 9px; color: var(--text-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.mc-side { padding: 20px 20px; background: var(--card-side); border-left: 1px solid var(--line); border-radius: 0 var(--radius) var(--radius) 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) inset; }
.mc-notes { margin: 0; padding: 0; list-style: none; }
.mc-note { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.mc-note + .mc-note { margin-top: 18px; }
.mc-note .kind-icon { width: 34px; height: 34px; }
.mc-note-kind { display: block; color: var(--text-3); font-size: 11.5px; font-weight: 600; }
.mc-note b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.mc-note-quiet b { color: var(--text-2); font-weight: 500; }

/* Detail pages */

.big-card .kpi-chart-big { margin-bottom: 30px; }
.conversion { display: flex; align-items: center; gap: 28px; padding: 6px 18px 18px; }
.ring-wrap { position: relative; width: 124px; height: 124px; flex: none; }
.ring-chart { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 3.2; }
.ring-arc { fill: none; stroke: var(--violet); stroke-width: 3.2; stroke-linecap: round; transition: stroke-dasharray 0.8s ease; }
.ring-rate { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; font-weight: 300; }
.conv-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin: 0; }
.conv-stats dt { color: var(--text-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.conv-stats dd { margin: 0; font-size: 24px; font-weight: 300; }

/* Account */

.account {
  width: min(540px, calc(100vw - 24px));
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #10273b;
  color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.account::backdrop { background: rgba(2, 8, 16, 0.6); backdrop-filter: blur(4px); }
.account-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 14px; border-bottom: 1px solid var(--line); }
.account-avatar { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(160deg, #1d5f9e, #10355a); color: #bfe4ff; }
.account-avatar svg { width: 24px; height: 24px; }
.account-who { flex: 1; min-width: 0; }
.account-who h2 { margin: 0 0 4px; color: var(--text-3); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.account-rename { display: flex; gap: 10px; align-items: center; }
.account-rename input { flex: 1; min-width: 0; padding: 4px 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--text); font: inherit; font-size: 20px; font-weight: 400; outline: none; }
.account-rename input:not([readonly]):hover, .account-rename input:focus { border-bottom-color: var(--line-2); }
.account-who p { margin: 2px 0 0; font-size: 12px; }
.account-section { padding: 16px 20px 18px; }
.account-section h3 { margin: 0 0 4px; font-size: 13px; font-weight: 700; }
.account-note { margin: 0 0 12px; color: var(--text-2); font-size: 12.5px; }
.passkey-list { margin: 0 0 14px; padding: 0; list-style: none; }
.passkey { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.pk-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(47, 163, 255, 0.14); color: var(--blue-2); }
.pk-icon svg { width: 20px; height: 20px; }
.pk-main { display: flex; flex-direction: column; min-width: 0; }
.pk-name { font-weight: 600; }
.pk-meta { color: var(--text-3); font-size: 12px; }
.pk-rename { display: flex; gap: 10px; align-items: center; }
.pk-input { flex: 1; min-width: 0; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.2); color: var(--text); font: inherit; }
.pk-actions, .pk-confirm { display: flex; gap: 14px; align-items: center; font-size: 12.5px; }
.form-error { margin: 0 0 12px; color: #ffc4b8; font-size: 12.5px; }
.account-foot { display: flex; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--line); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 70;
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 16px;
  border-radius: 10px;
  background: #13324f;
  border: 1px solid rgba(47, 163, 255, 0.35);
  color: var(--text);
  font-size: 13px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: rgba(255, 122, 100, 0.45); }
body.down::before { content: "exepanel is not reachable right now."; position: fixed; inset: 0; display: grid; place-items: center; color: var(--text-2); }


/* LEDs: a small lit dot, a hot center and a soft glow. */

.led {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: middle;
  --led: #8aa0b4;
  --led-hot: #e6eef6;
  --led-deep: #4b5f72;
  background: radial-gradient(circle at 38% 32%, var(--led-hot) 0, var(--led) 42%, var(--led-deep) 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 7px color-mix(in srgb, var(--led) 70%, transparent), 0 1px 0 rgba(255, 255, 255, 0.08);
}
.led-green { --led: var(--green); --led-hot: #e2ffec; --led-deep: #1a8a4a; }
.led-amber { --led: var(--amber); --led-hot: #fff3d2; --led-deep: #a8700c; }
.led-red { --led: #ff6a55; --led-hot: #ffe0d9; --led-deep: #a3291a; }
.led-blue { --led: var(--blue-2); --led-hot: #e0f3ff; --led-deep: #1257a0; }
.led-gray { --led: #7d8e9e; --led-hot: #c4cfd9; --led-deep: #3d4b58; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06); }

/* LCD wells: recessed, dark glass, digits that glow over their faint unlit segments. */

.lcd {
  position: relative;
  display: inline-grid;
  padding: 5px 10px 4px;
  border-radius: 7px;
  background: var(--well);
  box-shadow: var(--well-shadow);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
.lcd::after {
  /* The glass's glare along the top. */
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  border-radius: 7px 7px 40% 40% / 7px 7px 10px 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent);
  pointer-events: none;
}
.lcd-ghost, .lcd-value { grid-area: 1 / 1; text-align: right; }
.lcd-ghost { color: rgba(120, 200, 255, 0.07); }
.lcd-value { color: #8fd6ff; text-shadow: 0 0 6px rgba(47, 163, 255, 0.7), 0 0 1px rgba(191, 232, 255, 0.9); }
.lcd-money .lcd-value { color: #8ff0e2; text-shadow: 0 0 6px rgba(52, 209, 195, 0.65), 0 0 1px rgba(210, 255, 248, 0.9); }
.lcd-money .lcd-ghost { color: rgba(120, 255, 235, 0.06); }
.lcd-big { font-size: 26px; font-weight: 500; letter-spacing: 0.02em; padding: 7px 12px 6px; }
.lcd-small { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 4px 7px 3px; border-radius: 5px; }
.lcd.lit .lcd-value { animation: lcdlit 1.1s ease; }
@keyframes lcdlit { 0% { filter: brightness(1); } 15% { filter: brightness(1.9); } 100% { filter: brightness(1); } }

/* Embossed buttons: raised, a light top edge, pressed in when clicked. */

.emboss-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: var(--emboss);
  box-shadow: var(--emboss-edge);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
  white-space: nowrap;
}
.emboss-button svg { width: 15px; height: 15px; color: var(--text-2); }
.emboss-button:hover { filter: brightness(1.12); text-decoration: none; }
.emboss-button:active { background: linear-gradient(180deg, #132e47, #183857); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset; }
.emboss-button:disabled { opacity: 0.5; cursor: default; filter: none; }
.emboss-button.mini { height: 24px; padding: 0 9px; font-size: 11.5px; border-radius: 6px; }
.pill-button { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset, 0 6px 18px rgba(21, 105, 200, 0.35); text-shadow: 0 -1px 0 rgba(0, 40, 90, 0.4); }
.inset-field {
  height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: var(--well);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) inset, 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.inset-field:focus { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) inset, 0 0 0 2px rgba(47, 163, 255, 0.45); }
.inset-field::placeholder { color: var(--text-3); }

.app-icon { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.4); }
.app-icon-xs { width: 16px; height: 16px; border-radius: 4px; font-size: 9px; }

/* Page tools: the controls under a headline. */

.page-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.page-tools .link-emboss { margin-left: auto; }
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.stack > .card { flex: none; }
.stack > .feed-card { flex: 1; }
.card-head .segmented { margin-left: auto; }
.card-action { margin-left: auto; font-size: 12px; }
.count-badge {
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 30%, #ff9b7f, #e8513a 70%);
  box-shadow: 0 0 8px rgba(255, 110, 80, 0.45), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
  align-self: center;
}
.card.busy { opacity: 0.75; transition: opacity 0.2s; }

/* Alerts */

.alerts { margin: 0; padding: 0; list-style: none; }
.alert { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 18px; border-top: 1px solid var(--line); }
.alert.read { opacity: 0.6; }
.alert.read .led { filter: saturate(0.3) brightness(0.8); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
.alert.arrive { animation: arrive 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.alert-badge { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 1px 3px rgba(0, 0, 0, 0.4); }
.alert-badge svg { width: 17px; height: 17px; }
.alert-badge .led { position: absolute; right: -1px; top: -1px; }
.alert-badge.tone-bad { color: var(--orange); }
.alert-badge.tone-trial { color: var(--amber); }
.alert-badge.tone-money { color: var(--teal); }
.alert-main { min-width: 0; }
.alert-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.alert-title { font-size: 13.5px; font-weight: 700; }
.alert-sev { padding: 1px 7px; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset; }
.sev-critical { color: #ffd2c8; background: rgba(255, 106, 85, 0.2); }
.sev-priority { color: #ffe2a8; background: rgba(255, 191, 71, 0.16); }
.sev-info { color: #bfe4ff; background: rgba(47, 163, 255, 0.16); }
.alert-app { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12px; font-weight: 600; }
.alert-message { margin: 3px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.alert-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.alerts-empty { display: flex; align-items: center; gap: 12px; padding: 16px 18px 18px; color: var(--text-2); font-size: 12.5px; border-top: 1px solid var(--line); }
.alerts-empty.big { padding: 34px 24px; font-size: 14px; justify-content: center; }
.alerts-card .card-head { align-items: center; }
.rules { margin: 0; padding: 0 18px 16px; list-style: none; }
.rules li { display: grid; grid-template-columns: 16px 170px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.rules li span { color: var(--text-2); }
.page-alerts .card + .card { margin-top: 14px; }
.mc-alert .kind-icon { position: relative; }
.mc-alert .led { position: absolute; right: -1px; top: -1px; }
.mc-alert b { font-weight: 500; color: var(--text); }
.mc-more { margin-top: 14px; padding-left: 46px; font-size: 12.5px; font-weight: 600; }

/* Breakdown: Fabric's Top 10 */

.breakdown-card { margin-top: 14px; }
.breakdown-card .card-head { align-items: center; flex-wrap: wrap; }
.bd-cols, .bd-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(90px, 0.75fr) minmax(124px, 0.8fr) minmax(110px, 0.75fr) minmax(90px, 0.7fr); gap: 16px; align-items: center; }
.bd-cols { padding: 0 18px 8px; color: var(--text-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.bd-rows { margin: 0; padding: 0; list-style: none; }
.bd-row { padding: 9px 18px; border-top: 1px solid var(--line); }
.bd-row:hover { background: rgba(255, 255, 255, 0.015); }
.bd-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.bd-rank { width: 18px; flex: none; color: var(--text-3); font-size: 12px; font-weight: 700; text-align: right; }
.bd-flag { font-size: 20px; line-height: 1; width: 24px; text-align: center; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.bd-plan { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--emboss); box-shadow: var(--emboss-edge); color: var(--text-2); font-size: 11px; font-weight: 800; }
.bd-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.bd-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13.5px; }
.bd-text small, .bd-count small { color: var(--text-3); font-size: 11.5px; font-weight: 600; }
.bd-share { display: flex; flex-direction: column; gap: 5px; }
.bd-share b { font-size: 13px; font-weight: 600; }
.bd-bar { height: 5px; border-radius: 3px; background: var(--well); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) inset; overflow: hidden; }
.bd-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(180deg, #5fc0ff, #1f86e8); box-shadow: 0 0 6px rgba(47, 163, 255, 0.5); }
.bd-count, .bd-money { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; }
.bd-count b, .bd-money b { font-size: 17px; font-weight: 300; }
.bd-count small { flex-basis: 100%; }
.bd-money .delta { font-size: 11.5px; }
.bd-other .bd-text b { color: var(--text-2); font-weight: 500; }

/* Retention */

.stat-card .kpi-chart { margin-bottom: 26px; }
.legend-card { margin: -10px 0 14px; flex-wrap: wrap; gap: 10px 16px; }
.lg-led { display: inline-flex; align-items: center; gap: 7px; }
.legend .lg-subs::before, .legend .lg-trials::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--teal); }
.legend .lg-trials::before { background: var(--violet); opacity: 0.8; }
.stack-voluntary { fill: #3d8fe0; }
.stack-involuntary { fill: var(--amber); }
.stack-refunds { fill: #ff7a64; }
.area-line { fill: none; stroke: var(--teal); stroke-width: 2.2; }
.area-second { stroke: var(--violet); stroke-width: 1.6; stroke-dasharray: 5 4; opacity: 0.85; }
.area-dot { background: var(--teal); box-shadow: 0 0 0 4px rgba(52, 209, 195, 0.22), 0 0 18px 4px rgba(52, 209, 195, 0.55); }
.pulse-teal { animation: pulse-teal 2.2s ease-in-out infinite; }
@keyframes pulse-teal { 0%, 100% { box-shadow: 0 0 0 4px rgba(52, 209, 195, 0.22), 0 0 16px 3px rgba(52, 209, 195, 0.5); } 50% { box-shadow: 0 0 0 9px rgba(52, 209, 195, 0.06), 0 0 26px 6px rgba(52, 209, 195, 0.75); } }
.area-chart { margin: 18px 34px 30px 0; }
.big-card .kpi-label { margin-bottom: 4px; }
.page-retention .row-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.cohorts { width: calc(100% - 36px); margin: 0 18px 12px; border-collapse: separate; border-spacing: 3px; font-size: 12.5px; }
.cohorts th { color: var(--text-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; white-space: nowrap; padding: 4px 6px; }
.cohorts tbody th { color: var(--text); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.cohorts .num { color: var(--text-2); text-align: right; padding-right: 10px; }
.cohorts th.num { text-align: right; }
.cell {
  height: 30px;
  min-width: 52px;
  border-radius: 4px;
  text-align: center;
  font-weight: 600;
  background: rgba(31, 134, 232, calc(var(--a, 0) * 0.85));
  box-shadow: 0 1px 0 rgba(255, 255, 255, calc(var(--a, 0) * 0.18)) inset, 0 -1px 0 rgba(0, 0, 0, 0.18) inset;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}
.cell.blank { background: rgba(255, 255, 255, 0.025); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) inset; }
.trial-bars { margin: 0 18px 26px 48px; height: 90px; }

/* Customers: GoSquared's "Now" list for payments */

.cust-cols, .cust-row { display: grid; grid-template-columns: 18px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 90px 46px 56px; gap: 14px; align-items: center; }
.cust-cols { padding: 0 18px 8px; color: var(--text-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.customers { margin: 0; padding: 0; list-style: none; }
.cust { border-top: 1px solid var(--line); transition: background 0.3s; }
.cust-row { width: 100%; padding: 10px 18px; border: 0; background: none; text-align: left; cursor: pointer; }
.cust-row:hover { background: rgba(255, 255, 255, 0.02); }
.cust.open { background: rgba(0, 0, 0, 0.12); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) inset; }
.cust-led { display: grid; place-items: center; }
.cust-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cust-names, .cust-product, .cust-last { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cust-names b, .cust-product b, .cust-last b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; }
.cust-names b.masked { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--text-2); }
.cust-names b.nick { color: #dff1ff; }
.cust-names small, .cust-product small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 11.5px; font-weight: 600; }
.cust-last .ev-time { text-align: left; }
.cust-ltv { font-weight: 600; text-align: right; }
.cust-cols span:nth-child(5) { text-align: right; }
.cust-chev { width: 16px; height: 16px; color: var(--text-3); transition: transform 0.2s; }
.cust.open .cust-chev { transform: rotate(180deg); color: var(--blue-2); }
.cust.flash { animation: flash 2.4s ease; }
.cust.flash-still { background: rgba(47, 163, 255, 0.14); }
@keyframes flash { 0% { background: rgba(47, 163, 255, 0.32); box-shadow: 0 0 0 1px rgba(47, 163, 255, 0.5) inset; } 100% { background: transparent; box-shadow: none; } }
.cust-panel { padding: 4px 18px 18px 50px; }
.cust-panel.busy { opacity: 0.6; min-height: 120px; }
.journey-wrap { overflow-x: auto; padding: 10px 2px 14px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }
.journey { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.tile {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 172px;
  padding: 10px 11px 11px;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0.04) 48%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, #24547f, #183a5a);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 -1px 0 rgba(0, 0, 0, 0.35) inset, 0 0 0 1px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.35);
}
.tile + .tile::before {
  /* The thread from the tile before. */
  content: "";
  position: absolute;
  left: -23px;
  top: 26px;
  width: 23px;
  height: 2px;
  background: linear-gradient(90deg, rgba(127, 200, 255, 0.15), rgba(127, 200, 255, 0.5));
  box-shadow: 0 0 6px rgba(47, 163, 255, 0.35);
}
.tile.tone-money { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0.04) 48%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #1c6a68, #134746); }
.tile.tone-trial { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0.04) 48%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #4a3f86, #302a5c); }
.tile.tone-bad { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0.04) 48%, rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #7a4423, #522c17); }
.tile-top { display: flex; align-items: center; gap: 7px; }
.tile-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(0, 0, 0, 0.22); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12); }
.tile-icon svg { width: 12px; height: 12px; }
.tile-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45); }
.tile-date { color: rgba(230, 242, 255, 0.72); font-size: 11.5px; }
.tile-amount { font-size: 15px; font-weight: 600; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); }
.tile-amount.negative { color: #ffc9a8; }
.tile-gap { align-self: flex-start; margin-top: 3px; }
.cust-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; margin: 4px 0 16px; }
.cust-details dt { color: var(--text-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cust-details dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 500; }
.cust-details .ltv dd { color: #8ff0e2; font-weight: 600; }
.nickname { display: flex; gap: 10px; align-items: center; }
.nickname-label { flex: 1; max-width: 380px; }
.nickname-label .inset-field { width: 100%; }

/* Notification settings */

.settings { margin: 0; padding: 0; list-style: none; }
.setting { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border-top: 1px solid var(--line); }
.setting:first-child { border-top: 0; }
.setting .app-icon { width: 44px; height: 44px; border-radius: 10px; font-size: 19px; }
.setting-names { display: flex; flex-direction: column; min-width: 0; }
.setting-names b { font-size: 15px; font-weight: 600; }
.setting-names small { color: var(--text-3); font-size: 11.5px; font-weight: 600; }
.setting-text { margin: 5px 0 0; color: var(--text-2); font-size: 12.5px; }
.settings-card .card-fine { padding-top: 12px; border-top: 1px solid var(--line); }

/* Fabric is the base: flat, clean dark cards, calm color and generous space. GoSquared's
   craft goes only on the controls and a few accents, at the level of Apple's pro apps of the
   time: fine 1px light and dark edges, gentle insets, small LEDs, LCD wells and the journey
   tiles. No gloss or texture on the surfaces. */

:root {
  --gloss: linear-gradient(transparent, transparent);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 1px 2px rgba(0, 0, 0, 0.25);
  --emboss: linear-gradient(180deg, #1d2f41, #192a3a);
  --emboss-edge: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(0, 0, 0, 0.42), 0 1px 1px rgba(0, 0, 0, 0.2);
  --well: #08131d;
  --well-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) inset, 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05);
  --capsule: linear-gradient(180deg, #1c2b3a, #182635);
  --capsule-edge: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 1px 0 rgba(255, 255, 255, 0.025);
  --pressed: #0f1b27;
  --pressed-edge: 0 1px 2px rgba(0, 0, 0, 0.5) inset, 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
  --hairline: rgba(0, 0, 0, 0.32);
}

/* Segmented controls: one graphite capsule, hairline separators, the chosen segment gently
   pressed in. */
.segmented {
  padding: 0;
  gap: 0;
  border-radius: 5px;
  background: var(--capsule);
  box-shadow: var(--capsule-edge);
  overflow: hidden;
}
.segmented button {
  position: relative;
  padding: 5px 11px;
  border-radius: 0;
  color: #aebfcf;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.segmented button + button { box-shadow: -1px 0 0 rgba(0, 0, 0, 0.42); }
.segmented button:hover { color: #e6eef6; background: rgba(255, 255, 255, 0.025); }
.segmented button[aria-pressed="true"],
.segmented button[aria-pressed="true"]:hover {
  background: var(--pressed);
  box-shadow: var(--pressed-edge);
  color: #cfe6fb;
  text-shadow: 0 0 3px rgba(47, 163, 255, 0.28);
}
.segmented.small button { padding: 3px 9px; font-size: 11.5px; }

/* The Sandbox switch: small, as Mac OS X 10.7 drew it; amber when on. */
.toggle { gap: 7px; font-size: 12px; }
.toggle-track {
  width: 36px;
  height: 18px;
  border-radius: 9px;
  background: #0b1621;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) inset, 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.toggle-on, .toggle-off { display: none; }
.toggle-knob {
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  background: linear-gradient(180deg, #eef2f5, #cdd5dc);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
.toggle[aria-checked="true"] { color: #e7a54c; }
.toggle[aria-checked="true"] .toggle-track {
  background: linear-gradient(180deg, #a8641a, #c27a26);
  box-shadow: 0 1px 2px rgba(60, 25, 0, 0.55) inset, 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06);
}
.toggle[aria-checked="true"] .toggle-knob { transform: translateX(18px); background: linear-gradient(180deg, #f6f2ec, #d9d1c6); }

/* LIVE: a small green LED in a recessed bezel, a soft glow that breathes. */
.live {
  gap: 7px;
  padding: 3px 10px 3px 4px;
  border: 0;
  border-radius: 5px;
  background: var(--capsule);
  box-shadow: var(--capsule-edge);
  color: #9fb3c4;
  font-size: 10px;
  text-shadow: none;
}
.live-bezel {
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #08121b;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7) inset, 0 1px 0 rgba(255, 255, 255, 0.07);
}
.live i, .live[data-state] i { position: relative; width: 7px; height: 7px; animation: none; }
.live i::after {
  content: "";
  position: absolute;
  left: 1.5px;
  top: 1px;
  width: 2.5px;
  height: 1.6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
}
.live[data-state="live"] { color: #8fd2a8; }
.live[data-state="live"] i { animation: ledpulse 3s ease-in-out infinite; }
@keyframes ledpulse {
  0%, 100% { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5), 0 0 3px rgba(79, 224, 138, 0.45); }
  50% { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5), 0 0 6px rgba(79, 224, 138, 0.7); }
}

/* The app switcher: a graphite pill, a gear segment on its left, the live count and an
   engraved arrow, as GoSquared's "25 people on Jim's Blog". */
.pill-group { display: inline-flex; border-radius: 6px; box-shadow: var(--capsule-edge); background: var(--capsule); }
.pill-gear {
  display: grid;
  place-items: center;
  width: 32px;
  height: 30px;
  border-radius: 6px 0 0 6px;
  color: #8ea3b6;
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.42);
}
.pill-gear svg { width: 15px; height: 15px; }
.pill-gear:hover { color: #e6eef6; background: rgba(255, 255, 255, 0.025); text-decoration: none; }
.pill-gear:active, .switch-button:active { background: var(--pressed); box-shadow: var(--pressed-edge); }
.switch-button, .switch-button:hover {
  height: 30px;
  gap: 7px;
  padding: 0 11px 0 7px;
  border-radius: 0 6px 6px 0;
  background: none;
  box-shadow: none;
  filter: none;
  color: #c9d6e2;
  font-size: 12.5px;
  font-weight: 500;
  text-shadow: none;
}
.switch-button:hover { background: rgba(255, 255, 255, 0.025); }
.switch-button .app-icon-sm { width: 18px; height: 18px; border-radius: 4px; font-size: 9.5px; }
.switch-text { white-space: nowrap; }
.switch-text #app-switch-name { font-weight: 600; color: #f1f6fb; }
.switch-count { display: inline-block; min-width: 1ch; color: #7fd9cf; font-weight: 700; }
.switch-count.lit { animation: lcdlit 1.1s ease; }
.switch-caret { width: 13px; height: 13px; color: #0a1520; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.14)); }

/* Rail: Fabric's flat icon rail with crisp line icons; only the active item has craft, a
   soft recessed well, a faint glow on the icon and a thin highlight bar. */
.rail {
  background: var(--rail);
  border-right: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: none;
}
.rail-item {
  height: 44px;
  margin: 1px 9px;
  border-radius: 6px;
  color: #74889b;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.rail-item svg { width: 21px; height: 21px; padding: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; filter: none; }
.rail-item:hover { color: #d5e2ee; background: rgba(255, 255, 255, 0.03); box-shadow: none; }
.rail-item:hover svg { filter: none; }
.rail-item.active, .rail-item.active:hover {
  color: #d9ecff;
  background: rgba(0, 0, 0, 0.26);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset, 0 1px 0 rgba(255, 255, 255, 0.045);
}
.rail-item.active svg { background: none; box-shadow: none; filter: drop-shadow(0 0 3px rgba(47, 163, 255, 0.45)); }
.rail-item.active::before {
  left: -9px;
  top: 11px;
  bottom: 11px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--blue-2);
  box-shadow: 0 0 4px rgba(47, 163, 255, 0.45);
  opacity: 1;
}
.rail-mark svg { filter: drop-shadow(0 1px 4px rgba(47, 163, 255, 0.25)); }
.rail-badge {
  top: 6px;
  margin-left: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: #d9533d;
  box-shadow: 0 0 0 2px var(--rail);
  font-size: 9.5px;
  line-height: 15px;
}
.rail-item[title]:hover::after { border-radius: 4px; background: #1a2a3a; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 16px rgba(0, 0, 0, 0.4); }

/* Top bar: matte, a hairline under it. */
.topbar { border-bottom: 1px solid var(--line); }

/* Cards, footers, buttons and badges: matte, fine edges. */
.card, .mc-card { border-radius: var(--radius); }
.card-foot { background: var(--card-foot); box-shadow: none; text-shadow: none; }
.mc-side { box-shadow: none; border-radius: 0 5px 5px 0; }
.emboss-button { border-radius: 5px; height: 28px; font-size: 12px; text-shadow: none; }
.emboss-button.mini { height: 22px; border-radius: 4px; font-size: 11px; }
.emboss-button:active { background: var(--pressed); box-shadow: var(--pressed-edge); }
.count-badge { background: #d9533d; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset; min-width: 17px; height: 17px; line-height: 17px; font-size: 10.5px; }
.app-icon { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.14) inset; }
.alert-badge { width: 32px; height: 32px; background: rgba(255, 255, 255, 0.035); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 0 0 1px rgba(0, 0, 0, 0.25); }
.alert-badge svg { width: 15px; height: 15px; }
.bd-bar i { background: #2b8fe6; box-shadow: none; }
.bd-plan { border-radius: 4px; }
.cell { border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, calc(var(--a, 0) * 0.1)) inset; text-shadow: none; }
.cust.open { background: rgba(0, 0, 0, 0.12); box-shadow: none; }
.inset-field { border-radius: 5px; }

/* LEDs: small, a soft glow. */
.led { width: 8px; height: 8px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.55), 0 0 4px color-mix(in srgb, var(--led) 45%, transparent); }
.led-gray { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.55); }

/* LCD wells: recessed and precise, a faint glare, digits that glow only a little. */
.lcd { border-radius: 4px; }
.lcd::after { border-radius: 4px 4px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent); }
.lcd-value { color: #9fd6fb; text-shadow: 0 0 3px rgba(47, 163, 255, 0.35); }
.lcd-money .lcd-value { color: #9be8de; text-shadow: 0 0 3px rgba(52, 209, 195, 0.3); }
.lcd-ghost { color: rgba(140, 200, 240, 0.05); }
.lcd-big { font-size: 23px; padding: 6px 10px 5px; }
.lcd-small { font-size: 10.5px; border-radius: 3px; padding: 3px 6px 2px; }

/* Journey tiles: graphite with a muted tint, a thin top light line, crisp type. */
.tile,
.tile.tone-money,
.tile.tone-trial,
.tile.tone-bad {
  gap: 3px;
  padding: 9px 10px 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--tint, rgba(120, 160, 200, 0.07)), rgba(0, 0, 0, 0) 70%), #18232e;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.075) inset, 0 -1px 0 rgba(0, 0, 0, 0.3) inset, 0 0 0 1px rgba(0, 0, 0, 0.38), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.tile.tone-money { --tint: rgba(52, 209, 195, 0.11); --ink: #86d6cd; }
.tile.tone-trial { --tint: rgba(180, 156, 255, 0.11); --ink: #b8a9ee; }
.tile.tone-bad { --tint: rgba(240, 140, 80, 0.12); --ink: #e8a57a; }
.tile.tone-neutral { --ink: #a9bccd; }
.tile + .tile::before { top: 24px; height: 1px; background: rgba(150, 180, 210, 0.22); box-shadow: none; }
.tile-icon { width: 18px; height: 18px; background: rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); color: var(--ink, #a9bccd); }
.tile-icon svg { width: 11px; height: 11px; }
.tile-label { color: var(--ink, #c9d6e2); font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; text-shadow: none; }
.tile-date { color: #8094a7; font-size: 11px; }
.tile-amount { color: #eef4f9; font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; text-shadow: none; }
.tile-amount.negative { color: #e8a57a; }

/* Rows stay Fabric's: plain hairline separators. */
.ev, .kind-row, .cust, .alert, .bd-row, .setting, .countries li, .passkey { border-top-color: var(--line); box-shadow: none; }


/* Motion */

@keyframes breathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(47, 163, 255, 0.22), 0 0 16px 3px rgba(47, 163, 255, 0.55); } 50% { box-shadow: 0 0 0 9px rgba(47, 163, 255, 0.06), 0 0 26px 6px rgba(47, 163, 255, 0.8); } }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bump { 0% { color: inherit; } 18% { color: #bfe8ff; text-shadow: 0 0 18px rgba(47, 163, 255, 0.7); } 100% { text-shadow: none; } }
@keyframes arrive {
  0% { opacity: 0; transform: translateY(-10px); background: rgba(47, 163, 255, 0.22); }
  25% { opacity: 1; transform: none; }
  100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Narrower screens */

@media (max-width: 1100px) {
  .kpis, .kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .row-mid, .row-low, .row-detail, .row-pair { grid-template-columns: 1fr; }
  .mc-card { grid-template-columns: 1fr; }
  .mc-side { border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
  .page-retention .row-detail { grid-template-columns: 1fr; }
  .cust-details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phone: the rail becomes a bottom bar */

@media (max-width: 760px) {
  .rail {
    inset: auto 0 0 0;
    width: auto;
    height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    flex-direction: row;
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(10, 22, 34, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .rail-mark, .rail-foot { display: none; }
  .rail-items { flex-direction: row; width: 100%; margin: 0; }
  .rail-item { flex: 1; height: 60px; gap: 3px; min-width: 0; }
  .rail-item svg { width: 21px; height: 21px; }
  .rail-item span { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.01em; }
  .rail-item.active { background: none; color: #8fd6ff; }
  .rail-item.active::before { left: 22%; right: 22%; top: 0; bottom: auto; width: auto; height: 2px; border-radius: 0 0 2px 2px; }
  .rail-item[title]:hover::after { display: none; }
  .main { margin-left: 0; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .topbar { flex-wrap: wrap; height: auto; gap: 8px 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; }
  .page-title { font-size: 16px; }
  .topbar::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .switcher { order: 3; margin-right: auto; }
  .switch-button { max-width: 150px; }
  .switch-button #app-switch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .avatar-button { display: grid; order: 2; }
  .live { order: 1; margin-left: auto; padding: 3px 8px 3px 7px; }
  .segmented button { padding: 5px 8px; }
  .toggle .toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pv-long { display: none; }
  .live .live-text { display: none; }
  .live { padding: 3px; }
  .switch-text #app-switch-words, .switch-count { display: none; }
  .switch-text #app-switch-name { text-transform: capitalize; }
  .switch-button { max-width: 210px; }
  .switch-text { overflow: hidden; text-overflow: ellipsis; }
  .rail-item svg { width: 21px; height: 21px; }
  .rail-item, .rail-item:hover, .rail-item.active, .rail-item.active:hover { margin: 0; border-radius: 0; background: none; box-shadow: none; }
  .rail { background: rgba(10, 22, 34, 0.96); }
  .live i { margin: 0 1px; }
  .segmented { order: 4; }
  .toggle { order: 5; }
  .page { padding: 16px 14px 24px; }
  .foot { padding: 0 14px 18px; }
  .identity { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; }
  .identity-who { gap: 12px; }
  .identity .app-icon-lg { width: 48px; height: 48px; border-radius: 12px; font-size: 22px; }
  .identity-name { font-size: 22px; }
  .activity-wrap { grid-column: 1 / -1; order: 3; height: 42px; }
  .identity-now b { font-size: 30px; }
  .identity-now span { font-size: 11px; }
  .headline { font-size: 22px; }
  .subline { font-size: 13.5px; }
  .growth-chart { height: 160px; }
  .kpis, .kpis-2, .kpis-3, .kpis-4 { grid-template-columns: 1fr; gap: 12px; }
  .kpis-4 > .kpi-wide { grid-column: auto; }
  .kpi-value { font-size: 30px; }
  .kpi-chart { height: 96px; }
  .map-body { grid-template-columns: 1fr; gap: 12px; padding: 0 14px 12px; }
  .map-card .card-head { padding-left: 14px; padding-right: 14px; }
  .map-controls { justify-content: flex-start; margin-left: 0; width: 100%; }
  .map-note { padding-left: 14px; padding-right: 14px; }
  .ev { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 10px 14px; }
  .ev-time { display: none; }
  .kinds-cols, .kind-row, .kinds-pick .kinds-cols, .kinds-pick .kind-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.7fr); gap: 10px; }
  .kinds-pick .kind-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.7fr) 20px; }
  .kinds-cols span:nth-child(2), .kind-trend { display: none; }
  .kind-row, .kinds-cols { padding-left: 14px; padding-right: 14px; }
  .kind-icon { width: 28px; height: 28px; }
  .mc-band { height: 92px; }
  .mc-main { padding: 16px; }
  .mc-id { grid-template-columns: 48px minmax(0, 1fr); }
  .mc-id .app-icon-lg { width: 48px; height: 48px; border-radius: 12px; }
  .mc-names h3 { font-size: 22px; }
  .mc-now { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; text-align: left; }
  .mc-now b { display: inline; font-size: 20px; }
  .mc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .mc-value { font-size: 24px; }
  .conversion { flex-direction: column; align-items: flex-start; }
  .preview-bar { bottom: calc(70px + env(safe-area-inset-bottom)); right: 10px; padding: 5px 12px; font-size: 11.5px; }
  .signin-column { padding-top: 32px; }
  .signin-mark { width: 88px; height: 88px; }
  .signin-word { font-size: 38px; }
  .signin-lattice { height: 40vh; }
  .rail-items { overflow-x: auto; scrollbar-width: none; }
  .rail-items::-webkit-scrollbar { display: none; }
  .rail-item { flex: 1 0 60px; }
  .rail-badge { top: 6px; margin-left: 2px; box-shadow: 0 0 0 2px var(--rail); }
  .identity-now { grid-column: 1 / -1; order: 4; justify-content: flex-start; }
  .meter { align-items: flex-start; }
  .lcd-big { font-size: 21px; }
  .page-tools .link-emboss { margin-left: 0; }
  .bd-cols, .bd-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 0.9fr); gap: 10px; }
  .bd-cols span:nth-child(3), .bd-count, .bd-cols span:nth-child(5), .bd-trend { display: none; }
  .bd-row, .bd-cols { padding-left: 14px; padding-right: 14px; }
  .bd-rank { display: none; }
  .breakdown-card .card-head .segmented { margin-left: 0; }
  .cust-cols { display: none; }
  .cust-row { grid-template-columns: 14px minmax(0, 1fr) auto auto; gap: 10px; padding: 10px 14px; }
  .cust-row .led-trail { display: none; }
  .cust-product, .cust-last { display: none; }
  .cust-panel { padding: 4px 14px 16px; }
  .cust-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { width: 138px; }
  .nickname { flex-wrap: wrap; }
  .alert { grid-template-columns: 34px minmax(0, 1fr); padding: 12px 14px; }
  .alert-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .rules li { grid-template-columns: 14px minmax(0, 1fr); }
  .rules li span { grid-column: 2; }
  .setting { grid-template-columns: 40px minmax(0, 1fr); }
  .setting .segmented { grid-column: 1 / -1; justify-self: start; }
  .cohort-card { overflow-x: auto; }
  .cohorts { min-width: 460px; }
  .page-retention .row-detail { grid-template-columns: 1fr; }
}

/* Audience card: when the card is as tall as the Alerts and Live column (two columns),
   the countries go under the map and fill the rest of the card (views.js counts the
   rows that fit and uses two columns when one is not enough). */

@media (min-width: 1101px) {
  .row-mid .map-body { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 8px; }
  .row-mid .map { flex: none; box-sizing: content-box; padding: calc(var(--spare, 0px) / 2) 0; }
  .row-mid .map-side { flex: 1; display: flex; flex-direction: column; min-height: 96px; }
  .row-mid .countries-wrap { position: relative; flex: 1; }
  .row-mid .countries-wrap > .countries { position: absolute; inset: 0; overflow: hidden; }
}
.countries.two { display: grid; grid-auto-flow: column; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 26px; align-content: start; }
.countries.two li:last-child { border-bottom: 1px solid var(--line); }
.map-card .card-foot svg:first-child { color: var(--phosphor); }

/* New event tooltips on the map: the map's own tooltip (.map-tip), shown for 2 s. Only its
   motion is set here. */

.map-pop { animation: pop 2.2s ease forwards; }
.map-pop.below { animation-name: pop-below; }
@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, -80%); }
  10%, 80% { opacity: 1; transform: translate(-50%, -100%); }
  100% { opacity: 0; transform: translate(-50%, -100%); }
}
@keyframes pop-below {
  0% { opacity: 0; transform: translate(-50%, -20%); }
  10%, 80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 0); }
}

/* Live Map: the map fills the content area under the top bar, edge to edge, on the page
   color with a faint vignette; no card around it. Two of the panel's cards, flat and
   collapsible, sit in its corners at the grid's gap. Its top bar controls take the time
   range's place as plain top bar items. Full screen also hides the rail and the top bar. */

body[data-page="map"] #range, body[data-page="map"] .foot { display: none; }
.page-tools-top, .map-tools { display: contents; }
/* The Live Map's top bar holds more controls (Sales / Users / Both among them): none wraps,
   the switcher's sentence gives way first. */
body[data-page="map"] .page-title, body[data-page="map"] .topbar .segmented button { white-space: nowrap; }
body[data-page="map"] .switcher { min-width: 0; flex: 0 1 auto; }
body[data-page="map"] .switch-button { min-width: 0; max-width: 100%; }
body[data-page="map"] .switch-text { overflow: hidden; text-overflow: ellipsis; }
body[data-page="map"] .activity-label { display: none; }
body[data-page="map"] .main { height: 100vh; height: 100dvh; }
body[data-page="map"] .page { display: flex; flex-direction: column; max-width: none; min-height: 0; padding: 0; }
.page-map { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.livemap-stage {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  touch-action: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.2) 100%), var(--page);
}
.livemap-stage.gl { cursor: grab; }
.livemap-stage.gl.dragging { cursor: grabbing; }
.livemap-dock { position: absolute; z-index: 3; max-height: calc(100% - 28px); }
.livemap-today { left: 14px; bottom: 14px; width: 300px; }
.livemap-live { top: 14px; right: 14px; width: 380px; }
.livemap-window { right: 14px; bottom: 14px; width: 300px; }
.livemap-window[hidden] { display: none; }
.livemap-exit { position: absolute; z-index: 4; top: 14px; right: 14px; }
body.kiosk .livemap-live { top: 56px; max-height: calc(100% - 70px); }
.livemap-zoom { position: absolute; z-index: 3; top: 14px; left: 14px; }

body.kiosk .rail, body.kiosk .topbar, body.kiosk .preview-bar, body.kiosk .toast { display: none; }
body.kiosk .main { margin-left: 0; padding-bottom: 0; }
@media (max-width: 760px) {
  .livemap-today { right: 14px; width: auto; }
  .livemap-live { left: 14px; width: auto; }
  .livemap-window { display: none; }
}

/* LED meter (ui.js ledMeter), the panel's one meter for shares and ratios: small round
   LEDs, lit ones cyan (#88D8F8) with a soft glow and a tiny highlight, unlit ones dark
   recessed dots. */
.ledm { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; line-height: 0; }
.ledm i {
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 70%, #11273b 0, #08131e 75%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7) inset, 0 0.5px 0 rgba(255, 255, 255, 0.06);
}
.ledm i.on {
  background: radial-gradient(circle at 38% 32%, #ffffff 0, #e6f8ff 14%, #88d8f8 46%, #3d9fd0 100%);
  box-shadow: 0 0 3px rgba(136, 216, 248, 0.8), 0 0 6px rgba(136, 216, 248, 0.35);
}

/* The top bar's activity meter: the shared LED meter and a small label, beside LIVE. */
.activity { display: inline-flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.activity-rows { display: inline-flex; flex-direction: column; gap: 3px; }
.activity-row { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 760px) { .activity-label { display: none; } .activity { order: 1; } }

/* App identity: an app's initial glows in its neon color on a near-black tile with a fine
   neon edge (icons with a picture keep the picture). Any element with .hue-N carries its
   app's color as --app. */
.app-icon:not(.app-icon-all) {
  background: #07121c;
  color: var(--app, var(--app-1));
  text-shadow: 0 0 6px color-mix(in srgb, var(--app, var(--app-1)) 65%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--app, var(--app-1)) 55%, transparent) inset, 0 0 9px color-mix(in srgb, var(--app, var(--app-1)) 18%, transparent) inset;
}
.app-icon:has(img) { background: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
/* The Mission Control card's accent: a thin line of the app's color along its top. */
.app-accent { box-shadow: inset 0 2px 0 var(--app), var(--card-shadow); }

/* The LED meter in one color (ledMeter's color): an app's, or a kind's. */
.ledm-color i.on {
  background: radial-gradient(circle at 38% 32%, #ffffff 0, color-mix(in srgb, var(--led) 40%, white) 16%, var(--led) 52%, color-mix(in srgb, var(--led) 65%, black) 100%);
  box-shadow: 0 0 3px color-mix(in srgb, var(--led) 75%, transparent), 0 0 6px color-mix(in srgb, var(--led) 30%, transparent);
}
.ledm-small i { width: 3px; height: 3px; }
.ledm-small { gap: 2px; }

/* Shares (parts.js shareBar), after GoSquared's Traffic Sources: a stat strip whose
   underlines are the segments' colors and act as tabs, a segmented stacked bar in a recessed
   track and a legend with dots and popularity LEDs, all in the segments' colors. */
.share { padding: 2px 18px 14px; }
.stat-strip { display: flex; gap: 4px; margin-bottom: 12px; }
.stat-strip button {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 6px 7px;
  border: 0;
  border-radius: 5px;
  background: none;
  cursor: pointer;
}
.stat-strip button:hover { background: rgba(255, 255, 255, 0.025); }
.stat-strip button[aria-selected="true"] { background: var(--pressed); box-shadow: var(--pressed-edge); }
.stat-strip b { font-size: 22px; font-weight: 300; line-height: 1.15; white-space: nowrap; }
.stat-strip span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 11px; font-weight: 600; }
.stat-strip i { width: 22px; height: 2px; margin-top: 3px; border-radius: 1px; background: var(--seg); box-shadow: 0 0 4px color-mix(in srgb, var(--seg) 60%, transparent); }
.stack-bar {
  display: flex;
  gap: 1px;
  height: 10px;
  padding: 2px;
  border-radius: 6px;
  background: var(--well);
  box-shadow: var(--well-shadow);
  overflow: hidden;
}
.stack-bar i {
  flex: none;
  min-width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--seg) 70%, white), var(--seg) 45%, color-mix(in srgb, var(--seg) 72%, black));
  transition: opacity 0.2s;
}
.share.picking .stack-bar i:not(.on), .share.picking .legend-list li:not(.on) { opacity: 0.35; }
.legend-list { margin: 12px 0 0; padding: 0; list-style: none; }
.legend-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.legend-list li:first-child { border-top: 0; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--seg); box-shadow: 0 0 4px color-mix(in srgb, var(--seg) 70%, transparent); }
.legend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.legend-value { font-weight: 600; text-align: right; white-space: nowrap; }
.legend-list .ledm { grid-column: 2; margin-top: 4px; }

/* The gauge (ui.js gauge), after GoSquared's Visitors: now between the 7 day min and max,
   a fine fill in a recessed track. */
.gauge { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 8px; margin-top: 10px; }
.gauge-end { color: var(--text-3); font-size: 10.5px; font-weight: 600; line-height: 1.2; text-align: center; }
.gauge-end b { display: block; color: var(--text-2); font-size: 12px; }
.gauge-track { height: 10px; padding: 2px; border-radius: 6px; background: var(--well); box-shadow: var(--well-shadow); }
.gauge-fill { display: block; height: 100%; min-width: 2px; border-radius: 3px; background: linear-gradient(180deg, #8fd0ff, var(--blue-2) 50%, #1a6fc4); box-shadow: 0 0 6px rgba(47, 163, 255, 0.45); }
.gauge-now { grid-column: 1 / -1; margin-top: 5px; font-size: 12px; color: var(--text-3); }
.gauge-now b { color: var(--text); font-weight: 700; }

/* The new event's tooltip on the map takes its app's color; a refund keeps the red edge. */
.map-pop { box-shadow: 0 0 0 1px color-mix(in srgb, var(--app, var(--phosphor)) 45%, transparent), inset 0 1px 0 color-mix(in srgb, var(--app, var(--phosphor)) 60%, transparent), 0 4px 14px rgba(0, 0, 0, 0.45); }
.map-pop b { color: var(--app, #d6ffe0); }
.map-pop[data-tone="bad"] { box-shadow: 0 0 0 1px rgba(214, 110, 100, 0.75), inset 0 1px 0 rgba(214, 110, 100, 0.8), 0 4px 14px rgba(0, 0, 0, 0.45); }

/* The customer row's end: a small gear and the round chevron. */
.cust-actions { display: inline-flex; align-items: center; justify-self: end; gap: 8px; }
.cust-gear { padding: 0 6px; }
.cust-gear svg { width: 12px; height: 12px; }
.cust-actions .emboss-button { pointer-events: auto; }

/* The LED trail (ui.js ledTrail): an item's last events, newest rightmost and ringed. */
.led-trail { justify-self: end; gap: 3px; }
.led-trail i { width: 5px; height: 5px; }
.led-trail i.state-good { --led: var(--green); }
.led-trail i.state-wait { --led: var(--amber); }
.led-trail i.state-bad { --led: var(--red); }
.led-trail i.state-off { --led: #7d8c9b; }
.led-trail i.on {
  background: radial-gradient(circle at 38% 32%, #ffffff 0, color-mix(in srgb, var(--led) 40%, white) 18%, var(--led) 55%, color-mix(in srgb, var(--led) 65%, black) 100%);
  box-shadow: 0 0 3px color-mix(in srgb, var(--led) 70%, transparent);
}
.led-trail i.state-off.on { box-shadow: none; }
.led-trail i.newest { box-shadow: 0 0 0 1.5px #0b1621, 0 0 0 2.5px color-mix(in srgb, var(--led) 70%, transparent), 0 0 4px color-mix(in srgb, var(--led) 60%, transparent); }

/* A named customer stands out, as GoSquared's named visitors: a deep navy band behind the
   identity cell and the name in bold white. */
.cust.named .cust-who { margin: -10px 0 -10px -14px; padding: 10px 0 10px 14px; background: linear-gradient(90deg, rgba(21, 64, 132, 0.55), rgba(21, 64, 132, 0.18) 70%, transparent); border-radius: 3px 0 0 3px; }
.cust.named .cust-names b.nick { color: #fff; font-weight: 700; }
.legend-list .legend-empty { display: block; color: var(--text-3); }
@media (max-width: 760px) {
  .cust-gear { display: none; }
}

/* A round icon button (the shared embossed button): the Live Map's close in full screen. */
.emboss-button.round { width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 50%; }
.emboss-button.round svg { width: 14px; height: 14px; }

/* The map's zoom (parts.js zoomControl), after GoSquared's LiveStats map in the panel's
   control style: a slim graphite capsule, + and -, a recessed track with a small knob, and
   a sun button under it. */
.zoom-control { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.zoom-capsule { display: flex; flex-direction: column; align-items: center; width: 24px; border-radius: 5px; background: var(--capsule); box-shadow: var(--capsule-edge); overflow: hidden; }
.zoom-button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: #aebfcf; cursor: pointer; }
.zoom-button:hover { color: #e6eef6; background: rgba(255, 255, 255, 0.025); }
.zoom-button:active { background: var(--pressed); box-shadow: var(--pressed-edge); }
.zoom-button svg { width: 12px; height: 12px; }
.zoom-reset { border-radius: 5px; background: var(--capsule); box-shadow: var(--capsule-edge); }
.zoom-range {
  width: 24px;
  height: 120px;
  margin: 2px 0;
  writing-mode: vertical-lr;
  direction: rtl;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  cursor: pointer;
}
.zoom-range::-webkit-slider-runnable-track { width: 6px; border-radius: 3px; background: var(--well); box-shadow: var(--well-shadow); }
.zoom-range::-moz-range-track { width: 6px; border-radius: 3px; background: var(--well); box-shadow: var(--well-shadow); }
.zoom-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 7px; margin-left: -4px; border-radius: 2px; background: linear-gradient(180deg, #dfe9f3, #9fb2c4); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
.zoom-range::-moz-range-thumb { width: 14px; height: 7px; border: 0; border-radius: 2px; background: linear-gradient(180deg, #dfe9f3, #9fb2c4); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
@media (max-width: 760px) { .zoom-range { height: 80px; } }

/* Count with tick bars (ui.js tickCount), after LiveStats 2012's "16 VISITORS": the number
   and its unit in a small recessed box, then thin vertical ticks, the lit ones light and
   the rest faded. For counts; shares keep the LED meter. */
.ticks { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; }
.ticks-num {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 40px;
  padding: 3px 6px 2px;
  border-radius: 3px;
  background: var(--well);
  box-shadow: var(--well-shadow);
  line-height: 1;
}
.ticks-num b { color: var(--text); font-size: 13px; font-weight: 600; }
.ticks-num small { margin-top: 2px; color: var(--text-3); font-size: 7.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ticks-bars { display: inline-flex; align-items: stretch; gap: 2px; height: 22px; }
.ticks-bars i { width: 2px; border-radius: 1px; background: rgba(170, 195, 220, 0.1); }
.ticks-bars i.on { background: linear-gradient(180deg, #e9f1f8, #a9bccd); box-shadow: 0 0 2px rgba(200, 225, 245, 0.25); }
.ticks-color .ticks-bars i.on { background: linear-gradient(180deg, color-mix(in srgb, var(--tick) 55%, white), var(--tick)); box-shadow: 0 0 3px color-mix(in srgb, var(--tick) 40%, transparent); }
.bd-count, .kind-stat { row-gap: 3px; }
.kind-stat .ticks { margin-right: 2px; }
@media (max-width: 760px) {
  .ticks { gap: 5px; }
  .ticks-num { min-width: 34px; padding: 3px 4px 2px; }
  .ticks-bars { gap: 1px; }
}

/* Recessed gray count badge (ui.js numBadge), as the counts beside LiveStats' referrers. */
.num-badge {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px 1px;
  border-radius: 3px;
  background: #1b2a39;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.45) inset, 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #b9c8d6;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  text-align: right;
}
/* A compact list with a badge at each row's end (the Live Map's countries today). */
.badge-list { margin: 10px 0 4px; padding: 0; list-style: none; }
.badge-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.rules li { grid-template-columns: 16px 170px minmax(0, 1fr) 36px; }
.rule-count { justify-self: end; }

/* Card tabs (parts.js tabs), after LiveStats' "Referrers / Searches / Campaigns": quiet
   tabs on a slightly recessed band along the card's top; the chosen one lifted a step, and
   a thin strip in its color across the card under the row. */
.tabs {
  display: flex;
  gap: 2px;
  padding: 6px 12px 0;
  background: rgba(0, 0, 0, 0.14);
  box-shadow: inset 0 -2px 0 var(--tab, var(--blue-2)), 0 1px 0 rgba(0, 0, 0, 0.25);
}
.tab {
  position: relative;
  padding: 6px 13px 7px;
  border: 0;
  border-radius: 4px 4px 0 0;
  background: none;
  color: #8fa4b8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.tab:hover { color: #dfe9f2; background: rgba(255, 255, 255, 0.025); }
.tab[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tab, var(--blue-2)) 26%, #1c2c3c), color-mix(in srgb, var(--tab, var(--blue-2)) 16%, #172634));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.3);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tab, var(--blue-2)); }
.tab:focus-visible { outline-offset: -2px; border-radius: 4px 4px 0 0; }
.tabs + .card-head { padding-top: 12px; }

/* Round chevron button (parts.js chevronButton), LiveStats' row-end "›", crisp. */
.chev-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  justify-self: end;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #3c9cf0, #1d6fd0);
  box-shadow: 0 0 0 1px rgba(4, 30, 70, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}
.chev-button svg { width: 10px; height: 10px; margin-left: 1px; }
.chev-button.open { transform: rotate(90deg); }
.chev-button:hover, .cust-row:hover .chev-button, .mc-card:hover .chev-button { filter: brightness(1.12); }
.mc-id .chev-button { align-self: center; }
.mc-id { grid-template-columns: 64px minmax(0, 1fr) auto 18px; }
.mc-metric .ticks { height: 26px; }
.kind-row.picked { background: rgba(47, 163, 255, 0.07); }

/* Gentle striping for long lists (Customers, Events, the breakdown table): every other row
   a step lighter, as in LiveStats' lists. */
.striped > :nth-child(even) { background: rgba(255, 255, 255, 0.014); }
.striped > .cust.open, .striped > .kind-row.picked { background: rgba(47, 163, 255, 0.07); }

/* Chart crosshair (chart.js crosshair): one overlay per chart, a thin guide snapped to the
   nearest point, a ringed dot on each series, one tooltip in the map tooltip's style. */
.xh-chart { cursor: crosshair; touch-action: pan-y; }
.xh-chart:focus-visible { outline-offset: 6px; }
.xh { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.xh-guide { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid rgba(190, 215, 240, 0.35); }
.xh-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 2px #0b1621, 0 0 0 3px color-mix(in srgb, var(--c) 55%, transparent);
  transform: translate(-50%, -50%);
}
.xh-tip {
  position: absolute;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 9px;
  border-radius: 4px;
  background: rgba(7, 18, 29, 0.95);
  box-shadow: 0 0 0 1px rgba(150, 195, 240, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 14px rgba(0, 0, 0, 0.45);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(12px, -50%);
}
.xh-tip.flip { transform: translate(calc(-100% - 12px), -50%); }
.xh-tip b { color: var(--text); font-weight: 700; }
.xh-tip span { display: inline-flex; align-items: center; gap: 5px; color: var(--text); }
.xh-tip i { width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.chart.hovering .bar, .chart.hovering .stack { opacity: 0.55; transition: opacity 0.12s; }
.chart.hovering .hot { opacity: 1; }
.bar.hot { fill: #3aa8ff; }
.activity .xh-guide { border-left-color: rgba(127, 208, 255, 0.3); }

/* The Overview's bottom strip (parts.js dayStrip, chart.js dayLines), after LiveStats
   2012's "Visitors Online, Today / Yesterday": pinned to the window's bottom beside the
   rail, the page padded so it never covers content; on a phone a block after the page. */
.day-strip {
  position: fixed;
  left: 68px;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  height: var(--strip-h);
  padding: 12px 28px 24px 22px;
  background: rgba(10, 22, 34, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.03) inset, 0 -6px 18px rgba(0, 0, 0, 0.25);
}
:root { --strip-h: 108px; }
body.has-strip .main { padding-bottom: var(--strip-h); }
body.has-strip .preview-bar { bottom: calc(var(--strip-h) + 12px); }
body.has-strip .toast { bottom: calc(var(--strip-h) + 14px); }
.day-side { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.day-title { margin: 0; font-size: 13px; font-weight: 700; }
.day-toggle { display: flex; align-items: baseline; gap: 4px; font-size: 11.5px; }
.day-pick { padding: 0; border: 0; background: none; color: var(--text-3); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.day-pick:hover { color: var(--text-2); }
.day-pick[aria-pressed="true"] { color: var(--text); font-weight: 700; }
.day-slash { color: var(--text-3); }
.day-value { margin-top: 3px; font-size: 18px; font-weight: 300; line-height: 1.1; }
.day-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 11px; }
.day-chart { position: relative; align-self: start; height: calc(var(--strip-h) - 46px); margin: 4px 0 0 34px; }
.day-line { fill: none; vector-effect: non-scaling-stroke; }
.day-line-focus { stroke: #e8f2fb; stroke-width: 1.6; }
.day-line-faint { stroke: rgba(160, 190, 222, 0.32); stroke-width: 1.2; }
/* Just after midnight: yesterday's whole day stays readable, today's start is blue. */
.day-line-yesterday { stroke: rgba(232, 242, 251, 0.62); stroke-width: 1.4; }
.day-line-today { stroke: var(--blue-2); stroke-width: 2.2; }
.day-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-2);
  box-shadow: 0 0 0 2px rgba(47, 163, 255, 0.25), 0 0 10px 2px rgba(47, 163, 255, 0.55);
  transform: translate(-50%, -50%);
}
.day-hours { bottom: -18px; display: block; height: 12px; }
.day-hours div { position: absolute; transform: translateX(-50%); }
.day-hours div:first-child { transform: none; }
@media (max-width: 760px) {
  .day-strip { position: static; grid-template-columns: 1fr; gap: 8px; height: auto; margin: 0 14px 12px; padding: 12px 14px 24px; border-radius: var(--radius); background: var(--card); box-shadow: var(--card-shadow); border: 0; backdrop-filter: none; }
  .day-side { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
  .day-sub { flex-basis: 100%; }
  .day-chart { height: 70px; margin-left: 26px; }
  .day-hours div:nth-child(even) { display: none; }
  body.has-strip .main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.has-strip .preview-bar { bottom: calc(70px + env(safe-area-inset-bottom)); }
  body.has-strip .toast { bottom: 26px; }
}

/* Usage first (a free app): no money on screen, so no note about amounts either. */
body.usage-first #gross-note, body.usage-first #rates-note { display: none; }