:root {
      --blue-900:   #1E1E2D;
      --blue-600:   #0F6095;
      --blue-400:   #A1A6BB;
      --blue-200:   #E6E6FF;
      --blue-100:   #F3F3FB;
      --orange:     #FF8900;
      --orange-100: #FFF3E5;
      --green:      #4C9018;
      --green-100:  #ECFBF0;
      --purple:     #7C5CFC;
      --purple-100: #F0EBFF;
      --white:      #FFFFFF;

      --bg:      var(--blue-100);
      --surface: var(--white);
      --text:    var(--blue-900);
      --muted:   var(--blue-400);
      --border:  var(--blue-200);

      --r-card: 16px;
      --shadow: 0 1px 2px rgba(30,30,45,.05), 0 4px 16px rgba(30,30,45,.07);
      --shadow-hover: 0 4px 8px rgba(30,30,45,.08), 0 12px 32px rgba(30,30,45,.12);
      --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }

    /* ── HEADER ── */
    .header {
      background: var(--blue-900);
      padding: 22px 24px 20px;
      position: relative;
      overflow: hidden;
    }
    .header::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 75% 60%, rgba(15,96,149,.28) 0%, transparent 65%);
      pointer-events: none;
    }
    .header-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      position: relative;
    }
    .header-left { display: flex; align-items: center; gap: 14px; }
    .venue-logo {
      width: 50px; height: 50px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(15,96,149,.45), rgba(124,92,252,.3));
      border: 1px solid rgba(255,255,255,.12);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; font-weight: 800; color: #fff;
      flex-shrink: 0; overflow: hidden;
    }
    .venue-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
    .header-divider {
      width: 1px; height: 28px;
      background: rgba(255,255,255,.12);
      flex-shrink: 0;
    }
    .header-company { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-bottom: 3px; }
    .header-slash { color: rgba(255,255,255,.2); margin: 0 6px; font-weight: 400; }
    .header-badge {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 3px 10px; border-radius: 99px;
      background: rgba(255,137,0,.14); border: 1px solid rgba(255,137,0,.28);
      color: var(--orange); font-size: 10px; font-weight: 700;
      letter-spacing: .08em; text-transform: uppercase;
      margin-bottom: 5px; width: fit-content;
    }
    .header-badge-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--orange); animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
    .header-title {
      font-size: clamp(18px, 3vw, 26px); font-weight: 800;
      color: #fff; letter-spacing: -.025em; line-height: 1.1;
    }
    .header-subtitle { font-size: 12px; color: rgba(255,255,255,.38); margin-top: 3px; }
    .header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; flex-wrap: wrap; }
    .header-meta-block { text-align: right; }
    .header-meta-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.26); }
    .header-meta-value { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.52); margin-top: 1px; }
    .btn-profile {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 9px 18px; border-radius: 10px;
      background: rgba(15,96,149,.22); border: 1px solid rgba(15,96,149,.45);
      color: rgba(255,255,255,.82); font-size: 12.5px; font-weight: 600;
      text-decoration: none; white-space: nowrap;
      transition: background .18s, border-color .18s, transform .12s;
    }
    .btn-profile:hover { background: rgba(15,96,149,.38); border-color: rgba(15,96,149,.65); transform: translateY(-1px); }

    /* ── PAGE ── */
    .page { max-width: 1200px; margin: 0 auto; padding: 28px 20px 80px; }

    .section-label {
      font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--muted);
      margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
    }
    .section-label::after { content:''; flex:1; height:1px; background:var(--border); }

    /* ── TIER 1 KPI GRID ── */
    .tier1-grid {
      display: grid; grid-template-columns: repeat(3,1fr);
      gap: 16px; margin-bottom: 0;
    }
    @media (max-width:700px) { .tier1-grid { grid-template-columns:1fr; } }

    .kpi {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-card); padding: 22px 22px 18px;
      box-shadow: var(--shadow); position: relative; overflow: hidden;
      transition: box-shadow .2s, transform .18s;
    }
    .kpi:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
    .kpi::before {
      content:''; position:absolute; inset:0 0 auto 0;
      height:3px; border-radius: var(--r-card) var(--r-card) 0 0;
    }
    .kpi--orange::before { background: var(--orange); }
    .kpi--blue::before   { background: var(--blue-600); }
    .kpi--green::before  { background: var(--green); }

    .kpi__icon {
      width:36px; height:36px; border-radius:10px;
      display:flex; align-items:center; justify-content:center;
      font-size:16px; margin-bottom:14px;
    }
    .kpi--orange .kpi__icon { background: var(--orange-100); }
    .kpi--blue   .kpi__icon { background: rgba(15,96,149,.1); }
    .kpi--green  .kpi__icon { background: var(--green-100); }

    .kpi__label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:6px; }
    .kpi__value { font-size:clamp(26px,6vw,36px); font-weight:800; line-height:1; letter-spacing:-.03em; }
    .kpi--orange .kpi__value { color: var(--orange); }
    .kpi--blue   .kpi__value { color: var(--blue-600); }
    .kpi--green  .kpi__value { color: var(--green); }
    .kpi__desc   { font-size:11.5px; color:var(--muted); margin-top:5px; }

    .superfan-inner { display:flex; align-items:center; gap:12px; margin-top:12px; }
    .superfan-avatar {
      width:42px; height:42px; border-radius:50%;
      background: linear-gradient(135deg, var(--orange), #ffb347);
      border: 2px solid rgba(255,137,0,.3);
      color:#fff; font-size:14px; font-weight:700;
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0; overflow:hidden;
    }
    .superfan-avatar img { width:100%; height:100%; object-fit:cover; }
    /* avatarEl() outputs .avatar — restyle it to match the orange superfan brand */
    .superfan-inner .avatar {
      width:42px; height:42px;
      background: linear-gradient(135deg, var(--orange), #ffb347);
      border-color: rgba(255,137,0,.3);
      color: #fff; font-size:14px;
    }
    .superfan-name { font-size:14px; font-weight:700; color:var(--text); line-height:1.2; }
    .superfan-visits { font-size:11.5px; color:var(--orange); font-weight:600; margin-top:2px; }

    /* ── FILTER BAR ── */
    .filter-bar-wrap {
      position: sticky; top: 0; z-index: 100;
      margin: 20px -20px 24px; padding: 0 20px;
      background: rgba(243,243,251,.88);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(230,230,255,.65);
    }
    .filter-bar {
      max-width: 1200px; margin: 0 auto;
      display: flex; align-items: center; gap: 4px;
      padding: 10px 0; overflow-x: auto; scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .filter-bar::-webkit-scrollbar { display:none; }
    .filter-label {
      font-size:10.5px; font-weight:700; text-transform:uppercase;
      letter-spacing:.08em; color:var(--muted);
      margin-right:8px; white-space:nowrap; flex-shrink:0;
    }
    .filter-tab {
      display:inline-flex; align-items:center; gap:6px;
      padding:6px 16px; border-radius:99px;
      font-size:12.5px; font-weight:600; color:var(--muted);
      background:transparent; border:1.5px solid transparent;
      cursor:pointer; white-space:nowrap; flex-shrink:0;
      transition: all .18s; font-family: var(--font);
    }
    .filter-tab:hover { color:var(--text); background:var(--surface); border-color:var(--border); }
    .filter-tab.active {
      color:var(--blue-600); background:var(--surface);
      border-color:var(--blue-600); box-shadow:0 1px 8px rgba(15,96,149,.12);
    }
    .filter-tab-count {
      font-size:10px; font-weight:700;
      background:rgba(15,96,149,.1); color:var(--blue-600);
      border-radius:99px; padding:1px 7px;
    }
    .filter-tab.active .filter-tab-count { background:var(--blue-600); color:#fff; }

    /* ── CARDS ── */
    .card {
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--r-card); box-shadow:var(--shadow); padding:24px;
      transition:box-shadow .2s;
      overflow: hidden;     /* contain any canvas or content overflows within card boundaries */
      min-width: 0;         /* allow grid/flex items to shrink below content size */
    }
    .card:hover { box-shadow:var(--shadow-hover); }
    .card__header {
      display:flex; align-items:center; justify-content:space-between;
      padding-bottom:16px; margin-bottom:20px; border-bottom:1px solid var(--border);
    }
    .card__title { display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:700; color:var(--text); }
    .card__title-icon {
      width:30px; height:30px; border-radius:9px;
      display:flex; align-items:center; justify-content:center;
      font-size:14px; flex-shrink:0;
    }
    .card__title-icon--orange { background:var(--orange-100); }
    .card__title-icon--blue   { background:rgba(15,96,149,.1); }
    .card__title-icon--green  { background:var(--green-100); }
    .card__title-icon--purple { background:var(--purple-100); }
    .badge {
      font-size:11px; font-weight:600; color:var(--muted);
      background:var(--bg); border:1px solid var(--border);
      border-radius:99px; padding:3px 11px;
    }

    /* ── LAYOUT ── */
    .row { margin-bottom:20px; }
    .col-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
    @media (max-width:860px) {
      .col-2 { grid-template-columns:1fr; }
      .mobile-order-first  { order: -1; }
      .mobile-order-second { order:  1; }
    }

    /* ── CHARTS ── */
    .chart-wrap {
      position: relative;
      width: 100%;          /* explicit 100% lets Chart.js ResizeObserver measure a stable width */
      height: 240px;
      overflow: hidden;     /* prevent canvas from bleeding out during resize */
    }
    .chart-wrap canvas {
      display: block;       /* remove inline-block gap */
      max-width: 100%;      /* safety net: cap canvas if Chart.js over-shoots on resize */
    }

    /* ── LIST ITEMS ── */
    .list-item {
      display:flex; align-items:center; gap:12px;
      padding:10px 0; border-bottom:1px solid var(--blue-100);
    }
    .list-item:first-child { padding-top:0; }
    .list-item:last-child  { border-bottom:none; padding-bottom:0; }

    .rank {
      width:24px; height:24px; border-radius:7px;
      background:var(--bg); border:1px solid var(--border);
      font-size:10.5px; font-weight:800; color:var(--muted);
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
    }
    .rank--1 { background:#FFF7E5; border-color:#FFCD60; color:#A07000; }
    .rank--2 { background:#F2F2F5; border-color:#C4C4CC; color:#5A5A6A; }
    .rank--3 { background:#FFF0EE; border-color:#FFB8A8; color:#A03A22; }

    .avatar {
      width:38px; height:38px; border-radius:50%;
      border:2px solid var(--border); background:var(--blue-200);
      color:var(--blue-600); font-size:13px; font-weight:700;
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0; overflow:hidden;
      transition:transform .18s, box-shadow .18s; cursor:default;
    }
    .avatar:hover { transform:scale(1.18); box-shadow:0 4px 12px rgba(15,96,149,.2); }
    .avatar img { width:100%; height:100%; object-fit:cover; }

    .list-body { flex:1; min-width:0; }
    .list-name { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:5px; }

    .progress-row { display:flex; align-items:center; gap:8px; }
    .progress-track { flex:1; height:5px; background:var(--bg); border-radius:99px; overflow:hidden; }
    .progress-fill { height:100%; border-radius:99px; transition:width .7s cubic-bezier(.4,0,.2,1); }
    .progress-fill--blue   { background:var(--blue-600); }
    .progress-fill--orange { background:var(--orange); }
    .progress-fill--green  { background:var(--green); }
    .progress-sublabel { font-size:10.5px; font-weight:600; color:var(--muted); white-space:nowrap; flex-shrink:0; }

    .metric { text-align:right; flex-shrink:0; }
    .metric__value { font-size:19px; font-weight:800; line-height:1; letter-spacing:-.025em; }
    .metric__value--blue   { color:var(--blue-600); }
    .metric__value--orange { color:var(--orange); }
    .metric__label { font-size:10px; font-weight:500; color:var(--muted); margin-top:2px; }

    /* ── SHOUTOUT ── */
    .shoutout {
      background: linear-gradient(135deg, rgba(255,137,0,.07) 0%, rgba(255,137,0,.02) 100%);
      border: 1.5px solid rgba(255,137,0,.22); border-radius:var(--r-card);
      padding:18px 22px; margin-bottom:20px;
      display:flex; align-items:flex-start; gap:14px;
    }
    .shoutout-icon { font-size:26px; flex-shrink:0; line-height:1; margin-top:2px; }
    .shoutout-period {
      font-size:10px; font-weight:700; text-transform:uppercase;
      letter-spacing:.1em; color:var(--orange); margin-bottom:4px;
    }
    .shoutout-text { font-size:13.5px; font-weight:500; color:var(--text); line-height:1.65; }
    .shoutout-text strong { color:var(--orange); font-weight:700; }

    /* ── NEW vs RETURNING ── */
    .donut-wrap { display:flex; align-items:center; gap:24px; }
    .donut-chart-container { position:relative; width:130px; height:130px; flex-shrink:0; }
    .donut-legend { flex:1; }
    .donut-legend-item {
      display:flex; align-items:center; gap:10px;
      padding:8px 0; border-bottom:1px solid var(--border);
    }
    .donut-legend-item:last-child { border-bottom:none; }
    .donut-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
    .donut-legend-label { font-size:12px; font-weight:600; color:var(--text); flex:1; }
    .donut-legend-value { font-size:14px; font-weight:800; color:var(--text); }
    .donut-legend-pct { font-size:11px; color:var(--muted); margin-top:1px; }

    /* ── WATCHLIST ── */
    .watchlist-item {
      display:flex; align-items:center; gap:12px;
      padding:11px 13px; border-radius:10px;
      background:var(--bg); border:1px solid var(--border);
      margin-bottom:8px; transition:box-shadow .18s;
    }
    .watchlist-item:last-child { margin-bottom:0; }
    .watchlist-item:hover { box-shadow:var(--shadow); }
    .watchlist-badge {
      padding:3px 10px; border-radius:99px;
      font-size:10px; font-weight:700; text-transform:uppercase;
      letter-spacing:.05em; white-space:nowrap; flex-shrink:0;
    }
    .watchlist-badge--atrisk { background:rgba(255,137,0,.12); color:var(--orange); border:1px solid rgba(255,137,0,.25); }
    .watchlist-badge--onedone { background:rgba(76,144,24,.1); color:var(--green); border:1px solid rgba(76,144,24,.2); }

    /* ── EMPTY ── */
    .empty { text-align:center; padding:36px 20px; color:var(--muted); }
    .empty__icon  { font-size:28px; margin-bottom:10px; }
    .empty__title { font-size:14px; font-weight:700; color:var(--text); }
    .empty__body  { font-size:12.5px; margin-top:5px; line-height:1.6; }
    .empty__body code {
      background:var(--bg); border:1px solid var(--border);
      border-radius:4px; padding:1px 6px;
      font-family:monospace; font-size:12px; color:var(--blue-600);
    }

    /* ── SEE ALL BUTTON ── */
    .see-all-btn {
      font-size:12px; font-weight:600; color:var(--blue-600);
      background:none; border:none; cursor:pointer;
      padding:4px 10px; border-radius:8px;
      transition:background .15s, color .15s;
      white-space:nowrap;
    }
    .see-all-btn:hover { background:rgba(15,96,149,.08); }

    /* ── MODAL ── */
    .modal-backdrop {
      position:fixed; inset:0; z-index:9000;
      background:rgba(30,30,45,.55);
      backdrop-filter:blur(4px);
      display:flex; align-items:center; justify-content:center;
      padding:20px;
      animation:mFadeIn .15s ease;
    }
    .modal-backdrop.hidden { display:none !important; }
    @keyframes mFadeIn  { from { opacity:0; } to { opacity:1; } }
    @keyframes mSlideUp { from { transform:translateY(16px); opacity:0; } to { transform:translateY(0); opacity:1; } }
    .modal-box {
      background:var(--white); border-radius:20px;
      box-shadow:0 20px 60px rgba(30,30,45,.25);
      width:100%; max-width:480px; max-height:80vh;
      display:flex; flex-direction:column;
      animation:mSlideUp .2s ease;
    }
    .modal-header {
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
      padding:20px 20px 16px;
      border-bottom:1px solid var(--border);
      flex-shrink:0;
    }
    .modal-title { font-size:15px; font-weight:700; color:var(--text); }
    .modal-sub   { font-size:12px; color:var(--muted); margin-top:3px; }
    .modal-close {
      width:32px; height:32px; flex-shrink:0;
      border:none; border-radius:50%;
      background:var(--blue-100); color:var(--text);
      font-size:16px; line-height:1; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      transition:background .15s;
    }
    .modal-close:hover { background:var(--border); }
    .modal-list {
      overflow-y:auto; flex:1;
      padding:10px 16px 16px;
    }
    .modal-list .list-item { padding:8px 4px; }
    .modal-list .list-item:last-child { border-bottom:none; }

    /* ── VISIT TOOLTIP ── */
    .visit-tooltip {
      position:fixed; z-index:9500;
      background:#1E1E2D;
      border-radius:12px;
      box-shadow:0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.2);
      min-width:195px; max-width:250px; max-height:280px;
      display:none; flex-direction:column;
      pointer-events:none;
      overflow:hidden;
    }
    .visit-tooltip.visible { display:flex; }
    .visit-tooltip__header {
      font-size:12.5px; font-weight:700;
      color:rgba(255,255,255,.95);
      padding:10px 13px 9px;
      border-bottom:1px solid rgba(255,255,255,.1);
      flex-shrink:0;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .visit-tooltip__scroll {
      overflow-y:auto; flex:1;
      padding:6px 13px 10px;
    }
    .visit-tooltip__item {
      font-size:11.5px; color:rgba(255,255,255,.72);
      font-variant-numeric:tabular-nums;
      padding:3px 0; line-height:1.6;
    }
    .visit-tooltip__item + .visit-tooltip__item {
      border-top:1px solid rgba(255,255,255,.06);
    }
    .list-item { cursor:default; }

    /* ── RESPONSIVE ─────────────────────────────────────────────────────────── */

    /* 860 px — two-col grids already collapse (via .col-2 rule above) */

    /* 640 px — tighter spacing, smaller chart height */
    @media (max-width: 640px) {
      .page { padding: 18px 14px 60px; }
      .header { padding: 14px 16px 12px; }
      .filter-bar-wrap { margin: 16px -14px 18px; padding: 0 14px; }
      .card { padding: 16px; }
      .card__header { padding-bottom: 12px; margin-bottom: 14px; }
      .kpi { padding: 16px 14px 14px; }
      .chart-wrap { width: 100%; height: 200px; }
      .shoutout { padding: 14px 14px; gap: 10px; }
      .section-label { margin-bottom: 10px; }
      .modal-box { border-radius: 14px; }
    }

    /* 480 px — hide header meta blocks that eat space, stack donut vertically */
    @media (max-width: 480px) {
      .header-meta-block { display: none; }
      .filter-label { display: none; }        /* "Period:" label wastes width on narrow tabs */
      .btn-profile { padding: 7px 12px; font-size: 11.5px; gap: 5px; }
      .donut-wrap { flex-direction: column; align-items: stretch; gap: 16px; }
      .donut-chart-container { width: 120px; height: 120px; margin: 0 auto; flex-shrink: 0; }
      .watchlist-badge { font-size: 9px; padding: 2px 8px; }
    }

    /* 360 px — further tighten page gutters */
    @media (max-width: 360px) {
      .page { padding: 12px 10px 50px; }
      .card { padding: 12px; }
      .chart-wrap { width: 100%; height: 170px; }
    }

    /* ── FOOTER ── */
    .footer-wrap { background:var(--blue-900); padding:36px 24px 28px; }
    .footer-inner {
      max-width:1200px; margin:0 auto;
      display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;
    }
    .footer-logo {
      width:42px; height:42px; border-radius:12px;
      background:rgba(15,96,149,.28); border:1px solid rgba(255,255,255,.09);
      display:flex; align-items:center; justify-content:center;
      font-size:17px; font-weight:800; color:#fff;
    }
    .footer-tagline { font-size:15px; font-weight:700; color:rgba(255,255,255,.82); letter-spacing:-.01em; }
    .footer-links { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:6px 16px; }
    .footer-link { font-size:12.5px; font-weight:500; color:rgba(255,255,255,.42); text-decoration:none; transition:color .15s; }
    .footer-link:hover { color:rgba(255,255,255,.82); }
    .footer-link--cta {
      color:var(--blue-600); font-weight:700;
      background:rgba(15,96,149,.18); border:1px solid rgba(15,96,149,.38);
      padding:6px 16px; border-radius:8px; transition:background .15s;
    }
    .footer-link--cta:hover { background:rgba(15,96,149,.32); color:#5fb3e8; }
    .footer-divider { width:4px; height:4px; background:rgba(255,255,255,.18); border-radius:50%; }
    .footer-copy { font-size:11px; color:rgba(255,255,255,.18); }
  </style>