/* 💛 หุ้นในดวงใจ board on watchlist.html — see assets/fav-board.js */

.fb{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;align-items:center;margin:8px 0 30px}

.fb h2{display:flex;align-items:center;gap:12px;margin:0 0 8px;font:700 clamp(1.7rem,3vw,2.3rem)/1.15 'AK Thai','Google Sans','Sarabun',sans-serif;color:var(--wp-ink,#eef2f8)}

.fb-px{display:inline-grid;width:52px;height:52px;flex:none}

.fb-px svg{width:100%;height:100%;filter:drop-shadow(0 3px 0 rgba(0,0,0,.3));animation:fbbeat 1.6s steps(1) infinite;transform-origin:50% 60%}

@keyframes fbbeat{0%,60%,100%{transform:scale(1)}66%{transform:scale(1.15)}74%{transform:scale(.95)}82%{transform:scale(1.1)}}

.fb-copy>p{margin:0;font-size:1rem;line-height:1.65;color:var(--wp-ink2,#c9d2e3)}

.fb-stats{display:flex;flex-wrap:wrap;gap:8px 24px;margin:16px 0}

.fb-stats span{display:grid;gap:6px}

.fb-stats b{font:800 1.45rem/1.1 'AK Thai','Google Sans','Outfit','Plus Jakarta Sans','Sarabun',sans-serif;font-variant-numeric:tabular-nums;color:#E5C586;text-shadow:0 0 14px rgba(229,197,134,.35)}

.fb-stats small{font-size:.84rem;color:var(--wp-ink3,#9fabbf)}

.fb-cta{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;height:40px;padding:0 18px;white-space:nowrap;border:0;border-radius:999px;color:#3a0d1a;font:600 .98rem 'AK Thai','Google Sans','Sarabun',sans-serif;cursor:pointer;box-shadow:0 5px 0 #a8324f,0 12px 26px rgba(255,92,138,.25)}

.fb-cta:active{translate:0 4px;box-shadow:0 1px 0 #a8324f}

/* Web Standard v2 button floor (2026-10-24): slim ≤40px, moves at rest (glint) and on hover (lift); pink = the heart board it opens */

.fb-cta{font-family:var(--aku-font-body);transition:translate 200ms cubic-bezier(.16,1,.3,1),filter 200ms}

.fb-cta{background-image:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%),linear-gradient(180deg,#ffd1dc,#ff8fa6 55%,#e0567a);background-size:250% 100%,100% 100%;background-repeat:no-repeat;animation:fbCtaGlint 5s cubic-bezier(.45,0,.2,1) infinite}
@keyframes fbCtaGlint{0%,58%{background-position:160% 0,0 0}88%,100%{background-position:-60% 0,0 0}}
.fb-cta:hover{translate:0 -2px;filter:saturate(1.08) brightness(1.04)}

@media (prefers-reduced-motion:reduce){.fb-cta{animation:none;transition:none}}

html[data-motion=paused] .fb-cta{animation-play-state:paused}

.fb-legend{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 8px}

.fb-legend button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(8,16,32,.5);color:var(--wp-ink2,#c9d2e3);font:500 .84rem 'AK Thai','Google Sans','Sarabun',sans-serif;cursor:pointer}

.fb-legend button i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}

.fb-legend button b{font:700 .78rem 'JetBrains Mono',monospace;color:var(--wp-ink3,#9fabbf)}

.fb-legend button[aria-pressed=true]{border-color:var(--c);color:var(--wp-ink,#eef2f8);background:color-mix(in srgb,var(--c) 22%,transparent)}

.fb-note{margin:6px 0 0;font-size:.84rem;color:var(--wp-ink3,#9fabbf)}

.fb-field{position:relative;height:440px;border-radius:28px;overflow:hidden;touch-action:none;

  background:radial-gradient(60% 55% at 50% 45%,rgba(255,143,166,.12),transparent 70%),radial-gradient(40% 40% at 80% 80%,rgba(229,197,134,.1),transparent 70%),linear-gradient(160deg,rgba(32,56,104,.55),rgba(10,18,38,.7));

  border:1px solid rgba(229,197,134,.22);box-shadow:inset 0 0 60px rgba(0,0,0,.35),0 20px 50px rgba(0,0,0,.3)}

.fb-empty{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;color:var(--wp-ink2,#c9d2e3)}

.fb-bub{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;border:0;border-radius:50%;cursor:grab;color:#fff;will-change:transform;

  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),color-mix(in srgb,var(--c) 85%,#fff) 18%,var(--c) 55%,color-mix(in srgb,var(--c) 55%,#0b1226) 100%);

  box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 70%,#fff),0 10px 26px rgba(0,0,0,.35),0 0 28px color-mix(in srgb,var(--c) 45%,transparent);transition:opacity .25s,filter .25s}

.fb-bub:active{cursor:grabbing}

.fb-bub:hover,.fb-bub:focus-visible{filter:brightness(1.12);z-index:3}

.fb-bub:focus-visible{outline:3px solid #fff;outline-offset:3px}

.fb-bub.dim{opacity:.18;filter:grayscale(.7)}

.fb-logo{position:relative;display:grid;place-items:center;width:calc(var(--r,40) * 1.2px);height:calc(var(--r,40) * 1.2px);max-width:110px;max-height:110px;min-width:26px;min-height:26px;border-radius:50%;background:#f3f5f8;border:2px solid rgba(255,255,255,.85);overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.3);pointer-events:none}

.fb-logo img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:contain;border-radius:50%;background:#f3f5f8;z-index:1}

.fb-logo em{font:700 .8rem 'AK Thai','Google Sans','Sarabun',sans-serif;font-style:normal;color:#32394a}

.fb-bub b{font:700 clamp(.72rem,calc(var(--r) * .03rem),1.05rem) 'AK Thai','Google Sans','Sarabun',sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none;line-height:1}

.fb-bub i{position:absolute;top:4%;right:4%;display:grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:7px;background:#172b43;color:#ffe2a3;font:800 .72rem 'AK Thai','Google Sans','Outfit','Plus Jakarta Sans',sans-serif;font-style:normal;box-shadow:0 0 0 2px var(--c);pointer-events:none}

/* peek — Catalogue B (blue / white / mint) modal surface (Audi 2026-10-28) */

.fb-peek {
  width: min(620px, calc(100% - 24px));
  max-height: min(86vh, 860px);
  padding: 0;
  border: 1.5px solid var(--wl-border-mint, rgba(16, 185, 129, 0.38));
  border-radius: 24px;
  background:
    linear-gradient(90deg, var(--aku-w-knowledge), var(--aku-w-focus), var(--aku-w-finance)) 0 0 / 100% 4px no-repeat,
    var(--wl-surface, linear-gradient(155deg, var(--aku-paper) 0%, var(--wl-blue, rgb(239, 246, 255)) 52%, var(--wl-mint, rgb(236, 253, 245)) 100%));
  color: var(--wl-ink, var(--aku-ink));
  box-shadow:
    inset 0 2px 0 var(--aku-paper),
    0 30px 80px rgba(4, 10, 24, 0.48);
  overflow: auto;
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  outline: none;
}

.fb-peek::backdrop {
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(5px);
}

.fb-x {
  position: sticky;
  top: 12px;
  float: right;
  margin: 12px 12px 0 0;
  min-width: 40px;
  min-height: 40px;
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.28));
  border-bottom: 2.5px solid rgba(37, 99, 235, 0.44);
  border-radius: 12px;
  background: var(--aku-paper);
  color: var(--wl-ink, var(--aku-ink));
  font: 700 1rem/1 var(--aku-font-body);
  cursor: pointer;
  z-index: 2;
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 3px 8px -3px rgba(15, 23, 42, 0.14);
  transition: translate 140ms ease, border-color 140ms ease, background 140ms ease;
}

.fb-x:hover {
  translate: 0 -1.5px;
  border-color: var(--wl-accent-mint, rgb(5, 150, 105));
  background: var(--wl-mint, rgb(236, 253, 245));
}

.fb-x:focus-visible {
  outline: 2px solid var(--wl-accent-blue, rgb(37, 99, 235));
  outline-offset: 2px;
}

.fb-in {
  padding: 22px 24px 24px;
}

.fb-pk-hd {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 44px;
}

.fb-pk-hd .fb-logo {
  width: 56px;
  height: 56px;
  max-width: none;
  max-height: none;
  background: var(--aku-paper);
  border: 2px solid var(--wl-border, rgba(37, 99, 235, 0.28));
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.14);
}

.fb-pk-hd h3 {
  margin: 0;
  font: 800 1.55rem/1.15 var(--aku-font-head);
  color: var(--wl-ink, var(--aku-ink));
}

.fb-pk-hd p {
  margin: 2px 0 0;
  font: 500 0.9rem/1.4 var(--aku-font-body);
  color: var(--wl-ink-2, var(--aku-ink-2));
}

.fb-pk-hd .px b {
  color: var(--wl-ink, var(--aku-ink));
  font: 800 1.02rem/1.2 var(--aku-font-mono);
}

.fb-pk-hd .px i {
  font-style: normal;
  font-weight: 700;
}

.fb-pk-hd .up {
  color: rgb(4, 120, 87);
}

.fb-pk-hd .down {
  color: rgb(185, 28, 28);
}

.fb-pk-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin: 14px 0 12px;
  color: var(--wl-ink-2, var(--aku-ink-2));
  font: 600 0.86rem/1.4 var(--aku-font-body);
}

.fb-pk-score {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--wl-ink, var(--aku-ink));
  font-weight: 700;
}

.fb-sec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  font: 700 0.8rem/1.2 var(--aku-font-body);
  background: color-mix(in srgb, var(--c, rgb(37, 99, 235)) 14%, var(--aku-paper));
  border: 1.5px solid color-mix(in srgb, var(--c, rgb(37, 99, 235)) 48%, var(--aku-paper));
  color: var(--wl-ink, var(--aku-ink));
}

.fb-sec i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c, rgb(37, 99, 235));
}

.fb-pk-acts {
  margin-bottom: 10px;
}

.fb-add:not(.aku-cta) {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.36));
  background: var(--aku-paper);
  color: var(--wl-ink, var(--aku-ink));
  font: 700 0.9rem/1 var(--aku-font-body);
  cursor: pointer;
}

.fb-in .fb-in,
.fb-pk-acts .fb-in,
.fb-pk-acts > span:not(.aku-cta *) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.36);
  font: 700 0.86rem/1.2 var(--aku-font-body);
  color: rgb(4, 120, 87);
}

.fb-holders {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.fb-holders li {
  --bk-bar: rgb(37, 99, 235);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.24));
  border-left: 4px solid var(--bk-bar);
  background: linear-gradient(155deg, var(--aku-paper) 55%, var(--wl-blue, rgb(239, 246, 255)) 100%);
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 6px 16px -10px rgba(15, 23, 42, 0.12);
}

.fb-holders li.bk-core {
  --bk-bar: rgb(5, 150, 105);
  background: linear-gradient(155deg, var(--aku-paper) 55%, var(--wl-mint, rgb(236, 253, 245)) 100%);
}

.fb-holders li.bk-satellite {
  --bk-bar: rgb(37, 99, 235);
}

.fb-holders li.bk-interesting {
  --bk-bar: rgb(217, 119, 6);
}

.fb-av {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--aku-paper), var(--wl-blue, rgb(219, 234, 254)));
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.28));
  box-shadow: 0 3px 8px -4px rgba(15, 23, 42, 0.14);
  overflow: hidden;
  font-size: 1.15rem;
}

.fb-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fb-holders .nm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}

.fb-holders .nm b {
  font: 700 0.96rem/1.25 var(--aku-font-body);
  color: var(--wl-ink, var(--aku-ink));
}

.fb-holders .bk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 700 0.75rem/1.2 var(--aku-font-body);
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.1);
  color: rgb(29, 78, 216);
}

.fb-holders .bk.core {
  color: rgb(4, 120, 87);
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.36);
}

.fb-holders .bk.satellite {
  color: rgb(29, 78, 216);
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.32);
}

.fb-holders .bk.interesting {
  color: rgb(180, 83, 9);
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.38);
}

.fb-holders .you {
  font: 700 0.72rem/1.2 var(--aku-font-body);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(219, 39, 119, 0.12);
  color: rgb(190, 24, 93);
}

.fb-holders .why {
  margin: 0;
  font: 400 0.94rem/1.62 var(--aku-font-body);
  color: var(--wl-ink, var(--aku-ink));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fb-holders .why.none {
  color: var(--wl-ink-3, var(--aku-ink-2));
  font-style: italic;
}

.fb-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.28));
  border-bottom: 2.5px solid rgba(37, 99, 235, 0.42);
  background: var(--aku-paper);
  color: var(--wl-ink, var(--aku-ink));
  font: 700 0.84rem/1 var(--aku-font-body);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 3px 7px -3px rgba(15, 23, 42, 0.1);
  transition: translate 140ms ease, border-color 140ms ease, background 140ms ease;
}

.fb-vote:hover:not(.own) {
  translate: 0 -1.5px;
  border-color: rgba(219, 39, 119, 0.52);
  background: rgba(253, 242, 248, 0.92);
  color: rgb(190, 24, 93);
}

.fb-vote.on {
  border-color: rgba(219, 39, 119, 0.6);
  border-bottom-color: rgb(190, 24, 93);
  color: rgb(190, 24, 93);
  background: rgba(252, 231, 243, 0.92);
}

.fb-vote.own {
  cursor: default;
  border-style: dashed;
}

.fb-pk-note {
  margin: 14px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.06);
  border-left: 3px solid rgba(37, 99, 235, 0.38);
  font: 500 0.8rem/1.5 var(--aku-font-body);
  color: var(--wl-ink-2, var(--aku-ink-2));
}

@media (max-width:900px){.fb{grid-template-columns:1fr;gap:16px}.fb-field{height:420px}}

@media (max-width:640px){.fb-field{height:400px;border-radius:22px}.fb-px{width:44px;height:44px}.fb-stats b{font-size:.95rem}.fb-holders li{grid-template-columns:36px minmax(0,1fr);gap:10px}.fb-holders li .fb-vote{grid-column:2;justify-self:start}}

@media (prefers-reduced-motion:reduce){.fb-px svg{animation:none}.fb-bub{transition:none}}

html[data-motion=paused] .fb-px svg,body.paused .fb-px svg{animation:none}

html[data-theme=light] .fb h2{color:var(--aku-ink)}

html[data-theme=light] .fb-copy>p,html[data-theme=light] .fb-note,html[data-theme=light] .fb-stats small{color:var(--aku-ink-2)}

html[data-theme=light] .fb-stats b{color:rgb(29, 78, 216);text-shadow:none}

html[data-theme=light] .fb-field{background:radial-gradient(60% 55% at 50% 45%,rgba(255,143,166,.14),transparent 70%),linear-gradient(160deg,var(--wl-blue, rgb(239, 246, 255)),var(--wl-mint, rgb(236, 253, 245)));border-color:rgba(37, 99, 235, 0.24);box-shadow:inset 0 0 40px rgba(20,35,60,.06)}

html[data-theme=light] .fb-legend button{background:var(--aku-paper);border-color:rgba(37, 99, 235, 0.24);color:var(--aku-ink-2)}



/* below-average picks fade back, above-average ones glow (Audi 2026-10-17) */

.fb-bub.low{opacity:.55;filter:saturate(.7)}

.fb-bub.low:hover,.fb-bub.low:focus-visible{opacity:1;filter:none}

.fb-bub.top{box-shadow:0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--c) 60%,transparent),0 12px 30px rgba(0,0,0,.4),0 0 46px color-mix(in srgb,var(--c) 70%,transparent);z-index:2}

.fb-bub.top i{background:#E5C586;color:#172b43;font-size:.7rem;min-width:30px;height:30px}

.fb-bub.dim{opacity:.14}

.fb-bub b{margin-top:2px}

/* breathing room in the copy column */

.fb-copy>p{line-height:1.8}

.fb-stats{gap:12px 30px;margin:22px 0}

.fb-legend{margin:22px 0 10px;gap:8px}

.fb-note{margin-top:10px;line-height:1.6}



/* === EDITORIAL FINANCIAL TERMINAL · FAV-BOARD CLEANUP (Audi 2026-10-23 · Updated 2026-10-29 to single #z-filter .aku-ftab underline) === */

.fb-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 12px !important;
  margin: 14px 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24) !important;
}

.fb-legend button {
  position: relative;
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 36px !important;
  padding: 6px 10px 9px !important;
  font: 600 0.84rem/1.2 var(--aku-font-body) !important;
  color: #cbd5e1 !important;
  transition: color 0.15s ease, background 0.15s ease !important;
}

.fb-legend button i {
  display: inline-block !important;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, #a855f7);
  box-shadow: 0 0 6px var(--c, rgba(168, 85, 247, 0.55));
  flex-shrink: 0;
}

.fb-legend button b {
  font: 700 0.78rem 'JetBrains Mono', monospace !important;
  color: #94a3b8 !important;
  margin-left: 2px;
}

.fb-legend button:hover,
.fb-legend button[aria-pressed="true"] {
  background: radial-gradient(75% 90% at 50% 100%, color-mix(in srgb, var(--c, #a855f7) 20%, transparent), transparent 72%) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  color: #ffffff !important;
}

.fb-legend button[aria-pressed="true"] b {
  color: #fef3c7 !important;
}

html[data-theme="light"] .fb-legend {
  border-bottom-color: rgba(100, 116, 139, 0.28) !important;
}

html[data-theme="light"] .fb-legend button {
  color: #334155 !important;
}

html[data-theme="light"] .fb-legend button b {
  color: #64748b !important;
}

html[data-theme="light"] .fb-legend button:hover,
html[data-theme="light"] .fb-legend button[aria-pressed="true"] {
  background: radial-gradient(75% 90% at 50% 100%, color-mix(in srgb, var(--c, #7c3aed) 14%, transparent), transparent 72%) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .fb-legend button[aria-pressed="true"] b {
  color: #0f172a !important;
}

/* === OPENLINK ZERO-FRICTION QUICK VOTE BAR, CHIPS & CATALOGUE B PALE STAGE (Audi 2026-10-27) === */
body.ff-wl #board.fb {
  --fb-border-soft: color-mix(in srgb, var(--aku-w-knowledge) 36%, var(--aku-paper));
  --fb-border-mint: color-mix(in srgb, var(--aku-w-finance) 42%, var(--aku-paper));
  --fb-accent-mint: color-mix(in srgb, var(--aku-w-finance) 42%, var(--aku-ink));
  --fb-accent-blue: color-mix(in srgb, var(--aku-w-knowledge) 44%, var(--aku-ink));
  position: relative;
  padding: clamp(22px, 2.8vw, 32px);
  border-radius: 26px;
  border: 1.5px solid var(--fb-border-mint);
  background:
    linear-gradient(90deg, var(--aku-w-knowledge), var(--aku-w-focus), var(--aku-w-finance)) 0 0 / 100% 4px no-repeat,
    radial-gradient(ellipse at 88% 14%, color-mix(in srgb, var(--wl-mint, var(--aku-paper)) 78%, transparent), transparent 58%),
    linear-gradient(125deg, var(--wl-blue, var(--aku-paper)) 0%, var(--aku-paper) 50%, var(--wl-mint, var(--aku-paper)) 100%);
  box-shadow:
    inset 0 2px 0 var(--aku-paper),
    0 24px 48px -26px rgba(4, 10, 24, 0.52);
  color: var(--aku-ink);
}
html[data-theme="light"] body.ff-wl #board.fb {
  box-shadow:
    inset 0 2px 0 var(--aku-paper),
    0 18px 38px -24px rgba(20, 47, 73, 0.18);
}
body.ff-wl #board.fb .ff-eb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--aku-w-finance) 14%, var(--aku-paper));
  border: 1px solid var(--fb-border-mint);
  color: var(--fb-accent-mint) !important;
  font: 700 0.76rem/1.2 var(--aku-font-body) !important;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
body.ff-wl #board.fb h2 {
  color: var(--aku-ink) !important;
  font: 800 clamp(1.55rem, 2.6vw, 2.15rem)/1.2 var(--aku-font-head) !important;
  margin: 0 0 8px !important;
}
body.ff-wl #board.fb .fb-copy > p {
  color: var(--aku-ink-2) !important;
  font: 400 0.98rem/1.68 var(--aku-font-body) !important;
}
body.ff-wl #board.fb .fb-copy > p b {
  color: var(--aku-ink) !important;
  font-weight: 700;
}
body.ff-wl #board.fb .fb-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 14px;
}
@media (max-width: 680px) {
  body.ff-wl #board.fb .fb-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
body.ff-wl #board.fb .fb-stats span {
  padding: 11px 14px;
  border-radius: 14px;
  background: linear-gradient(155deg, var(--aku-paper) 45%, color-mix(in srgb, var(--wl-blue, var(--aku-day)) 72%, var(--wl-mint, var(--aku-paper))));
  border: 1.5px solid var(--fb-border-soft);
  border-bottom: 2.5px solid color-mix(in srgb, var(--aku-w-knowledge) 52%, var(--aku-paper));
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 6px 14px -10px rgba(20, 47, 73, 0.12);
  display: grid;
  gap: 3px;
}
body.ff-wl #board.fb .fb-stats b,
html[data-theme="light"] body.ff-wl #board.fb #fbStats b {
  font: 800 1.35rem/1.15 var(--aku-font-head) !important;
  font-variant-numeric: tabular-nums;
  color: var(--fb-accent-blue) !important;
  text-shadow: none !important;
}
body.ff-wl #board.fb .fb-stats small {
  font: 600 0.8rem/1.35 var(--aku-font-body) !important;
  color: var(--aku-ink-2) !important;
}

.fb-quick-vote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 12px;
}
.fb-qv-field {
  flex: 1 1 180px;
  min-width: 150px;
}
body.ff-wl .fb-qv-field input {
  width: 100%;
  min-height: 42px;
  height: 42px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 11px;
  border: 1.5px solid var(--fb-border-soft) !important;
  background: var(--aku-paper) !important;
  color: var(--aku-ink) !important;
  font: 600 0.92rem/1 var(--aku-font-body) !important;
  box-shadow: inset 0 2px 4px rgba(20, 47, 73, 0.04);
  color-scheme: light;
}
body.ff-wl .fb-qv-field input:focus-visible {
  outline: 2px solid var(--fb-accent-mint);
  border-color: var(--fb-accent-mint) !important;
}
body.ff-wl .fb-qv-field input.is-need-input {
  border-color: rgb(234, 88, 12) !important;
  background: rgb(255, 251, 235) !important;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.24) !important;
  animation: fbInputShake 360ms cubic-bezier(.36,.07,.19,.97);
}
@keyframes fbInputShake {
  0%, 100% { translate: 0 0; }
  20%, 60% { translate: -5px 0; }
  40%, 80% { translate: 5px 0; }
}
body.ff-wl .fb-qv-hint {
  margin: -4px 0 10px !important;
  padding: 6px 12px !important;
  border-left: 3.5px solid rgb(234, 88, 12) !important;
  background: rgba(254, 243, 199, 0.72) !important;
  color: rgb(154, 52, 18) !important;
  font: 700 12px/1.45 var(--aku-font-body) !important;
}
body.ff-wl .fb-qv-hint[hidden] {
  display: none !important;
}
body.ff-wl .fb-qv-field input::placeholder {
  color: var(--aku-ink-2) !important;
  opacity: 0.85;
}
body.ff-wl .fb-qv-btn:not(.aku-cta),
body.ff-wl .fb-cta:not(.aku-cta) {
  min-height: 42px !important;
  height: 42px !important;
  box-sizing: border-box;
  padding: 0 16px !important;
  border-radius: 12px !important;
  font: 700 0.88rem/1 var(--aku-font-body) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: translate 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}
body.ff-wl .fb-qv-btn:not(.aku-cta) {
  border: 1.5px solid color-mix(in srgb, var(--aku-w-finance) 52%, var(--aku-paper)) !important;
  border-bottom: 3px solid color-mix(in srgb, var(--aku-w-finance) 64%, var(--aku-ink)) !important;
  background: linear-gradient(175deg, color-mix(in srgb, var(--aku-paper) 55%, var(--wl-mint, var(--aku-paper))), color-mix(in srgb, var(--aku-w-finance) 32%, var(--wl-mint, var(--aku-paper)))) !important;
  color: var(--aku-ink) !important;
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 4px 10px -4px rgba(16, 185, 129, 0.22) !important;
}
body.ff-wl .fb-qv-btn:not(.aku-cta):hover {
  translate: 0 -2px;
  border-color: var(--fb-accent-mint) !important;
  background: linear-gradient(175deg, color-mix(in srgb, var(--aku-paper) 35%, var(--wl-mint, var(--aku-paper))), color-mix(in srgb, var(--aku-w-finance) 44%, var(--wl-mint, var(--aku-paper)))) !important;
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 6px 14px -4px rgba(16, 185, 129, 0.3) !important;
}
body.ff-wl .fb-cta.ghost:not(.aku-cta) {
  background: linear-gradient(175deg, var(--aku-paper), var(--wl-blue, var(--aku-day))) !important;
  border: 1.5px solid var(--fb-border-soft) !important;
  border-bottom: 2.5px solid color-mix(in srgb, var(--aku-w-knowledge) 52%, var(--aku-paper)) !important;
  color: var(--aku-ink) !important;
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 3px 8px -4px rgba(20, 47, 73, 0.1) !important;
}
body.ff-wl .fb-cta.ghost:not(.aku-cta):hover {
  translate: 0 -2px;
  border-color: var(--fb-accent-blue) !important;
  background: linear-gradient(175deg, var(--aku-paper), var(--wl-mint, var(--aku-day))) !important;
}

.fb-quick-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
}
body.ff-wl .fb-qc-label {
  font: 700 0.8rem/1.3 var(--aku-font-body);
  color: var(--aku-ink);
  margin-right: 2px;
}
body.ff-wl .fb-qc-chip {
  min-height: 36px;
  height: 36px;
  box-sizing: border-box;
  padding: 0 11px 0 6px;
  border-radius: 999px;
  border: 1.5px solid var(--fb-border-soft);
  border-bottom: 2.5px solid color-mix(in srgb, var(--aku-w-knowledge) 48%, var(--aku-paper));
  background: linear-gradient(175deg, var(--aku-paper), color-mix(in srgb, var(--wl-blue, var(--aku-day)) 68%, var(--aku-paper)));
  color: var(--aku-ink);
  font: 700 0.78rem/1 var(--aku-font-mono);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 3px 7px -3px rgba(20, 47, 73, 0.14);
  transition: translate 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
body.ff-wl .fb-qc-logo {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  border: 1px solid rgba(20, 47, 73, 0.16);
  box-shadow: 0 1px 3px rgba(20, 47, 73, 0.12);
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  flex: none;
}
body.ff-wl .fb-qc-logo img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}
body.ff-wl .fb-qc-logo em {
  font: 800 11px/1 var(--aku-font-mono);
  font-style: normal;
  color: var(--aku-ink);
}
body.ff-wl .fb-qc-logo:has(img) em {
  display: none !important;
}
body.ff-wl .fb-qc-cnt {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(20, 47, 73, 0.07);
  color: var(--aku-ink);
  font: 700 12px/1 var(--aku-font-mono);
}
body.ff-wl .fb-qc-chip:hover {
  translate: 0 -1.5px;
  border-color: var(--fb-accent-mint);
  background: linear-gradient(175deg, var(--aku-paper), color-mix(in srgb, var(--aku-w-finance) 20%, var(--aku-paper)));
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 5px 11px -4px rgba(16, 185, 129, 0.22);
}
body.ff-wl .fb-qc-chip.on {
  border: 1.5px solid var(--fb-accent-mint);
  border-bottom: 2.5px solid color-mix(in srgb, var(--aku-w-finance) 68%, var(--aku-ink));
  background: linear-gradient(175deg, color-mix(in srgb, var(--aku-paper) 55%, var(--wl-mint, var(--aku-paper))), color-mix(in srgb, var(--aku-w-finance) 28%, var(--wl-mint, var(--aku-paper))));
  color: var(--aku-ink);
}
body.ff-wl .fb-qc-more {
  min-height: 36px;
  height: 36px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 999px;
  border: 1.5px dashed var(--fb-border-soft);
  background: transparent;
  color: var(--aku-ink);
  font: 700 12px/1 var(--aku-font-body) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 140ms ease, background 140ms ease;
}
body.ff-wl .fb-qc-more:hover {
  border-color: var(--fb-accent-mint);
  background: rgba(16, 185, 129, 0.1);
}

body.ff-wl .fb-mode-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 12px 0 10px;
  padding: 0 0 2px;
  border-radius: 0;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.ff-wl .fb-mode-bar button {
  position: relative;
  min-height: 40px;
  height: auto;
  box-sizing: border-box;
  padding: 8px 12px 10px;
  border-radius: 10px 10px 0 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--aku-ink-2);
  font: 600 0.84rem/1.2 var(--aku-font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transform: none !important;
  translate: none !important;
  transition: color 140ms ease, background 140ms ease;
}
body.ff-wl .fb-mode-bar button:hover {
  color: var(--aku-ink);
  border: 0 !important;
  border-bottom: 0 !important;
  transform: none !important;
  translate: none !important;
  background: radial-gradient(85% 95% at 50% 100%, color-mix(in srgb, var(--g, rgb(56, 189, 248)) 16%, transparent), transparent 75%) !important;
}
body.ff-wl .fb-mode-bar button[aria-pressed="true"] {
  border: 0 !important;
  border-bottom: 0 !important;
  transform: none !important;
  translate: none !important;
  background: radial-gradient(85% 95% at 50% 100%, color-mix(in srgb, var(--g, rgb(56, 189, 248)) 24%, transparent), transparent 75%) !important;
  color: var(--aku-ink);
  font-weight: 800;
  box-shadow: none !important;
}

body.ff-wl #board.fb #fbLegend.fb-legend {
  margin: 10px 0 8px !important;
  padding: 0 0 2px !important;
  border-radius: 0;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}
body.ff-wl #board.fb #fbLegend.fb-legend button {
  border: 0 !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  color: var(--aku-ink) !important;
}
body.ff-wl #board.fb #fbLegend.fb-legend button b {
  color: var(--aku-ink-2) !important;
}
body.ff-wl #board.fb #fbLegend.fb-legend button:hover,
body.ff-wl #board.fb #fbLegend.fb-legend button[aria-pressed="true"] {
  background: radial-gradient(75% 90% at 50% 100%, color-mix(in srgb, var(--c, #a855f7) 18%, transparent), transparent 72%) !important;
  color: var(--aku-ink) !important;
  border: 0 !important;
  border-bottom: 0 !important;
}
body.ff-wl #board.fb #fbLegend.fb-legend button[aria-pressed="true"] b {
  color: var(--aku-ink) !important;
}
body.ff-wl #board.fb .fb-note {
  color: var(--aku-ink-2) !important;
  font: 500 0.84rem/1.55 var(--aku-font-body) !important;
}
body.ff-wl #board.fb .fb-field {
  border-radius: 22px;
  border: 1.5px solid color-mix(in srgb, var(--aku-w-finance) 42%, var(--aku-line));
  background:
    radial-gradient(60% 55% at 50% 45%, color-mix(in srgb, var(--aku-accent) 18%, transparent), transparent 70%),
    radial-gradient(40% 40% at 80% 80%, color-mix(in srgb, var(--aku-w-knowledge) 18%, transparent), transparent 70%),
    linear-gradient(160deg, var(--aku-sky-2), var(--aku-night)) !important;
  box-shadow:
    inset 0 0 50px rgba(4, 10, 24, 0.55),
    0 14px 32px -18px rgba(4, 10, 24, 0.45);
}
body.ff-wl #board.fb .fb-bub.low {
  opacity: 0.92 !important;
  filter: saturate(0.82);
}
body.ff-wl #board.fb .fb-logo {
  background-color: rgba(255, 255, 255, 0.22) !important;
  background-image: none !important;
  border: 0 !important;
  outline: 1.5px solid rgba(255, 255, 255, 0.26);
}
body.ff-wl #board.fb .fb-logo em {
  color: var(--aku-night) !important;
  font-weight: 800 !important;
}
body.ff-wl #board.fb .fb-logo:has(img) em {
  display: none !important;
}
body.ff-wl #board.fb .fb-sec span {
  background: transparent !important;
  border: 0 !important;
  border-left: 3px solid var(--c, var(--wl-accent-mint)) !important;
  border-radius: 0 !important;
  padding: 2px 6px 2px 8px !important;
  box-shadow: none !important;
}

/* 4-level body type scale + Zero Box-in-Box lock across watchlist.html main */
html body.ff-wl #board.fb .fb-kpi > span,
html body.ff-wl #board.fb .fb-stats > span {
  --fb-st-bar: rgb(37, 99, 235);
  --fb-st-ink: rgb(29, 78, 216);
  background: transparent !important;
  border: 0 !important;
  border-left: 4px solid var(--fb-st-bar) !important;
  border-radius: 0 !important;
  padding: 6px 10px 6px 12px !important;
  box-shadow: none !important;
}
html body.ff-wl #board.fb .fb-stats > span:nth-child(1),
html body.ff-wl #board.fb .fb-stats > span.s-watch {
  --fb-st-bar: rgb(37, 99, 235);
  --fb-st-ink: rgb(29, 78, 216);
}
html body.ff-wl #board.fb .fb-stats > span:nth-child(2),
html body.ff-wl #board.fb .fb-stats > span.s-votes {
  --fb-st-bar: rgb(234, 88, 12);
  --fb-st-ink: rgb(180, 83, 9);
}
html body.ff-wl #board.fb .fb-stats > span:nth-child(3),
html body.ff-wl #board.fb .fb-stats > span.s-notes {
  --fb-st-bar: rgb(219, 39, 119);
  --fb-st-ink: rgb(190, 24, 93);
}
html body.ff-wl #board.fb .fb-stats > span:nth-child(4),
html body.ff-wl #board.fb .fb-stats > span.s-clips {
  --fb-st-bar: rgb(5, 150, 105);
  --fb-st-ink: rgb(4, 120, 87);
}
html body.ff-wl #board.fb .fb-stats > span b,
html[data-theme="light"] body.ff-wl #board.fb #fbStats > span b {
  color: var(--fb-st-ink) !important;
}
html body.ff-wl #board.fb .fb-stats > span .fb-st-top {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
html body.ff-wl #board.fb .fb-stats > span .fb-st-px,
html body.ff-wl #board.fb .fb-stats > span .fb-st-px svg {
  display: inline-grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  flex: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body.ff-wl #board :is(.fb-qv-field input, .fb-qv-btn, .fb-cta, .fb-mode-bar button, .fb-legend button, .fb-note, .fal-item) {
  font-size: 14px !important;
}
html body.ff-wl :is(#board, #wp-kpi, #fbLegend, main) :is(#board, #fbLegend, #fbStats, #wp-kpi, .ff-eb, .fb-qc-label, .fb-qc-chip, .fb-qc-chip *, .fb-qc-more, .fb-qv-hint, .fb-qc-clip, .fb-sec span, .fb-sec span *, .wp-add label span, .fb-kpi span small, .fb-stats span small, .wp-stat-pill, .wp-stat-unit, .fb-bub i):not(div, section, nav) {
  font-size: 12px !important;
}
html body.ff-wl :is(#board, #wp-kpi, #fbLegend, main) :is(#board, #fbLegend, #fbStats, .wp-lede, .fb-sub, .fb-copy > p, .fb-copy > p *, .fb-bub b):not(section, div) {
  font-size: 16px !important;
}
html body.ff-wl :is(#board, #wp-kpi, #fbLegend, main) :is(#board, #fbLegend, #fbStats, .wp-stat b, .wp-stat b.num, .wp-stat-n, .wp-stat-n *, .fb-kpi b.num, .fb-stats b, #fbStats b, h2.wp-sec-h, .wp-tabs-head h2):not(section, div) {
  font-size: 22px !important;
}
html body.ff-wl :is(#board, #wp-kpi, #fbLegend, main) #board.fb h2 {
  font-size: 36px !important;
}
html body.ff-wl :is(#board, #wp-kpi, #fbLegend, main) :is(#board, h1.ff-title, h1.ff-title span):not(section) {
  font-size: 48px !important;
}

.fb-bub.voted {
  outline: 2.5px solid rgba(245, 158, 11, 0.9);
  outline-offset: 2px;
}
.fb-clip-vote:not(.aku-cta) {
  min-height: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(16, 185, 129, 0.46);
  border-bottom: 2.5px solid rgb(5, 150, 105);
  background: linear-gradient(175deg, var(--aku-paper), var(--wl-mint, rgb(209, 250, 229)));
  color: rgb(4, 120, 87);
  font: 700 0.86rem/1 var(--aku-font-body);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 3px 8px -3px rgba(16, 185, 129, 0.2);
}
.fb-clip-vote.on:not(.aku-cta) {
  border-color: rgba(16, 185, 129, 0.56);
  border-bottom-color: rgb(4, 120, 87);
  background: linear-gradient(175deg, var(--aku-paper), var(--wl-mint, rgb(209, 250, 229)));
  color: rgb(4, 120, 87);
}
.fb-pk-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.fb-pk-media {
  margin: 12px 0 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1.5px solid var(--wl-border-mint, rgba(16, 185, 129, 0.36));
  border-left: 4px solid rgb(5, 150, 105);
  background: linear-gradient(135deg, var(--wl-mint, rgb(236, 253, 245)) 0%, var(--aku-paper) 55%, var(--wl-blue, rgb(239, 246, 255)) 100%);
  box-shadow: inset 0 1px 0 var(--aku-paper), 0 6px 16px -10px rgba(16, 185, 129, 0.18);
  display: grid;
  gap: 10px;
}
.fb-pk-media-hd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 0.92rem/1.35 var(--aku-font-body);
  color: var(--wl-ink, var(--aku-ink));
}
.fb-pk-media-hd .ak-px {
  flex: none;
}
.fb-pk-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fb-pk-link:not(.aku-cta) {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1.5px solid var(--wl-border, rgba(37, 99, 235, 0.32));
  border-bottom: 2.5px solid rgba(37, 99, 235, 0.5);
  background: linear-gradient(175deg, var(--aku-paper), var(--wl-blue, rgb(219, 234, 254)));
  color: rgb(29, 78, 216);
  font: 700 0.84rem/1 var(--aku-font-body);
  text-decoration: none;
}
html[data-theme="light"] .fb-pk-link:not(.aku-cta),
html[data-theme="light"] .fb-clip-vote:not(.aku-cta) {
  background: var(--aku-paper);
  color: var(--aku-ink);
}

/* ==========================================================================
   ROUND 6 (2026-10-28): Canonical Theme Pair Lock on #board.fb
   - Dark Mode (html:not([data-theme="light"])): D1 · Deep Obsidian Navy
   - Light Mode (html[data-theme="light"]): L1 · Crisp Cool White & Mint-Sky
   ========================================================================== */
html:not([data-theme="light"]) body.ff-wl #board.fb {
  background: linear-gradient(145deg, rgb(7, 17, 32) 0%, rgb(9, 23, 43) 58%, rgb(8, 26, 40) 100%) !important;
  border-color: rgba(96, 165, 250, 0.36) !important;
  box-shadow: inset 0 1px 0 rgba(186, 230, 253, 0.12), 0 18px 36px -20px rgba(2, 6, 23, 0.76) !important;
  color: rgb(244, 246, 252) !important;
}
html:not([data-theme="light"]) body.ff-wl #board.fb :is(h2, #fbStats b, .fb-qc-label) {
  color: rgb(244, 246, 252) !important;
}
html:not([data-theme="light"]) body.ff-wl #board.fb :is(.fb-copy > p, .fb-note, #fbStats span) {
  color: rgb(189, 205, 226) !important;
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fb-field {
  background:
    radial-gradient(560px 280px at 22% 18%, rgba(56, 189, 248, 0.14), transparent 65%),
    radial-gradient(520px 260px at 80% 78%, rgba(16, 185, 129, 0.12), transparent 65%),
    linear-gradient(160deg, rgb(5, 12, 24) 0%, rgb(8, 20, 38) 52%, rgb(6, 22, 34) 100%) !important;
  border: 1.5px solid rgba(96, 165, 250, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(186, 230, 253, 0.1) !important;
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fb-qv-field input {
  background: rgb(6, 15, 30) !important;
  border-color: rgba(96, 165, 250, 0.42) !important;
  color: rgb(244, 246, 252) !important;
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fb-qv-field input::placeholder {
  color: rgb(148, 163, 184) !important;
}
html:not([data-theme="light"]) body.ff-wl #board.fb :is(.fb-qc-chip, .fb-qc-more) {
  background: linear-gradient(175deg, rgb(13, 31, 56), rgb(8, 21, 38)) !important;
  border-color: rgba(96, 165, 250, 0.36) !important;
  color: rgb(226, 232, 240) !important;
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fb-qc-chip.on {
  background: linear-gradient(165deg, rgb(6, 78, 59) 0%, rgb(12, 46, 68) 100%) !important;
  border-color: rgba(52, 211, 153, 0.72) !important;
  color: rgb(236, 253, 245) !important;
}
html:not([data-theme="light"]) body.ff-wl #board.fb :is(.fb-mode-bar button, .fb-legend button) {
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  box-shadow: none !important;
  transform: none !important;
  translate: none !important;
  color: rgb(203, 213, 225) !important;
}
html:not([data-theme="light"]) body.ff-wl #board.fb :is(.fb-mode-bar button[aria-pressed="true"], .fb-legend button[aria-pressed="true"]) {
  background: radial-gradient(85% 95% at 50% 100%, color-mix(in srgb, var(--g, var(--c, rgb(56, 189, 248))) 26%, transparent), transparent 75%) !important;
  border: 0 !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  box-shadow: none !important;
  transform: none !important;
  translate: none !important;
  color: rgb(255, 255, 255) !important;
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fb-qc-chip .fb-qc-cnt {
  background: rgba(6, 56, 42, 0.9) !important;
  color: rgb(167, 243, 208) !important;
}

/* ==========================================================================
   ROUND 8 (2026-10-28): #fbPeek Modal Redesign
   - Only 2 primary action buttons (.fb-clip-vote & .fb-add) — NO fat 3D button stack
   - Clean editorial list of Audi's existing content links (.fb-pk-link)
   - Community Reasons (.fb-pk-reasons-sec / .fb-holders) with Heart Likes (❤️)
     sorted by most hearts on top, in D1 (Dark) & L1 (Light) with ZERO brown/orange
   ========================================================================== */
html:not([data-theme="light"]) dialog#fbPeek.fb-peek {
  background: linear-gradient(150deg, rgb(7, 17, 32) 0%, rgb(10, 24, 45) 60%, rgb(8, 28, 42) 100%) !important;
  border: 1.5px solid rgba(96, 165, 250, 0.42) !important;
  border-top: 3px solid rgb(52, 211, 153) !important;
  color: rgb(244, 246, 252) !important;
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.85) !important;
}
html[data-theme="light"] dialog#fbPeek.fb-peek {
  background: linear-gradient(150deg, rgb(255, 255, 255) 0%, rgb(240, 249, 255) 62%, rgb(236, 253, 245) 100%) !important;
  border: 1.5px solid rgba(59, 130, 246, 0.34) !important;
  border-top: 3px solid rgb(5, 150, 105) !important;
  color: rgb(20, 47, 73) !important;
  box-shadow: 0 24px 52px -12px rgba(20, 47, 73, 0.22) !important;
}

dialog#fbPeek .fb-pk-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0 14px;
}
dialog#fbPeek :is(.fb-clip-vote, .fb-add) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font: 700 0.85rem/1 var(--aku-font-body) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 140ms ease, border-color 140ms ease, translate 140ms ease;
}
html:not([data-theme="light"]) dialog#fbPeek .fb-clip-vote {
  background: linear-gradient(165deg, rgb(6, 95, 70), rgb(5, 150, 105)) !important;
  border: 1px solid rgb(52, 211, 153) !important;
  color: rgb(240, 253, 244) !important;
}
html:not([data-theme="light"]) dialog#fbPeek .fb-clip-vote.on {
  background: rgba(16, 185, 129, 0.18) !important;
  border: 1px solid rgba(52, 211, 153, 0.65) !important;
  color: rgb(167, 243, 208) !important;
}
html:not([data-theme="light"]) dialog#fbPeek .fb-add {
  background: rgba(15, 36, 68, 0.9) !important;
  border: 1px solid rgba(96, 165, 250, 0.48) !important;
  color: rgb(186, 230, 253) !important;
}
html[data-theme="light"] dialog#fbPeek .fb-clip-vote {
  background: rgb(5, 150, 105) !important;
  border: 1px solid rgb(4, 120, 87) !important;
  color: rgb(255, 255, 255) !important;
}
html[data-theme="light"] dialog#fbPeek .fb-clip-vote.on {
  background: rgb(209, 250, 229) !important;
  border: 1px solid rgba(5, 150, 105, 0.52) !important;
  color: rgb(6, 95, 70) !important;
}
html[data-theme="light"] dialog#fbPeek .fb-add {
  background: rgb(224, 242, 254) !important;
  border: 1px solid rgba(37, 99, 235, 0.42) !important;
  color: rgb(29, 78, 216) !important;
}

/* Audi's Existing Content Links (.fb-pk-media) — Clean Editorial List, NOT fat buttons */
dialog#fbPeek .fb-pk-media {
  margin: 10px 0 14px !important;
  padding: 10px 0 10px 14px !important;
  border: 0 !important;
  border-left: 3.5px solid rgb(52, 211, 153) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  gap: 6px !important;
}
dialog#fbPeek .fb-pk-media-hd {
  font: 700 0.86rem/1.3 var(--aku-font-body) !important;
  margin-bottom: 2px;
}
html:not([data-theme="light"]) dialog#fbPeek .fb-pk-media-hd {
  color: rgb(167, 243, 208) !important;
}
html[data-theme="light"] dialog#fbPeek .fb-pk-media-hd {
  color: rgb(6, 95, 70) !important;
}
dialog#fbPeek .fb-pk-links {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
}
dialog#fbPeek .fb-pk-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 32px !important;
  padding: 5px 8px !important;
  border: 0 !important;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.24) !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 600 0.84rem/1.35 var(--aku-font-body) !important;
  text-decoration: none !important;
}
html:not([data-theme="light"]) dialog#fbPeek .fb-pk-link {
  color: rgb(226, 232, 240) !important;
}
html:not([data-theme="light"]) dialog#fbPeek .fb-pk-link:hover {
  background: rgba(56, 189, 248, 0.1) !important;
  color: rgb(125, 211, 252) !important;
}
html[data-theme="light"] dialog#fbPeek .fb-pk-link {
  color: rgb(20, 47, 73) !important;
}
html[data-theme="light"] dialog#fbPeek .fb-pk-link:hover {
  background: rgba(37, 99, 235, 0.08) !important;
  color: rgb(29, 78, 216) !important;
}
dialog#fbPeek .fb-pk-link .pk-l-go {
  font: 700 0.76rem/1 var(--aku-font-body);
  color: rgb(56, 189, 248);
  white-space: nowrap;
  flex-shrink: 0;
}
html[data-theme="light"] dialog#fbPeek .fb-pk-link .pk-l-go {
  color: rgb(37, 99, 235);
}

/* Community Reasons Section (.fb-pk-reasons-sec & ol.fb-holders) — Zero Brown/Orange, Ranked by Heart Likes */
dialog#fbPeek .fb-pk-reasons-sec {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(96, 165, 250, 0.24);
  display: grid;
  gap: 10px;
}
dialog#fbPeek .fb-pk-reasons-hd {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
dialog#fbPeek .fb-pk-reasons-hd b {
  font: 700 0.92rem/1.3 var(--aku-font-body);
}
dialog#fbPeek .fb-pk-reasons-hd small {
  font: 500 0.78rem/1.35 var(--aku-font-body);
  opacity: 0.82;
}
dialog#fbPeek .fb-pk-why-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
dialog#fbPeek .fb-pk-why-form input {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  font: 500 0.84rem/1.2 var(--aku-font-body);
}
html:not([data-theme="light"]) dialog#fbPeek .fb-pk-why-form input {
  background: rgba(6, 15, 30, 0.9);
  border: 1px solid rgba(96, 165, 250, 0.36);
  color: rgb(244, 246, 252);
}
html[data-theme="light"] dialog#fbPeek .fb-pk-why-form input {
  background: rgb(255, 255, 255);
  border: 1px solid rgba(59, 130, 246, 0.32);
  color: rgb(20, 47, 73);
}
dialog#fbPeek .fb-pk-why-form button {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid rgba(52, 211, 153, 0.5);
  background: rgba(16, 185, 129, 0.16);
  color: rgb(52, 211, 153);
  font: 700 0.8rem/1 var(--aku-font-body);
  cursor: pointer;
  white-space: nowrap;
}
html[data-theme="light"] dialog#fbPeek .fb-pk-why-form button {
  background: rgb(209, 250, 229);
  border-color: rgba(5, 150, 105, 0.45);
  color: rgb(6, 95, 70);
}

dialog#fbPeek .fb-holders li,
dialog#fbPeek .fb-holders li.bk-core,
dialog#fbPeek .fb-holders li.bk-satellite,
dialog#fbPeek .fb-holders li.bk-interesting {
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) dialog#fbPeek .fb-holders li {
  background: rgba(11, 26, 48, 0.72) !important;
  border: 1px solid rgba(96, 165, 250, 0.26) !important;
  border-left: 3.5px solid rgb(56, 189, 248) !important;
  color: rgb(244, 246, 252) !important;
}
html:not([data-theme="light"]) dialog#fbPeek .fb-holders li.is-top-reason {
  background: rgba(6, 48, 38, 0.58) !important;
  border-color: rgba(52, 211, 153, 0.46) !important;
  border-left: 4px solid rgb(16, 185, 129) !important;
}
html[data-theme="light"] dialog#fbPeek .fb-holders li {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(59, 130, 246, 0.24) !important;
  border-left: 3.5px solid rgb(37, 99, 235) !important;
  color: rgb(20, 47, 73) !important;
}
html[data-theme="light"] dialog#fbPeek .fb-holders li.is-top-reason {
  background: linear-gradient(160deg, rgb(220, 252, 231) 0%, rgb(255, 255, 255) 90%) !important;
  border-color: rgba(5, 150, 105, 0.42) !important;
  border-left: 4px solid rgb(5, 150, 105) !important;
}

dialog#fbPeek .fb-holders .nm b {
  color: inherit !important;
  font-size: 0.86rem !important;
}
dialog#fbPeek .fb-holders .why {
  color: inherit !important;
  opacity: 0.94;
  font-size: 0.86rem !important;
  line-height: 1.48 !important;
}
dialog#fbPeek .top-heart-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font: 700 0.7rem/1.2 var(--aku-font-body);
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.48);
  color: rgb(110, 231, 183);
}
html[data-theme="light"] dialog#fbPeek .top-heart-badge {
  background: rgb(209, 250, 229);
  border-color: rgba(5, 150, 105, 0.42);
  color: rgb(6, 95, 70);
}

/* Override old brown/amber .bk.interesting with crisp Sky-Blue / Emerald-Mint */
dialog#fbPeek .fb-holders .bk,
dialog#fbPeek .fb-holders .bk.core,
dialog#fbPeek .fb-holders .bk.satellite,
dialog#fbPeek .fb-holders .bk.interesting {
  background: rgba(56, 189, 248, 0.14) !important;
  border: 1px solid rgba(56, 189, 248, 0.36) !important;
  color: rgb(125, 211, 252) !important;
  font: 600 0.72rem/1.2 var(--aku-font-body) !important;
  padding: 2px 8px !important;
}
html[data-theme="light"] dialog#fbPeek .fb-holders .bk,
html[data-theme="light"] dialog#fbPeek .fb-holders .bk.core,
html[data-theme="light"] dialog#fbPeek .fb-holders .bk.satellite,
html[data-theme="light"] dialog#fbPeek .fb-holders .bk.interesting {
  background: rgb(224, 242, 254) !important;
  border-color: rgba(37, 99, 235, 0.32) !important;
  color: rgb(29, 78, 216) !important;
}

dialog#fbPeek .fb-vote {
  min-height: 32px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font: 700 0.8rem/1 var(--aku-font-mono) !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) dialog#fbPeek .fb-vote {
  background: rgba(15, 36, 68, 0.85) !important;
  border: 1px solid rgba(96, 165, 250, 0.38) !important;
  color: rgb(226, 232, 240) !important;
}
html:not([data-theme="light"]) dialog#fbPeek .fb-vote:hover {
  border-color: rgb(244, 114, 182) !important;
  color: rgb(251, 207, 232) !important;
}
html:not([data-theme="light"]) dialog#fbPeek .fb-vote.on {
  background: rgba(157, 23, 77, 0.38) !important;
  border-color: rgb(244, 114, 182) !important;
  color: rgb(252, 231, 243) !important;
}
html[data-theme="light"] dialog#fbPeek .fb-vote {
  background: rgb(241, 245, 249) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: rgb(20, 47, 73) !important;
}
html[data-theme="light"] dialog#fbPeek .fb-vote.on {
  background: rgb(252, 231, 243) !important;
  border-color: rgba(219, 39, 119, 0.52) !important;
  color: rgb(190, 24, 93) !important;
}

/* ==========================================================================
   ROUND 13 (2026-10-28): Multi-Tier Galaxy Bubbles (.fb-bub.is-micro -> Top Voted)
   + Search & Zoom Camera (#fbSearchHud, #fbWorld, #fbZoomCard)
   ========================================================================== */
body.ff-wl #board.fb #fbField.fb-field {
  height: 480px !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="light"] body.ff-wl #board.fb #fbField.fb-field::before {
  background:
    radial-gradient(580px 280px at 22% 18%, rgba(56, 189, 248, 0.2), transparent 68%),
    radial-gradient(520px 260px at 80% 78%, rgba(16, 185, 129, 0.16), transparent 68%),
    linear-gradient(165deg, rgb(240, 249, 255) 0%, rgb(248, 250, 252) 52%, rgb(236, 253, 245) 100%) !important;
  border: 1.5px solid rgba(59, 130, 246, 0.36) !important;
  box-shadow: inset 0 1px 0 rgb(255, 255, 255), 0 14px 32px -18px rgba(15, 23, 42, 0.16) !important;
}
body.ff-wl #board.fb .fb-world {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Search & Zoom HUD at top of #fbField */
body.ff-wl #board.fb .fb-search-hud {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  z-index: 30;
  pointer-events: none;
}
body.ff-wl #board.fb .fb-search-form {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 12px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fb-search-form {
  background: rgba(7, 17, 32, 0.88);
  border: 1px solid rgba(96, 165, 250, 0.38);
  box-shadow: 0 10px 24px -10px rgba(2, 6, 23, 0.78);
}
html[data-theme="light"] body.ff-wl #board.fb .fb-search-form {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(59, 130, 246, 0.32);
  box-shadow: 0 10px 22px -12px rgba(15, 23, 42, 0.16);
}
body.ff-wl #board.fb .fb-s-ic {
  font-size: 13px !important;
  flex-shrink: 0;
}
body.ff-wl #board.fb .fb-s-inp {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font: 600 13px/1 var(--aku-font-body) !important;
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fb-s-inp {
  color: rgb(244, 246, 252) !important;
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fb-s-inp::placeholder {
  color: rgb(148, 163, 184) !important;
}
html[data-theme="light"] body.ff-wl #board.fb .fb-s-inp {
  color: rgb(15, 23, 42) !important;
}
html[data-theme="light"] body.ff-wl #board.fb .fb-s-inp::placeholder {
  color: rgb(100, 116, 139) !important;
}
body.ff-wl #board.fb .fb-s-btn,
body.ff-wl #board.fb .fb-s-reset {
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font: 700 12px/1 var(--aku-font-body) !important;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: translate 140ms ease, background 140ms ease;
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fb-s-btn {
  background: linear-gradient(165deg, rgb(6, 95, 70), rgb(5, 150, 105));
  border: 1px solid rgba(52, 211, 153, 0.65);
  color: rgb(240, 253, 244);
}
html[data-theme="light"] body.ff-wl #board.fb .fb-s-btn {
  background: rgb(5, 150, 105);
  border: 1px solid rgb(4, 120, 87);
  color: rgb(255, 255, 255);
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fb-s-reset {
  background: rgba(15, 36, 68, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.48);
  color: rgb(186, 230, 253);
}
html[data-theme="light"] body.ff-wl #board.fb .fb-s-reset {
  background: rgb(224, 242, 254);
  border: 1px solid rgba(37, 99, 235, 0.38);
  color: rgb(29, 78, 216);
}
body.ff-wl #board.fb .fb-s-reset[hidden],
body.ff-wl #board.fb .fb-s-matches[hidden],
body.ff-wl #board.fb .fb-zoom-card[hidden] {
  display: none !important;
}

/* Search Autocomplete Matches Dropdown */
body.ff-wl #board.fb .fb-s-matches {
  pointer-events: auto;
  margin-top: 6px;
  padding: 6px;
  border-radius: 14px;
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  backdrop-filter: blur(12px);
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fb-s-matches {
  background: rgba(7, 17, 32, 0.95);
  border: 1px solid rgba(96, 165, 250, 0.42);
  box-shadow: 0 16px 32px rgba(2, 6, 23, 0.85);
}
html[data-theme="light"] body.ff-wl #board.fb .fb-s-matches {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(59, 130, 246, 0.34);
  box-shadow: 0 16px 32px -10px rgba(15, 23, 42, 0.2);
}
body.ff-wl #board.fb .fb-sm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fb-sm-item {
  color: rgb(244, 246, 252);
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fb-sm-item:hover {
  background: rgba(56, 189, 248, 0.14);
}
html[data-theme="light"] body.ff-wl #board.fb .fb-sm-item {
  color: rgb(15, 23, 42);
}
html[data-theme="light"] body.ff-wl #board.fb .fb-sm-item:hover {
  background: rgba(37, 99, 235, 0.08);
}
body.ff-wl #board.fb .fb-sm-item .sm-tk {
  font: 800 13px/1 var(--aku-font-mono) !important;
}
body.ff-wl #board.fb .fb-sm-item .sm-sec {
  font: 600 12px/1 var(--aku-font-body) !important;
  opacity: 0.78;
}
body.ff-wl #board.fb .fb-sm-item .sm-cnt {
  margin-left: auto;
  font: 700 12px/1 var(--aku-font-mono) !important;
  color: rgb(52, 211, 153);
}
html[data-theme="light"] body.ff-wl #board.fb .fb-sm-item .sm-cnt {
  color: rgb(5, 150, 105);
}
body.ff-wl #board.fb .fb-sm-item .sm-go {
  font: 700 12px/1 var(--aku-font-body) !important;
  color: rgb(56, 189, 248);
}
html[data-theme="light"] body.ff-wl #board.fb .fb-sm-item .sm-go {
  color: rgb(37, 99, 235);
}

/* Micro-Orbs (.fb-bub.is-micro) — Tiny ambient background stock stars (no text/badge clutter) */
body.ff-wl #board.fb .fb-bub.is-micro {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 68%, rgb(255, 255, 255)), 0 2px 6px rgba(2, 6, 23, 0.35) !important;
  opacity: 0.84 !important;
}
body.ff-wl #board.fb .fb-bub.is-micro .fb-logo {
  width: calc(100% - 2px) !important;
  height: calc(100% - 2px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  outline: 0 !important;
  border: 0 !important;
  background: rgb(255, 255, 255) !important;
  box-shadow: none !important;
}
body.ff-wl #board.fb .fb-bub.is-micro .fb-logo img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  background: rgb(255, 255, 255) !important;
}
body.ff-wl #board.fb .fb-bub.is-micro .fb-logo em {
  display: none !important;
}
body.ff-wl #board.fb .fb-bub.is-micro:hover,
body.ff-wl #board.fb .fb-bub.is-micro:focus-visible {
  opacity: 1 !important;
  z-index: 22 !important;
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0 0 16px var(--c) !important;
}
body.ff-wl #board.fb .fb-bub.is-micro:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  translate: -50% 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(7, 17, 32, 0.94);
  border: 1px solid rgba(96, 165, 250, 0.45);
  color: rgb(244, 246, 252);
  font: 700 11px/1.2 var(--aku-font-mono);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 14px rgba(2, 6, 23, 0.65);
}

/* Mid-size (2-3 votes) & Top-voted (4+ votes) Bubbles — Unobstructed Full-Bleed Logo + Crisp White Ticker + Bottom-Rim Vote Pill */
html body.ff-wl #board.fb #fbWorld .fb-bub:not(.is-micro) {
  padding: 2px 0 11px !important;
  gap: 2px !important;
  overflow: visible !important;
}
html body.ff-wl #board.fb #fbWorld .fb-bub.voted:not(.is-micro) {
  outline: 2px solid rgba(52, 211, 153, 0.82) !important;
  outline-offset: 1px !important;
}
html body.ff-wl #board.fb #fbWorld .fb-bub:not(.is-micro) .fb-logo {
  min-width: 22px !important;
  min-height: 22px !important;
  width: calc(var(--r, 30) * 0.9px) !important;
  height: calc(var(--r, 30) * 0.9px) !important;
  background: rgb(255, 255, 255) !important;
  border: 2px solid rgba(255, 255, 255, 0.96) !important;
  outline: 0 !important;
  box-shadow: 0 3px 8px rgba(2, 6, 23, 0.38) !important;
  flex-shrink: 0 !important;
}
html body.ff-wl #board.fb #fbWorld .fb-bub:not(.is-micro) .fb-logo img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  background: rgb(255, 255, 255) !important;
}
html body.ff-wl #board.fb #fbWorld .fb-bub:not(.is-micro) b {
  font-family: var(--aku-font-mono) !important;
  font-weight: 800 !important;
  font-size: clamp(10.5px, calc(var(--r, 30) * 0.25px), 15px) !important;
  line-height: 1.05 !important;
  color: rgb(255, 255, 255) !important;
  text-shadow: 0 1px 2px rgba(2, 6, 23, 0.95), 0 0 8px rgba(2, 6, 23, 0.72) !important;
  letter-spacing: 0.02em !important;
  margin-top: 1px !important;
}
html body.ff-wl #board.fb #fbWorld .fb-bub:not(.is-micro) i,
html body.ff-wl #board.fb #fbWorld .fb-bub.top:not(.is-micro) i {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: -7px !important;
  left: 50% !important;
  translate: -50% 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  width: auto !important;
  height: 18px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: rgb(8, 19, 36) !important;
  border: 1.5px solid color-mix(in srgb, var(--c) 82%, rgb(255, 255, 255)) !important;
  color: rgb(248, 250, 252) !important;
  font-family: var(--aku-font-mono) !important;
  font-weight: 800 !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  box-shadow: 0 3px 8px rgba(2, 6, 23, 0.6) !important;
  white-space: nowrap !important;
  z-index: 4 !important;
}
html body.ff-wl #board.fb #fbWorld .fb-bub:not(.is-micro) i span {
  font-size: inherit !important;
  line-height: 1 !important;
}
html body.ff-wl #board.fb #fbWorld .fb-bub:not(.is-micro) i .fb-v-ic {
  width: 8px !important;
  height: 11px !important;
  flex-shrink: 0 !important;
  display: block !important;
}
body.ff-wl #board.fb .fzc-score,
body.ff-wl #board.fb .fzc-btn.vote {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
body.ff-wl #board.fb :is(.fzc-score, .fzc-btn.vote) .fb-v-ic {
  width: 9px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
  display: block !important;
}
html body.ff-wl #board.fb #fbWorld .fb-bub:not(.is-micro) i .fb-v-chk {
  color: rgb(167, 243, 208) !important;
  font-weight: 900 !important;
}
html body.ff-wl #board.fb #fbWorld .fb-bub.top:not(.is-micro) i {
  height: 19px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  background: linear-gradient(135deg, rgb(6, 78, 59), rgb(5, 150, 105)) !important;
  border-color: rgb(167, 243, 208) !important;
  color: rgb(255, 255, 255) !important;
}
html body.ff-wl #board.fb #fbWorld .fb-bub.voted:not(.is-micro) i {
  background: linear-gradient(135deg, rgb(4, 120, 87), rgb(16, 185, 129)) !important;
  border-color: rgb(167, 243, 208) !important;
  color: rgb(255, 255, 255) !important;
}

/* Zoom Target Highlight & Background Dimming */
body.ff-wl #board.fb .fb-bub.is-zoom-dim {
  opacity: 0.22 !important;
  filter: saturate(0.45) !important;
}
body.ff-wl #board.fb .fb-bub.is-zoom-target {
  opacity: 1 !important;
  z-index: 28 !important;
  box-shadow: 0 0 0 3px rgb(255, 255, 255), 0 0 0 7px rgba(52, 211, 153, 0.62), 0 14px 32px rgba(2, 6, 23, 0.65) !important;
}

/* Bottom Zoom Spotlight Action Card (#fbZoomCard) */
body.ff-wl #board.fb .fb-zoom-card {
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 8px 12px;
  border-radius: 14px;
  backdrop-filter: blur(12px);
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fb-zoom-card {
  background: rgba(7, 17, 32, 0.92);
  border: 1.5px solid rgba(52, 211, 153, 0.55);
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.82);
}
html[data-theme="light"] body.ff-wl #board.fb .fb-zoom-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid rgba(5, 150, 105, 0.48);
  box-shadow: 0 14px 28px -10px rgba(15, 23, 42, 0.22);
}
body.ff-wl #board.fb .fzc-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
body.ff-wl #board.fb .fzc-tk {
  font: 800 15px/1 var(--aku-font-mono) !important;
}
body.ff-wl #board.fb .fzc-sec {
  font: 600 12px/1 var(--aku-font-body) !important;
  opacity: 0.82;
}
body.ff-wl #board.fb .fzc-score {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.42);
  color: rgb(110, 231, 183);
  font: 700 12px/1.2 var(--aku-font-mono) !important;
}
html[data-theme="light"] body.ff-wl #board.fb .fzc-score {
  background: rgb(209, 250, 229);
  border-color: rgba(5, 150, 105, 0.4);
  color: rgb(6, 95, 70);
}
body.ff-wl #board.fb .fzc-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
body.ff-wl #board.fb .fzc-btn {
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  font: 700 12px/1 var(--aku-font-body) !important;
  cursor: pointer;
  white-space: nowrap;
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fzc-btn.vote {
  background: linear-gradient(165deg, rgb(6, 95, 70), rgb(5, 150, 105));
  border: 1px solid rgba(52, 211, 153, 0.65);
  color: rgb(240, 253, 244);
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fzc-btn.peek {
  background: rgba(15, 36, 68, 0.9);
  border: 1px solid rgba(96, 165, 250, 0.45);
  color: rgb(186, 230, 253);
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fzc-btn.out {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: rgb(203, 213, 225);
}
html[data-theme="light"] body.ff-wl #board.fb .fzc-btn.vote {
  background: rgb(5, 150, 105);
  border: 1px solid rgb(4, 120, 87);
  color: rgb(255, 255, 255);
}
html[data-theme="light"] body.ff-wl #board.fb .fzc-btn.peek {
  background: rgb(224, 242, 254);
  border: 1px solid rgba(37, 99, 235, 0.38);
  color: rgb(29, 78, 216);
}
html[data-theme="light"] body.ff-wl #board.fb .fzc-btn.out {
  background: rgb(241, 245, 249);
  border: 1px solid rgba(100, 116, 139, 0.32);
  color: rgb(51, 65, 85);
}

/* ==========================================================================
   ROUND 15 (2026-10-28): Stage Column Wrapper (.fb-stage-col) &
   Symbol Legend Strip Under Galaxy Stage (#fbArenaLegend.fb-arena-legend)
   ========================================================================== */
body.ff-wl #board.fb .fb-stage-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
body.ff-wl #board.fb .fb-arena-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  padding: 10px 14px;
  border-radius: 16px;
}
@media (max-width: 640px) {
  body.ff-wl #board.fb .fb-arena-legend {
    grid-template-columns: 1fr;
  }
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fb-arena-legend {
  background: rgba(6, 15, 29, 0.78);
  border: 1px solid rgba(96, 165, 250, 0.28);
}
html[data-theme="light"] body.ff-wl #board.fb .fb-arena-legend {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(59, 130, 246, 0.26);
}
body.ff-wl #board.fb .fal-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font: 500 12px/1.35 var(--aku-font-body) !important;
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fal-item {
  color: rgb(203, 213, 225);
}
html:not([data-theme="light"]) body.ff-wl #board.fb .fal-item b {
  color: rgb(244, 246, 252);
  font-weight: 700;
}
html[data-theme="light"] body.ff-wl #board.fb .fal-item {
  color: rgb(51, 65, 85);
}
html[data-theme="light"] body.ff-wl #board.fb .fal-item b {
  color: rgb(15, 23, 42);
  font-weight: 700;
}
body.ff-wl #board.fb .fal-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font: 800 11px/1 var(--aku-font-mono) !important;
  font-style: normal;
  flex-shrink: 0;
}
body.ff-wl #board.fb .fal-pill.is-fire {
  background: rgb(8, 19, 36);
  border: 1.5px solid rgba(251, 146, 60, 0.75);
  color: rgb(248, 250, 252);
}
body.ff-wl #board.fb .fal-pill.is-fire .fb-v-ic {
  width: 8px;
  height: 11px;
  display: block;
}
body.ff-wl #board.fb .fal-pill.is-voted {
  background: linear-gradient(135deg, rgb(4, 120, 87), rgb(16, 185, 129));
  border: 1.5px solid rgb(167, 243, 208);
  color: rgb(255, 255, 255);
}
body.ff-wl #board.fb .fal-pill.is-voted .fb-v-chk {
  color: rgb(209, 250, 229);
  font-weight: 900;
}
body.ff-wl #board.fb .fal-orb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgb(255, 255, 255) 0%, rgb(226, 232, 240) 62%, rgb(56, 189, 248) 100%);
  border: 1.5px solid rgb(56, 189, 248);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.48);
  flex-shrink: 0;
}
body.ff-wl #board.fb .fal-dots {
  width: 24px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(56, 189, 248) 0 33%, rgb(16, 185, 129) 33% 66%, rgb(168, 85, 247) 66% 100%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}






/* ==========================================================================
   ROUND 16 (2026-10-28): Borderless Galaxy Stage (no rectangle frame) +
   Gold "Next-Up" Ring on the bubble Audi will film next (.fb-bub.is-next-up)
   Audi: "ขอบมันยังเป็นสี่เหลี่ยมอยู่เลยป่ะ" / "คิวถัดไป fico ดูไม่ค่อยเด่นเลย"
   ========================================================================== */
html body.ff-wl #board.fb #fbField.fb-field,
html:not([data-theme="light"]) body.ff-wl #board.fb #fbField.fb-field,
html[data-theme="light"] body.ff-wl #board.fb #fbField.fb-field {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Soft elliptical nebula glow — fades to nothing, so no straight edge is ever visible */
html body.ff-wl #board.fb #fbField.fb-field::before {
  content: "" !important;
  position: absolute !important;
  inset: 4% 2% 2% !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: blur(6px);
}
html:not([data-theme="light"]) body.ff-wl #board.fb #fbField.fb-field::before {
  background:
    radial-gradient(closest-side at 50% 52%, rgba(37, 99, 235, 0.30), rgba(14, 116, 144, 0.16) 58%, transparent 100%) !important;
}
html[data-theme="light"] body.ff-wl #board.fb #fbField.fb-field::before {
  background:
    radial-gradient(closest-side at 50% 52%, rgba(147, 197, 253, 0.55), rgba(167, 243, 208, 0.28) 60%, transparent 100%) !important;
}

/* Gold next-up ring — different from the emerald "you voted" state and the sector colours */
html body.ff-wl #board.fb #fbWorld .fb-bub.is-next-up:not(.is-micro) {
  box-shadow:
    0 0 0 3px rgb(255, 255, 255),
    0 0 0 7px rgb(245, 158, 11),
    0 0 0 9px rgba(253, 224, 71, 0.55),
    0 0 42px 6px rgba(245, 158, 11, 0.62) !important;
  z-index: 20 !important;
  animation: fbNextGlow 2.4s ease-in-out infinite;
}
@keyframes fbNextGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  html body.ff-wl #board.fb #fbWorld .fb-bub.is-next-up { animation: none; }
}
html body.ff-wl #board.fb #fbWorld .fb-bub .fb-next-tag {
  position: absolute;
  top: -22px;
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  font: 800 0.66rem/1.15 var(--aku-font-body);
  font-style: normal;
  background: linear-gradient(165deg, rgb(251, 191, 36), rgb(217, 119, 6));
  color: rgb(41, 23, 2);
  border: 1.5px solid rgb(255, 255, 255);
  box-shadow: 0 4px 12px -4px rgba(120, 53, 15, 0.6);
  pointer-events: none;
  z-index: 3;
}
/* Legend chip for the gold ring */
body.ff-wl #board.fb .fal-pill.is-next {
  background: linear-gradient(165deg, rgb(251, 191, 36), rgb(217, 119, 6)) !important;
  color: rgb(41, 23, 2) !important;
  border: 1.5px solid rgb(255, 255, 255) !important;
  font: 800 0.66rem/1.15 var(--aku-font-body) !important;
  font-style: normal !important;
  padding: 3px 9px !important;
  white-space: nowrap;
}


/* ==========================================================================
   ROUND 17 (2026-10-28): Refined next-up tag — dark glass pill + gold hairline
   + gold text (no loud orange gradient), single clean gold ring.
   Audi: "🎬 คิวถัดไป สีมันดูไม่ค่อยสวยยังไงๆไหม"
   ========================================================================== */
html body.ff-wl #board.fb #fbWorld .fb-bub.is-next-up:not(.is-micro) {
  box-shadow:
    0 0 0 2.5px rgb(252, 211, 77),
    0 0 0 6px rgba(252, 211, 77, 0.18),
    0 0 28px 2px rgba(251, 191, 36, 0.38) !important;
  animation: none !important;
}
html body.ff-wl #board.fb #fbWorld .fb-bub .fb-next-tag,
body.ff-wl #board.fb .fal-pill.is-next {
  background: rgba(10, 16, 32, 0.92) !important;
  color: rgb(253, 224, 138) !important;
  border: 1px solid rgba(252, 211, 77, 0.85) !important;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.7) !important;
  font: 700 0.64rem/1.15 var(--aku-font-body) !important;
  letter-spacing: 0.01em;
  padding: 3px 8px !important;
}
html[data-theme="light"] body.ff-wl #board.fb #fbWorld .fb-bub .fb-next-tag,
html[data-theme="light"] body.ff-wl #board.fb .fal-pill.is-next {
  background: rgb(255, 255, 255) !important;
  color: rgb(146, 64, 14) !important;
  border: 1px solid rgb(217, 119, 6) !important;
  box-shadow: 0 4px 10px -6px rgba(120, 53, 15, 0.45) !important;
}
html[data-theme="light"] body.ff-wl #board.fb #fbWorld .fb-bub.is-next-up:not(.is-micro) {
  box-shadow:
    0 0 0 2.5px rgb(217, 119, 6),
    0 0 0 6px rgba(245, 158, 11, 0.18),
    0 0 24px 2px rgba(245, 158, 11, 0.3) !important;
}