/* hero variants — sits alongside styles.css */

/* shared overrides */
.hero-v-mosaic .grid,
.hero-v-phone .grid,
.hero-v-feed .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; }
/* full-bleed hero: SVG sits behind on the right ~62%, text column on left ~38% */
.hero-v-concept {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 820px;
  background: var(--paper);
}
.hero-v-concept .hero-concept {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 38%;             /* leave the left 38% of the viewport entirely clean */
  border: 0;
  background: transparent;
  pointer-events: none;
  /* soft horizontal fade on the left edge so any card that drifts in dissolves cleanly */
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,0.4) 8%, #000 26%);
  mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,0.4) 8%, #000 26%);
}
.hero-v-concept .hc-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero-v-concept .hc-overlay {
  position: relative;
  z-index: 2;
  min-height: 820px;
  display: grid;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 72px;
}
.hero-v-concept .hc-text {
  width: 38%;
  min-width: 380px;
  max-width: 540px;
}
.hero-v-concept .hc-text h1 { font-size: clamp(40px, 4.4vw, 68px); }
.hero-v-concept .hc-text .sub { max-width: 44ch; }

@media (max-width: 1280px) {
  .hero-v-concept .hc-text { width: 42%; min-width: 340px; }
  .hero-v-concept .hero-concept { width: 64%; }
}
@media (max-width: 1024px) {
  .hero-v-concept .hero-concept {
    position: relative;
    width: 100%;
    height: 540px;
    mask-image: none;
    margin-top: 32px;
  }
  .hero-v-concept .hc-overlay {
    display: block;
    min-height: 0;
    padding: 32px 0 32px;
  }
  .hero-v-concept .hc-text {
    width: 100%;
    min-width: 0;
    max-width: 720px;
  }
  .hero-v-concept .hc-text h1 { font-size: clamp(40px, 7vw, 56px); }
}
@media (max-width: 640px) {
  .hero-v-concept .hero-concept {
    height: 380px;
    margin-top: 24px;
  }
  .hero-v-concept .hc-overlay { padding: 24px 0 0; }
  .hero-v-concept .hc-text h1 { font-size: clamp(32px, 9vw, 44px); }
}

@media (max-width: 1024px) {
  .hero-v-mosaic .grid,
  .hero-v-phone .grid,
  .hero-v-feed .grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────── 1. SYSTEM MOSAIC */
.hero-mosaic {
  position: relative;
  height: 620px;
}
.m-desktop {
  position: absolute;
  inset: 0 0 60px 0;
  border: 1px solid var(--ink);
  background: var(--paper);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.m-chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-mute);
}
.m-dots { display: inline-flex; gap: 5px; }
.m-dots i { width: 8px; height: 8px; background: var(--rule); border-radius: 50%; display: block; }
.m-url { flex: 1; text-align: center; letter-spacing: 0.04em; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.m-lock { font-style: normal; opacity: 0.6; }
.m-url-q { color: var(--ink-mute); opacity: 0.6; }
.m-live { display: inline-flex; align-items: center; gap: 5px; color: var(--hazard-ink); background: var(--hazard); padding: 1px 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.m-live i { width: 5px; height: 5px; background: var(--hazard-ink); border-radius: 50%; animation: pulse 1.6s ease-in-out infinite; }

/* in-app topbar */
.m-topbar { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) auto; gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--rule); background: var(--paper); font-family: var(--f-mono); font-size: 11px; }
.m-crumb { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-crumb .m-org { color: var(--ink); font-weight: 500; }
.m-crumb .m-sep { color: var(--ink-mute); }
.m-search { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--rule); background: var(--paper-2); border-radius: 4px; color: var(--ink-mute); }
.m-search-i { font-style: normal; }
.m-search-p { flex: 1; }
.m-kbd { font-size: 10px; padding: 1px 4px; border: 1px solid var(--rule); border-radius: 3px; color: var(--ink-mute); }
.m-actions { display: inline-flex; align-items: center; gap: 6px; }
.m-icon-btn { position: relative; width: 26px; height: 26px; border: 1px solid var(--rule); background: var(--paper); border-radius: 4px; font-size: 13px; color: var(--ink-2); padding: 0; display: grid; place-items: center; }
.m-icon-btn:hover { background: var(--paper-2); border-color: var(--ink-mute); }
.m-badge { position: absolute; top: -4px; right: -4px; background: var(--hazard); color: var(--hazard-ink); font-size: 9px; font-style: normal; padding: 1px 4px; border-radius: 6px; line-height: 1; font-weight: 600; }
.m-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; }

.m-dash { display: grid; grid-template-columns: 168px 1fr; flex: 1; min-height: 0; }
.m-side { border-right: 1px solid var(--rule); padding: 12px 10px; background: var(--paper-2); display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.m-side-hd { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-soft); }
.m-logo { width: 24px; height: 24px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; font-weight: 700; border-radius: 3px; flex-shrink: 0; }
.m-org-mini { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.m-org-mini b { font-family: var(--f-display); font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.m-org-mini span { font-family: var(--f-mono); font-size: 9px; color: var(--ink-mute); }
.m-add { font-family: var(--f-mono); font-size: 10.5px; padding: 5px 8px; border: 1px dashed var(--rule); background: transparent; border-radius: 3px; color: var(--ink-2); text-align: left; cursor: pointer; }
.m-add:hover { border-color: var(--ink); color: var(--ink); }
.m-side-section { font-family: var(--f-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); padding: 4px 4px 0; }
.m-nav-list { display: flex; flex-direction: column; gap: 1px; flex: 1; min-height: 0; overflow: hidden; }
.m-nav-i { font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); padding: 5px 7px; display: grid; grid-template-columns: 14px 1fr auto; gap: 6px; align-items: center; border-radius: 3px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.m-nav-i:hover { background: var(--paper); }
.m-nav-i.on { background: var(--ink); color: var(--paper); }
.m-nav-i.on .m-nav-badge { background: var(--hazard); color: var(--hazard-ink); }
.m-nav-i.warn .m-nav-ico { color: var(--hazard-ink); background: var(--hazard); border-radius: 2px; }
.m-nav-ico { font-style: normal; text-align: center; opacity: 0.85; }
.m-nav-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-nav-badge { font-size: 9px; padding: 1px 5px; border-radius: 6px; background: var(--rule); color: var(--ink-2); line-height: 1.4; font-weight: 500; }
.m-side-foot { font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-mute); padding: 8px 4px 0; border-top: 1px solid var(--rule-soft); display: inline-flex; align-items: center; gap: 6px; margin-top: auto; }
.m-status-dot { width: 6px; height: 6px; background: var(--good); border-radius: 50%; display: inline-block; box-shadow: 0 0 0 3px color-mix(in oklab, var(--good) 18%, transparent); }

.m-main { padding: 12px 14px 12px 14px; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-right: 200px; }
.m-tabs { display: flex; gap: 2px; align-items: center; border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.m-tab { font-family: var(--f-mono); font-size: 11px; padding: 4px 10px; border: 1px solid transparent; background: transparent; color: var(--ink-mute); cursor: pointer; border-radius: 3px 3px 0 0; }
.m-tab:hover { color: var(--ink); }
.m-tab.on { color: var(--ink); border-color: var(--rule); border-bottom-color: var(--paper); background: var(--paper); position: relative; top: 1px; }
.m-tab-spacer { flex: 1; }
.m-range { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-mute); padding: 3px 8px; border: 1px solid var(--rule); border-radius: 3px; }
.m-eyebrow { font-family: var(--f-mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; }
.m-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.m-stat { border: 1px solid var(--rule); padding: 8px 10px; background: var(--paper); animation: statIn 0.3s ease-out forwards; }
@keyframes statIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.m-stat .k { display: block; font-family: var(--f-mono); font-size: 10px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.m-stat .v { display: block; font-family: var(--f-display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.m-stat .v i { font-style: normal; color: var(--ink-mute); font-size: 13px; font-weight: 400; margin-left: 2px; }
.m-spark { display: block; height: 3px; margin-top: 6px; background: var(--rule); position: relative; overflow: hidden; }
.m-spark b { position: absolute; left: 0; top: 0; height: 100%; background: var(--ink); animation: sparkIn 0.8s ease-out; }
@keyframes sparkIn { from { width: 0 !important; } }

.m-feed { border: 1px solid var(--rule); background: var(--paper); }
.m-feed-hd { display: flex; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--rule); font-family: var(--f-mono); font-size: 10px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.m-feed-pulse { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); }
.m-feed-pulse i { width: 5px; height: 5px; background: var(--good); border-radius: 50%; animation: pulse 1.6s ease-in-out infinite; }
.m-feed-row {
  display: grid; grid-template-columns: 50px 90px 1fr 90px;
  gap: 8px; padding: 7px 10px;
  font-family: var(--f-mono); font-size: 11px;
  border-bottom: 1px solid var(--rule-soft);
}
.m-feed-row:last-child { border-bottom: 0; }
.m-feed-row .t { color: var(--ink-mute); }
.m-feed-row .w { color: var(--ink); font-weight: 500; }
.m-feed-row .x { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-feed-row .c { color: var(--ink-mute); text-align: right; }
.m-feed-row.fresh { background: color-mix(in oklab, var(--hazard) 25%, transparent); animation: freshFade 2.4s ease-out forwards; }
@keyframes freshFade { from { background: var(--hazard); } to { background: transparent; } }

.m-phone {
  position: absolute;
  right: -8px; bottom: -10px;
  width: 188px;
  z-index: 2;
}
.m-phone-shell {
  border: 1px solid var(--ink);
  background: var(--ink);
  border-radius: 22px;
  padding: 6px;
  box-shadow: -10px 14px 0 -1px var(--paper), -10px 14px 0 0 var(--ink);
}
.m-phone-notch { width: 50px; height: 14px; background: var(--ink); border-radius: 0 0 10px 10px; margin: 0 auto 0; position: relative; top: -1px; }
.m-phone-status { display: flex; justify-content: space-between; padding: 0 14px 4px; font-family: var(--f-mono); font-size: 9px; color: var(--paper); opacity: 0.7; }
.m-phone-body { background: var(--paper); border-radius: 16px; padding: 12px 12px 8px; }
.m-phone-top { display: flex; justify-content: space-between; align-items: center; }
.m-phone-eyebrow { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--ink-mute); }
.m-phone-pill { font-size: 8px; color: var(--good); }
.m-phone-h { font-family: var(--f-display); font-size: 22px; letter-spacing: -0.02em; font-weight: 500; margin: 2px 0 10px; }
.m-phone-qr { position: relative; aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; padding: 6px; border: 1px solid var(--ink); background: var(--paper); }
.m-phone-qr i { background: var(--ink); border-radius: 1px; }
.m-phone-qr-c { position: absolute; inset: 24% 24%; border: 2px solid var(--hazard); pointer-events: none; }
.m-phone-meta { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--f-mono); font-size: 9px; color: var(--good); }
.m-phone-btn { margin-top: 8px; padding: 8px; background: var(--ink); color: var(--paper); text-align: center; font-size: 11px; font-weight: 500; border-radius: 4px; }
.m-phone-foot { margin-top: 8px; font-family: var(--f-mono); font-size: 9px; color: var(--ink-mute); text-align: center; padding-bottom: 6px; border-bottom: 1px solid var(--rule-soft); }
.m-phone-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 6px 0 0; }
.m-phone-tabs button { background: transparent; border: 0; padding: 4px; font-size: 14px; color: var(--ink-mute); cursor: pointer; border-radius: 3px; }
.m-phone-tabs button.on { background: var(--ink); color: var(--paper); }
.m-phone-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.m-phone-li { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; background: var(--paper-2); border: 1px solid var(--rule-soft); font-family: var(--f-mono); font-size: 9.5px; }
.m-phone-li b { font-weight: 600; color: var(--ink); }
.m-phone-li span { color: var(--ink-mute); }

.m-flow {
  position: absolute;
  left: 200px; bottom: 38px;
  width: calc(100% - 400px);
  height: 1px;
  background: var(--rule);
  display: flex; align-items: center;
  z-index: 1;
}
.m-flow-l {
  position: absolute; left: 0; top: -16px;
  font-family: var(--f-mono); font-size: 10px;
  color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--paper); padding-right: 8px;
}
.m-flow-pulse {
  position: absolute; top: -3px;
  width: 6px; height: 6px; background: var(--hazard);
  border-radius: 50%;
  animation: flowPulse 2.4s linear infinite;
}
@keyframes flowPulse {
  0% { left: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.m-label {
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--f-mono); font-size: 11px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.m-label-l { color: var(--ink-mute); }
.m-label-r { color: var(--ink); animation: rowIn 0.4s ease-out; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-label-r b { color: var(--hazard-ink); background: var(--hazard); padding: 1px 5px; margin-right: 4px; }
.m-label-r em { font-style: normal; color: var(--ink-mute); margin-left: 6px; }
.m-pause { font-family: var(--f-mono); font-size: 10px; padding: 4px 8px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2); border-radius: 3px; cursor: pointer; }
.m-pause:hover { border-color: var(--ink); color: var(--ink); }
@keyframes rowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Concept hero (animated SVG diagram) ─────────────────────────── */
.hero-concept {
  position: relative;
  background: transparent;
  padding: 0;
  display: block;
  overflow: hidden;
}
.hc-svg {
  width: 100%;
  height: 100%;
  display: block;
  font-family: var(--f-mono);
}
/* Ferris-wheel rotation. The wheel turns slowly clockwise; each gondola
   counter-rotates at the exact same rate so its text stays upright. Both
   animations MUST share the same duration & linear timing or the cards
   will visibly wobble. */
.hc-svg .hc-wheel {
  animation: hcWheel 60s linear infinite;
}
.hc-svg .hc-gondola {
  animation: hcGondola 60s linear infinite;
}
@keyframes hcWheel {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes hcGondola {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hc-svg .hc-wheel,
  .hc-svg .hc-gondola,
  .hc-ring,
  .m-live i,
  .m-feed-pulse i,
  .m-stat,
  .m-spark b,
  .m-feed-row.fresh,
  .hp-qr-c,
  .hf-dot,
  .m-label-r {
    animation: none !important;
    transition: none !important;
  }
  .hc-svg circle[r="2.4"],
  .hc-svg circle[r="3"] {
    display: none;
  }
}
.hc-ring {
  animation: hcRing 2.8s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.hc-ring-2 { animation-delay: 0.9s; }
.hc-ring-3 { animation-delay: 1.8s; }
@keyframes hcRing {
  0%   { opacity: 0.5; transform: scale(0.85); }
  100% { opacity: 0;   transform: scale(1.35); }
}

@media (max-width: 1024px) {
  .hero-mosaic { height: 620px; max-width: 760px; }
  .m-feed-row { grid-template-columns: 46px 78px 1fr 70px; gap: 6px; padding: 6px 10px; font-size: 10.5px; }
}
@media (max-width: 720px) {
  .m-main { padding-right: 14px; }
  .m-phone { width: 150px; right: 12px; bottom: 60px; }
  .m-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .hero-mosaic { height: 560px; }
  .m-stats { grid-template-columns: repeat(2, 1fr); }
  .m-side, .m-topbar { display: none; }
  .m-dash { grid-template-columns: 1fr; }
  .m-phone { width: 138px; right: -4px; bottom: -6px; }
  .m-flow { display: none; }
  .m-label { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ─────────────────────────────────────────── 2. PHONE PORTRAIT */
.hero-phone-wrap {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0 0;
}
.hp-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, transparent 24px, var(--rule-soft) 24px, var(--rule-soft) 25px, transparent 25px),
    linear-gradient(90deg, transparent 24px, var(--rule-soft) 24px, var(--rule-soft) 25px, transparent 25px);
  background-size: 25px 25px;
  opacity: 0.5;
  mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 70%);
  pointer-events: none;
}
.hp-phone {
  position: relative;
  width: 280px;
  border: 1px solid var(--ink);
  background: var(--ink);
  border-radius: 32px;
  padding: 8px;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.18), 0 4px 12px -4px rgba(0,0,0,0.1);
}
.hp-notch { width: 80px; height: 22px; background: var(--ink); border-radius: 0 0 14px 14px; margin: -2px auto 0; }
.hp-status { display: flex; justify-content: space-between; padding: 4px 18px 6px; font-family: var(--f-mono); font-size: 11px; color: var(--paper); opacity: 0.75; }
.hp-screen { background: var(--paper); border-radius: 24px; padding: 22px 20px 20px; }
.hp-eyebrow { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-mute); }
.hp-h { font-family: var(--f-display); font-size: 32px; letter-spacing: -0.025em; font-weight: 500; margin: 4px 0 16px; line-height: 1; }
.hp-qr { position: relative; aspect-ratio: 1; display: grid; grid-template-columns: repeat(11, 1fr); gap: 2px; padding: 12px; border: 1px solid var(--ink); background: var(--paper); }
.hp-qr i { background: var(--ink); border-radius: 1px; }
.hp-qr-c { position: absolute; inset: 28% 28%; border: 2px solid var(--hazard); pointer-events: none; animation: hpScan 2s ease-in-out infinite; }
@keyframes hpScan { 0%,100% { box-shadow: inset 0 0 0 0 transparent; } 50% { box-shadow: inset 0 0 0 18px color-mix(in oklab, var(--hazard) 12%, transparent); } }
.hp-checks { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.hp-checks > div { display: grid; grid-template-columns: 50px 1fr; gap: 8px; align-items: center; font-family: var(--f-mono); font-size: 11px; padding: 5px 8px; background: var(--paper-2); border: 1px solid var(--rule-soft); }
.hp-checks > div::before { content: "✓"; color: var(--good); font-size: 13px; position: absolute; margin-left: -16px; }
.hp-checks > div { position: relative; padding-left: 22px; }
.hp-checks b { font-weight: 500; color: var(--ink); }
.hp-checks span { color: var(--ink-mute); }
.hp-btn { margin-top: 14px; padding: 12px; background: var(--ink); color: var(--paper); text-align: center; font-size: 14px; font-weight: 500; border-radius: 6px; }
.hp-foot { margin-top: 10px; font-family: var(--f-mono); font-size: 10px; color: var(--ink-mute); text-align: center; }

.hp-platforms {
  margin-top: 28px;
  display: flex; gap: 24px; justify-content: center;
  font-family: var(--f-mono); font-size: 12px; color: var(--ink-2);
}
.hp-platforms span { display: inline-flex; align-items: center; gap: 6px; }
.hp-platforms i { width: 6px; height: 6px; background: var(--good); border-radius: 50%; }
.hp-caption {
  margin-top: 10px;
  text-align: center;
  font-family: var(--f-mono); font-size: 12px;
  color: var(--ink-mute);
}
.hp-caption em { font-family: var(--f-serif); font-style: italic; color: var(--ink); display: block; margin-top: 4px; font-size: 13px; }

@media (max-width: 640px) {
  .hp-phone { width: 240px; }
}

/* ─────────────────────────────────────────── 3. EVENT FEED */
.hero-feed {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  display: flex; flex-direction: column;
  min-height: 480px;
}
.hf-hd {
  padding: 12px 16px;
  border-bottom: 1px solid oklch(0.32 0.01 60);
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: oklch(0.7 0.005 60);
}
.hf-hd .hf-r { color: var(--hazard); display: inline-flex; align-items: center; gap: 6px; }
.hf-dot { width: 6px; height: 6px; background: var(--hazard); border-radius: 50%; animation: pulse 1.6s ease-in-out infinite; }

.hf-body { flex: 1; padding: 6px 0; overflow: hidden; }
.hf-row {
  display: grid;
  grid-template-columns: 80px 92px 1fr 110px;
  gap: 12px;
  padding: 10px 16px;
  font-family: var(--f-mono); font-size: 12px;
  border-bottom: 1px solid oklch(0.28 0.01 60);
  align-items: center;
  animation: hfRowIn 0.4s ease-out;
}
@keyframes hfRowIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.hf-row:last-child { border-bottom: 0; }
.hf-row.new .hf-time { color: var(--hazard); }
.hf-row.new .hf-chan { background: var(--hazard); color: var(--hazard-ink); border-color: var(--hazard); }

.hf-time { color: oklch(0.7 0.005 60); }
.hf-chan {
  display: inline-block; padding: 2px 6px;
  font-size: 10px; letter-spacing: 0.06em;
  border: 1px solid oklch(0.45 0.01 60);
  color: oklch(0.78 0.005 60);
  text-align: center;
  border-radius: 2px;
}
.hf-what { color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-code { color: oklch(0.7 0.005 60); text-align: right; }

.hf-foot {
  border-top: 1px solid oklch(0.32 0.01 60);
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.hf-surfaces { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--f-mono); font-size: 11px; color: oklch(0.78 0.005 60); }
.hf-surfaces span { display: inline-flex; align-items: center; gap: 5px; }
.hf-surfaces i { width: 5px; height: 5px; background: var(--good); border-radius: 50%; }
.hf-stat { font-family: var(--f-mono); font-size: 11px; color: oklch(0.7 0.005 60); text-align: right; }
.hf-stat b { font-family: var(--f-display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--paper); display: block; margin-bottom: 2px; }

@media (max-width: 1024px) {
  .hf-row { grid-template-columns: 70px 80px 1fr 90px; }
}
@media (max-width: 640px) {
  .hf-row { grid-template-columns: 60px 1fr; gap: 8px; padding: 8px 12px; }
  .hf-row .hf-chan { display: none; }
  .hf-row .hf-code { display: none; }
}