:root{
  --bg:#ffffff;
  --panel: rgba(255,255,255,.52);
  --panel2: rgba(255,255,255,.62);
  --text:#0b0f0c;
  --muted:#3f5548;
  --green:#16a34a;
  --green2:#22c55e;
  --line:rgba(11,15,12,.12);
  --shadow: 0 14px 40px rgba(0,0,0,.14);
  --radius:18px;
  --radius2:24px;
  --maxw: 1080px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color:var(--text);
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background: url("BULBnBIKE.png") center/cover no-repeat;
  opacity: .30;
  filter: saturate(1.05) contrast(1.02);
  pointer-events:none;
  z-index:-2;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background: radial-gradient(900px 520px at 20% 0%, rgba(34,197,94,.18), transparent 60%),
              radial-gradient(700px 450px at 85% 20%, rgba(34,197,94,.10), transparent 62%),
              rgba(255,255,255,.52);
  pointer-events:none;
  z-index:-1;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}

.container{
  width:min(var(--maxw), calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0 110px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 8px 0 14px;
}

.brand{
  display:flex; gap:10px; align-items:center;
  font-weight:800;
  letter-spacing:.3px;
}

.brandLogo{
  width:30px;
  height:30px;
  border-radius:10px;
  box-shadow: 0 10px 24px rgba(34,197,94,.12);
}

.navlinks{display:flex; gap:14px; align-items:center; font-size:14px; color:var(--muted)}
.pill{
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
}

.hero{
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.62));
  border:1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 18px;
  overflow:hidden;
}

.hline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}

.hleft h1{
  font-size: 20px;
  margin: 0 0 6px;
  font-weight: 860;
}
.hleft p{
  margin:0;
  color: var(--muted);
  font-size: 13px;
  line-height:1.35;
}
.hright{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end;
}
.select, .btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.66);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 13px;
  outline:none;
}
.btn{cursor:pointer;}
.btn.primary{
  border-color: rgba(22,163,74,.35);
  background: rgba(22,163,74,.12);
}
.btn.primary:hover{background: rgba(22,163,74,.16)}
.btn.ghost:hover{background: rgba(11,15,12,.05)}

.gridWrap{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  background: rgba(255,255,255,.60);
  border:1px solid var(--line);
  border-radius: var(--radius);
}

.tile{
  min-height: 92px;
  border-radius: 18px;
  border:1px solid rgba(11,15,12,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  position:relative;
  cursor:pointer;
  user-select:none;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: 10px;
}
.tile:hover{border-color: rgba(22,163,74,.22)}
.tile:active{transform: scale(.985)}
.tile .tag{
  color: var(--muted);
  font-size: 11px;
  letter-spacing:.3px;
}
.tile .main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.logo{
  width:32px; height:32px;
  border-radius: 12px;
  background: rgba(11,15,12,.04);
  border:1px solid rgba(11,15,12,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:.2px;
}
.centerAccent{
  border-color: rgba(22,163,74,.22);
}
.centerAccent .logo{
  background: rgba(22,163,74,.10);
  border-color: rgba(22,163,74,.22);
}
.centerAccent .name{font-weight: 860;}
.name{
  font-size: 14px;
  font-weight: 720;
}
.sub{
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metaRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 0 4px;
  flex-wrap:wrap;
}
.metric{
  color: var(--muted);
  font-size: 13px;
}
.metric b{color:var(--text)}
.smallLinks{
  display:flex; gap:14px; align-items:center; color: var(--muted); font-size:13px;
}
.smallLinks a{padding:6px 0}

.section{
  margin-top: 14px;
  padding: 14px 16px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
}

.section h2{margin:0 0 8px; font-size: 15px;}
.section p{margin: 0; color: var(--muted); line-height:1.5; font-size:14px}

.cols{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.card{
  padding: 14px 14px;
  border:1px solid rgba(11,15,12,.10);
  border-radius: var(--radius);
  background: rgba(255,255,255,.60);
}
.card h3{margin:0 0 6px; font-size:14px}
.card p{margin:0; color:var(--muted); font-size:13px; line-height:1.5}

.footer{
  margin-top: 18px;
  color: rgba(63,85,72,.92);
  font-size: 12px;
  line-height:1.5;
}

.bottomBar{
  position: fixed;
  left:0; right:0; bottom:0;
  padding: 10px 12px 12px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(11,15,12,.12);
  z-index: 50;
}

.bottomInner{
  width:min(var(--maxw), calc(100% - 24px));
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.barLeft{
  display:flex; align-items:center; gap:10px;
  min-width: 0;
}
.badge{
  width:32px; height:32px;
  border-radius: 12px;
  background: rgba(22,163,74,.12);
  border: 1px solid rgba(22,163,74,.30);
  display:flex; align-items:center; justify-content:center;
  font-weight:950;
}
.barTitle{
  display:flex; flex-direction:column; min-width:0;
}
.barTitle .t{font-weight:880; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.barTitle .s{color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.miniLogos{display:flex; gap:6px; align-items:center;}
.mini{
  width:28px; height:28px;
  border-radius: 10px;
  background: rgba(11,15,12,.04);
  border:1px solid rgba(11,15,12,.10);
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  font-size:11px;
}

.barBtns{display:flex; gap:8px; align-items:center}
.barBtns .btn{padding: 9px 12px; font-size: 13px}

.page{
  padding: 18px;
  border:1px solid var(--line);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.52);
  box-shadow: var(--shadow);
}
.page h1{margin:0 0 12px; font-size: 20px}
.page h2{margin: 18px 0 8px; font-size: 15px}
.page p{margin: 0 0 12px; color: var(--muted); line-height:1.6}
.page ul{margin: 8px 0 12px 18px; color: var(--muted); line-height:1.6}

.notice{
  border:1px solid rgba(22,163,74,.25);
  background: rgba(22,163,74,.08);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: rgba(11,15,12,.92);
  font-size: 13px;
  line-height:1.5;
}

/* Modal */
.modalOverlay{
  position:fixed;
  inset:0;
  background: rgba(11,15,12,.35);
  backdrop-filter: blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 1000;
}
.modal{
  width:min(980px, 100%);
  max-height: calc(100vh - 36px);
  overflow:auto;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(11,15,12,.14);
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}
.modalHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 16px 16px 12px;
  border-bottom:1px solid rgba(11,15,12,.10);
}
.modalHeader h3{margin:0; font-size: 16px; font-weight: 900;}
.modalHeader .mhSub{margin-top:4px; color: var(--muted); font-size: 13px; line-height:1.35;}
.modalClose{
  border:1px solid rgba(11,15,12,.12);
  background: rgba(255,255,255,.70);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
}
.modalBody{padding: 14px 16px 18px;}
.modalGrid{display:grid; grid-template-columns: 1fr; gap: 12px;}
.kpiRow{display:flex; gap:10px; flex-wrap:wrap;}
.kpi{
  flex: 1 1 160px;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(11,15,12,.10);
  background: rgba(255,255,255,.70);
}
.kpi .k{color: var(--muted); font-size: 12px;}
.kpi .v{font-weight: 920; margin-top:4px}
.chart{
  border:1px solid rgba(11,15,12,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.70);
  padding: 12px;
}
.chartTitle{font-weight: 860; font-size: 13px; margin-bottom: 8px;}
.bars{
  display:flex;
  gap:6px;
  align-items:flex-end;
  height: 120px;
  padding: 6px 2px 2px;
}
.bar{
  flex:1;
  border-radius: 10px 10px 6px 6px;
  border:1px solid rgba(11,15,12,.10);
  background: rgba(22,163,74,.20);
  position:relative;
}
.bar.neg{background: rgba(239,68,68,.18);}
.bar::after{
  content: attr(data-v);
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: -20px;
  font-size: 11px;
  color: var(--muted);
  white-space:nowrap;
}
.playlist{
  display:grid;
  gap:8px;
}
.track{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 10px;
  border-radius: 14px;
  border:1px solid rgba(11,15,12,.10);
  background: rgba(255,255,255,.70);
}
.track .l{min-width:0}
.track .t{font-weight: 820; font-size: 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.track .m{color: var(--muted); font-size: 12px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.track .r{color: var(--muted); font-size: 12px; white-space:nowrap}

@media (min-width: 840px){
  .gridWrap{grid-template-columns: 1.3fr .7fr; align-items:start}
  .cols{grid-template-columns: 1fr 1fr}
  .tile{min-height: 110px}
  .hleft h1{font-size: 22px}
  .modalGrid{grid-template-columns: 1fr 1fr}
}

/* Footer mini sizing */
.mini{cursor:pointer}
.mini.big{width:36px;height:36px;border-radius:12px;font-size:12px}

.optional{display:none}

.selectPill{appearance:none; padding:10px 12px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.9); font-weight:800;}
.tile.selected{border-color:rgba(22,163,74,.45); box-shadow:0 10px 24px rgba(22,163,74,.12);}
.tile.selected::after{content:""; position:absolute; top:10px; right:10px; width:10px; height:10px; border-radius:999px; background:rgba(22,163,74,.9); box-shadow:0 0 0 3px rgba(22,163,74,.14);}
.optCount{font-size:11px;color:var(--muted);}
.notice{text-align:center;}
.noticeActions{margin-top:10px; display:flex; justify-content:center;}


/* v1.9: footer lineup strip */
.footer{
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(10,80,40,0.18);
}
.footerInner{ align-items:center; gap:10px; }
.footerLabel{ font-weight:700; letter-spacing:0.2px; }
.foyoStrip{ display:flex; align-items:center; gap:8px; overflow:hidden; flex:1; }
.fchip{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  min-width:46px; height:42px; border-radius:14px;
  border:1px solid rgba(10,80,40,0.18);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  cursor:pointer; user-select:none;
}
.fchip .t{ font-weight:800; font-size:12px; line-height:1.0; }
.fchip .c{ font-size:10px; opacity:0.75; line-height:1.0; margin-top:2px; }
.fchip.center{ min-width:58px; height:48px; border-radius:16px; }
.fchip.center .t{ font-size:13px; }

.footerAction{
  min-width:44px; height:44px; border-radius:16px; font-weight:900;
}

/* cap line single-line */
.tileCap{ white-space:nowrap; font-size:12px; }

/* Modal header nav buttons */
.modalHeader{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.modalNavBtn{
  width:40px; height:36px; border-radius:14px;
  border:1px solid rgba(10,80,40,0.18);
  background: rgba(255,255,255,0.9);
  cursor:pointer; font-weight:900;
}
.modalHeaderCenter{ flex:1; min-width:0; }
.modalHeaderCenter .mhmeta{ font-size:12px; opacity:0.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* QuickStart: keep it bitey and small */
#quickStart .qsLinks{ display:none !important; }
#quickStart .qsPrimary{ margin-top:10px; }


/* v1.10 footer strip */
.bottomBar{
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(10,80,40,0.18);
}
.bottomInner{ gap:12px; }
.barLeft .t{ font-weight:800; }
.foyoStrip{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  overflow:hidden;
}
.fchip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  padding:0 12px;
  border-radius:16px;
  border:1px solid rgba(10,80,40,0.18);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  cursor:pointer;
  user-select:none;
  min-width:72px;
}
.fchip .ticker{ font-weight:900; font-size:12px; line-height:1; }
.fchip .cap{ font-size:11px; opacity:0.72; line-height:1; margin-top:2px; white-space:nowrap; }
.fchip .stack{ display:flex; flex-direction:column; min-width:0; }
.fchip .icon{
  width:26px; height:26px; border-radius:10px;
  border:1px solid rgba(10,80,40,0.16);
  background: rgba(230,245,235,0.9);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  flex:0 0 auto;
}
.fchip .icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.fchip.center{
  height:50px; border-radius:18px; min-width:92px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.fchip.center .ticker{ font-size:13px; }
.fchip.center .icon{ width:30px; height:30px; border-radius:12px; }

/* tighten on very small screens */
@media (max-width: 380px){
  .fchip{ min-width:64px; padding:0 10px; gap:6px; }
  .fchip .cap{ display:none; }
}

/* Tile logo: render image when present */
.tile .logo{ overflow:hidden; display:flex; align-items:center; justify-content:center; }
.tile .logo img{ width:100%; height:100%; object-fit:contain; display:block; }


/* Cube-Flare v1 */
.grid{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(10px);
  box-shadow:
    0 18px 50px rgba(0,0,0,.10),
    0 2px 10px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.grid:before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.22;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(11,15,12,.08) 0px,
      rgba(11,15,12,.08) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 70px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(11,15,12,.08) 0px,
      rgba(11,15,12,.08) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 70px
    );
  mask-image: radial-gradient(circle at 50% 35%, rgba(0,0,0,.95), rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 78%);
}
.grid:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(circle at 50% 40%, rgba(22,163,74,.10), rgba(0,0,0,0) 60%);
}

.tile{
  box-shadow:
    0 8px 18px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.55);
  transform: translateZ(0);
}
.tile:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 26px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.60);
}
.tile:active{ transform: translateY(0) scale(.985); }

.tile.centerAccent{
  border-color: rgba(22,163,74,.30);
  background: linear-gradient(180deg, rgba(235,255,242,.88), rgba(255,255,255,.62));
  box-shadow:
    0 18px 34px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.65);
}
.tile.centerAccent:after{
  content:"";
  position:absolute;
  inset:-10px;
  pointer-events:none;
  background: radial-gradient(circle at 50% 30%, rgba(22,163,74,.16), rgba(0,0,0,0) 55%);
}

/* Clamp logo rendering (prevents giant mobile logos) */
.tile .logo{
  width:28px; height:28px;
  border-radius: 10px;
  overflow:hidden;
}
.tile .logo img{
  max-width:100%;
  max-height:100%;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

@media (max-width: 520px){
  .grid{ padding: 10px; gap: 10px; }
  .tile{ padding: 10px; }
  .tile .logo{ width:22px; height:22px; border-radius: 9px; }
}


/* v1.10.3 mobile footer + trim */
@media (max-width: 520px){
  /* Footer: give the 5 chips all the space */
  .barLeft{ display:none !important; } /* hides 5-bubble + label */
  .bottomInner{ gap:10px; }
  .foyoStrip{ gap:8px; }
  .fchip{ padding:0 10px; min-width:56px; }
  .fchip .stack{ display:none !important; } /* logo-only on mobile */
  .fchip .icon{ width:34px; height:34px; border-radius:14px; }
  .fchip.center .icon{ width:40px; height:40px; border-radius:16px; }
}

/* Footer chips: logo + ticker (no cap) */
.fchip .cap{ display:none !important; }

/* Dark green outline around the full 3x3 panel */
.grid{
  border: 2px solid rgba(10,80,40,0.45);
}


/* v1.10.4 footer circles */
@media (max-width: 520px){
  /* show left info bubble only */
  .barLeft{ display:flex !important; }
  .barLeft .t{ display:none !important; }
  .barLeft .badge{ display:none !important; }
  .barLeft .info5{
    width:44px; height:44px;
    border-radius:16px;
    border:1px solid rgba(10,80,40,0.18);
    background: rgba(255,255,255,0.92);
    display:flex; align-items:center; justify-content:center;
    font-weight:900;
    cursor:pointer;
  }

  /* chips become pure circles so all 5 + +1 fit */
  .foyoStrip{ gap:8px; }
  .fchip{
    min-width:0 !important;
    width:44px; height:44px;
    padding:0 !important;
    border:none !important;
    background: transparent !important;
    box-shadow:none !important;
    border-radius:999px !important;
  }
  .fchip.center{ width:52px; height:52px; }
  .fchip .icon{
    width:100% !important; height:100% !important;
    border-radius:999px !important;
    border:1px solid rgba(10,80,40,0.20) !important;
    background: rgba(255,255,255,0.92) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  }
  .fchip .icon img{ padding:6px; }
  .fchip.center .icon img{ padding:7px; }
}


/* v1.10.5 footer + modal accessibility + cap bar */

/* Make footer chip taps reliable */
.fchip img, .tile .logo img { pointer-events:none; }

/* Mobile footer: show info button + circles, hide label text (keeps space) */
@media (max-width: 520px){
  .barLeft .barTitle{ display:none !important; }
}

/* Modal: easier to close on mobile */
.modalContent{
  max-height: 92vh;
}
.modalHeader{
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(10,80,40,0.12);
  padding-top: env(safe-area-inset-top);
}
.modalClose{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  font-size: 22px;
}
#modalBody{
  padding-top: 8px;
}

/* Cap yardline bar */
.capBar{
  display:flex;
  gap:4px;
  margin-top:8px;
  align-items:center;
}
.capSeg{
  flex:1;
  height:8px;
  border-radius:999px;
  background: rgba(10,80,40,0.10);
  border: 1px solid rgba(10,80,40,0.10);
}
.capSeg.on{
  background: rgba(22,163,74,0.40);
  border-color: rgba(22,163,74,0.35);
}
.capBarLabel{
  font-size:11px;
  opacity:0.75;
  margin-top:6px;
}

/* v1.10.7B BOLD: tiles tap-to-cycle + info button */
.tile{position:relative;}
.tileInfoBtn{
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.80);
  font-weight:900;
  box-shadow:0 8px 16px rgba(0,0,0,.12);
}
.tileInfoBtn:active{transform:scale(.98);}
.tile{
  box-shadow:0 14px 34px rgba(0,0,0,.14);
  border:1px solid rgba(0,0,0,.12);
}
.tile .main .logo img{max-width:44px; max-height:44px;}

/* v1.10.7D: Info5 modal */
#info5Modal .info5Hero{margin-top:12px; display:flex; justify-content:center;}
#info5Modal .info5Hero img{width:100%; max-width:260px; border-radius:18px; border:1px solid rgba(0,0,0,.10); box-shadow:0 12px 26px rgba(0,0,0,.12);}
#info5Modal.open{display:flex;}
/* Ensure close button is always reachable on mobile */
@media (max-width:520px){
  .modal{margin-top:16px;}
  .modalHeader{padding-top:18px;}
}

/* v1.10.7E: Tile redesign */
.tile{position:relative; padding:14px 14px 12px; }
.tile .tag{display:none !important;}
.tileBody{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.tileLogo{width:60px; height:60px; border-radius:18px; background:rgba(255,255,255,.70); border:1px solid rgba(0,0,0,.10); display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 10px 20px rgba(0,0,0,.10);}
.tileLogo img{max-width:100%; max-height:100%;}
.tileText{min-width:0; flex:1;}
.tileTicker{font-weight:950; letter-spacing:.06em; font-size:18px; line-height:1.05;}
.tileCompany{font-size:12px; opacity:.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; margin-top:4px;}
.tileFooterRow{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:10px;}
.tileTier{font-size:11px; font-weight:850; opacity:.80; white-space:nowrap;}
.tileOptions{font-size:11px; opacity:.55; white-space:nowrap;}
.tileCycle{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.82);
  box-shadow:0 8px 16px rgba(0,0,0,.12);
  font-weight:900;
}
@media (max-width:520px){
  .tileLogo{width:54px; height:54px;}
  .tileCompany{max-width:120px;}
}

/* v1.10.7F cap + face totals */
.tileFooterRow{gap:8px;}
.tileNex{font-size:10px; font-weight:850; opacity:.70; white-space:nowrap;}
.tileNexDown{opacity:.65;}
.tileNexUp{opacity:.80;}
.tileCap{font-size:11px; font-weight:950; letter-spacing:.02em; opacity:.92; white-space:nowrap;}
.faceTotals{margin-top:12px; font-size:12px; opacity:.75; text-align:center;}

/* v1.10.7G: logo fallback 4 chars */
.tileLogoFallback{font-size:12px; letter-spacing:.06em;}

/* Logo fallback (ticker text when logo is missing/blocked) */
.logoFallback{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-weight:800;
  font-size:11px;
  letter-spacing:-0.3px;
  color:#0b3a2b;
}
.logoBubble .logoFallback{ font-size:10px; }
@media (max-width: 520px){
  .logoFallback{ font-size:10px; }
  .logoBubble .logoFallback{ font-size:9px; }
}

/* v1.10.7G2: footer lock + clean */
.footerRow{display:flex; align-items:center; gap:10px;}
.myFiveStrip{display:flex; align-items:center; gap:10px; flex:1; justify-content:space-between;}
.fchip{flex:1; min-width:0; padding:0; border:none; background:transparent;}
.fchipLogo{width:44px; height:44px; border-radius:999px; background:rgba(255,255,255,.65); border:1px solid rgba(0,0,0,.10); display:flex; align-items:center; justify-content:center; overflow:hidden; margin:0 auto; box-shadow:0 10px 18px rgba(0,0,0,.10);}
.fchipLogo img{max-width:100%; max-height:100%;}
.fchipLogo .logoFallback{font-size:11px; letter-spacing:.06em; font-weight:900; opacity:.8;}
.info5Bubble{width:40px; height:40px; border-radius:999px; border:1px solid rgba(0,0,0,.14); background:rgba(255,255,255,.82); font-weight:950;}

/* Investor ID badge button (replaces the old “5” bubble) */
.investorBadgeBtn{
  width:48px;
  height:48px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.investorBadgeImg{
  width:48px;
  height:48px;
  object-fit:contain;
  display:block;
}
.fplus{width:44px; height:44px; border-radius:999px; border:1px solid rgba(0,0,0,.14); background:rgba(34,197,94,.18); font-weight:950;}
@media (max-width:520px){
  .fchipLogo{width:40px; height:40px;}
}


/* Investor ID badge inside the Info5 button */
.info5Badge{
  width: 34px;
  height: 34px;
  display:block;
}

/* Mobile portrait: prevent ticker text spilling across tiles */
@media (max-width: 520px) and (orientation: portrait){
  .tileTicker{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    letter-spacing: .04em;
    font-size: 16px;
  }
  .tileCompany{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .grid{
    gap: 10px;
  }
}

/* Powerball-style Investor ID strip inside modal */
.pbBall{
  width:44px;
  height:44px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  letter-spacing:.04em;
  font-size:12px;
  color:rgba(5,40,18,.95);
}
.pbBallMid{background:rgba(34,197,94,.18);}
.pbBallBig{
  width:54px;
  height:54px;
  border-radius:999px;
  background:rgba(16,110,54,.92);
  border:1px solid rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  letter-spacing:.04em;
  font-size:12px;
  color:#fff;
}