:root {
  --kft-accent: var(--primary-orange, var(--primary-live, var(--primary-plan, var(--primary-profile, #FF5F1F))));
  --kft-accent-2: var(--secondary-blue, var(--secondary-accent, var(--secondary-live, var(--secondary-plan, var(--primary-profile, #2F80ED)))));
  --kft-surface: color-mix(in srgb, var(--bg-white) 88%, var(--bg-paper));
  --kft-surface-strong: color-mix(in srgb, var(--bg-white) 95%, var(--kft-accent) 5%);
  --kft-line: color-mix(in srgb, var(--border) 82%, var(--text-ink) 18%);
  --kft-soft-line: color-mix(in srgb, var(--border) 72%, transparent);
  --kft-muted-surface: color-mix(in srgb, var(--bg-neutral) 82%, var(--bg-white));
  --kft-card-radius: 8px;
  --kft-control-radius: 8px;
  --kft-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 10px 26px rgba(16, 24, 40, 0.08);
  --kft-shadow-2: 0 1px 2px rgba(16, 24, 40, 0.08), 0 18px 46px rgba(16, 24, 40, 0.13);
  --kft-inset: inset 0 1px 0 rgba(255, 255, 255, 0.58);
  --kft-nav-h: 68px;
  --kft-overlay-bg: rgba(160, 148, 148, 0.42);
}

html[data-theme="dark"] {
  --kft-overlay-bg: rgba(10, 12, 18, 0.58);
  --kft-surface: color-mix(in srgb, var(--bg-white) 88%, #0B0D10);
  --kft-surface-strong: color-mix(in srgb, var(--bg-white) 92%, var(--kft-accent) 8%);
  --kft-line: color-mix(in srgb, var(--border) 76%, rgba(255, 255, 255, 0.18));
  --kft-soft-line: color-mix(in srgb, var(--border) 54%, transparent);
  --kft-muted-surface: color-mix(in srgb, var(--bg-neutral) 86%, #050608);
  --kft-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.24), 0 16px 38px rgba(0, 0, 0, 0.34);
  --kft-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.28), 0 24px 62px rgba(0, 0, 0, 0.48);
  --kft-inset: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

* {
  letter-spacing: 0 !important;
}

html {
  text-rendering: geometricPrecision;
  overflow-x: hidden; /* prevent any overflow from widening the page on mobile */
}

body {
  min-height: 100vh;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-paper) 94%, #FFFFFF 6%) 0%, var(--bg-paper) 46%, color-mix(in srgb, var(--bg-paper) 92%, #DDE7EF 8%) 100%) !important;
  color: var(--text-ink);
  font-feature-settings: "tnum" 1, "cv02" 1, "cv03" 1;
}

body::before {
  background-image:
    linear-gradient(rgba(17, 24, 39, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 24, 39, 0.028) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  opacity: 0.52;
}

html[data-theme="dark"] body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-paper) 86%, #171B22 14%) 0%, var(--bg-paper) 54%, color-mix(in srgb, var(--bg-paper) 90%, #050608 10%) 100%) !important;
}

html[data-theme="dark"] body::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px) !important;
  opacity: 0.34;
}

h1,
h2,
h3 {
  font-weight: 850 !important;
  line-height: 1.06 !important;
}

h1 {
  font-size: clamp(2.45rem, 5vw, 4.95rem) !important;
  max-width: 980px;
}

h2 {
  font-size: clamp(1.7rem, 3vw, 3rem) !important;
}

p,
li {
  color: var(--text-muted);
}

strong,
b {
  color: var(--text-ink);
}

nav {
  min-height: var(--kft-nav-h);
  padding: 0 24px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--kft-accent) 92%, #111827 8%), var(--kft-accent)) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.16) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 12px 34px rgba(16, 24, 40, 0.15) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav-brand,
.nav-brand span {
  font-weight: 850 !important;
}

.nav-brand {
  gap: 10px !important;
}

.nav-brand img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 8px 18px rgba(0, 0, 0, 0.18);
}

.nav-brand picture {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}

.card-image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.nav-links {
  gap: 3px !important;
  padding: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Visual divider before sister-page pills */
.nav-links li:has(.nav-live-link),
.nav-links li:has(.nav-kftlive-link) {
  padding-left: 7px;
  margin-left: 3px;
  border-left: 1px solid rgba(255,255,255,0.18);
}

.nav-links a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 780 !important;
  color: rgba(255, 255, 255, 0.86) !important;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease, border-color 180ms ease !important;
}

.nav-links a:hover,
.nav-links a.active {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.13);
}

.nav-links a.active::after {
  display: none !important;
}

.nav-live-link,
.nav-profile-link,
.nav-planner-link,
.nav-kftlive-link,
.nav-alt-link {
  min-height: 32px;
  border-radius: 6px !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 14px rgba(0, 0, 0, 0.14);
  letter-spacing: 0.01em;
}

.theme-toggle {
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.theme-toggle-track {
  width: 50px !important;
  height: 28px !important;
  box-shadow: none !important;
}

.theme-toggle-thumb {
  width: 22px !important;
  height: 22px !important;
}

section {
  max-width: min(1240px, calc(100% - 48px)) !important;
  padding-top: calc(var(--kft-nav-h) + 42px) !important;
}

.section-content,
.section-wide {
  width: 100%;
}

.section-title {
  text-align: left !important;
  margin-bottom: 22px !important;
}

.section-title h2 {
  display: block !important;
  margin-bottom: 6px !important;
  text-shadow: none !important;
}

.section-title p {
  font-size: clamp(0.9rem, 1.2vw, 1rem) !important;
  max-width: 640px;
  margin-bottom: 14px !important;
}

.section-title::after {
  content: "";
  display: block;
  width: min(100%, 860px);
  height: 1px;
  background: linear-gradient(90deg, var(--kft-accent), var(--kft-soft-line) 38%, transparent);
}

#hero {
  min-height: 92vh !important;
  justify-content: center !important;
}

.hero-content {
  max-width: 1120px !important;
  gap: 28px !important;
}

.hero-text {
  width: 100%;
}

.hero-text p,
.lead {
  font-size: clamp(1rem, 1.35vw, 1.18rem) !important;
  line-height: 1.72 !important;
  max-width: 780px !important;
  color: color-mix(in srgb, var(--text-muted) 90%, var(--text-ink) 10%) !important;
}

.hero-tiles,
.hero-cards-grid {
  max-width: 1120px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.hero-tile,
.hero-card-link,
.feature-card,
.newsletter-card,
.origin-card,
.hero-card,
.content-card,
.live-card,
.dashboard-card,
.sidebar-card,
.compare-summary,
.below-pitch-panels .transfer-panel,
.below-pitch-panels .paths-section,
.xga-image-container,
#projections .proj-table-wrap,
.proj-table-wrap,
#kftTicker .kft-box,
.kft-box,
.kft-controls,
.modal-box,
.modal-card,
.kfts-modal-box,
.bracket-slot {
  border-radius: var(--kft-card-radius) !important;
  border: 1px solid var(--kft-line) !important;
  background: var(--kft-surface) !important;
  box-shadow: var(--kft-shadow-1), var(--kft-inset) !important;
}

.hero-tile,
.hero-card-link,
.feature-card,
.newsletter-card,
.origin-card {
  min-height: 136px;
  overflow: hidden;
  position: relative;
}

.dashboard-card {
  position: relative;
  overflow: hidden;
}

.hero-tile::before,
.hero-card-link::before,
.feature-card::before,
.newsletter-card::before,
.origin-card::before,
.dashboard-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kft-accent), var(--kft-accent-2));
  opacity: 0.88;
}

.hero-tile:hover,
.hero-card-link:hover,
.feature-card:hover,
.newsletter-card:hover,
.origin-card:hover,
.live-card:hover,
.dashboard-card:hover,
.sidebar-card:hover,
.content-card:hover,
.hero-card:hover,
.xga-image-container:hover,
#projections .proj-table-wrap:hover,
.proj-table-wrap:hover,
#kftTicker .kft-box:hover,
.kft-box:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--kft-accent) 46%, var(--kft-line)) !important;
  box-shadow: var(--kft-shadow-2), var(--kft-inset) !important;
}

.hero-tile-head,
.hero-tile-title,
.live-card-title,
.sidebar-card-title,
.dashboard-card h3,
.page-kicker,
.kft-chip,
.live-pill {
  font-weight: 850 !important;
}

.mini-icon {
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--kft-accent) 10%, var(--bg-white)) !important;
  border-color: color-mix(in srgb, var(--kft-accent) 24%, var(--border)) !important;
}

.hero-tile-cta,
.card-link,
.connect-btn,
.contact-btn,
.live-pill,
.page-kicker {
  border-radius: 7px !important;
}

.live-card-head,
.modal-head,
.compare-summary-head,
.league-pagination,
.kft-controls,
.live-card .live-card-head {
  background: linear-gradient(180deg, var(--kft-muted-surface), color-mix(in srgb, var(--kft-muted-surface) 82%, var(--bg-white))) !important;
  border-color: var(--kft-soft-line) !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

.control-btn,
.compare-btn,
.plan-btn,
.kft-btn,
.proj-btn,
.xgi-action-btn,
.xgi-page-btn,
.bracket-open-btn,
.bracket-clear-btn,
.bracket-add-btn,
.mfilter,
.mkt-page-btn,
.pdash-action-btn,
.pcard-action,
.pcard-float-btn,
.chip button,
.chip-badge,
.fixture-chip,
.gw-chip,
.xgi-gw-btn,
.xgi-pos-btn,
.brk-pos-btn,
.xgi-sort-btn,
.brk-sort-btn {
  border-radius: var(--kft-control-radius) !important;
  border: 1px solid var(--kft-line) !important;
  background: var(--kft-surface-strong) !important;
  color: var(--text-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease !important;
}

.control-btn:hover,
.compare-btn:hover,
.plan-btn:hover,
.kft-btn:hover,
.proj-btn:hover,
.xgi-action-btn:hover,
.xgi-page-btn:hover,
.bracket-open-btn:hover,
.bracket-clear-btn:hover,
.bracket-add-btn:hover,
.mfilter:hover,
.mkt-page-btn:hover,
.pdash-action-btn:hover,
.pcard-action:hover,
.pcard-float-btn:hover,
.chip button:hover,
.chip-badge:hover,
.fixture-chip:hover,
.gw-chip:hover,
.xgi-gw-btn:hover,
.xgi-pos-btn:hover,
.brk-pos-btn:hover,
.xgi-sort-btn:hover,
.brk-sort-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--kft-accent) 54%, var(--kft-line)) !important;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.control-btn.primary,
.kft-btn-primary,
.plan-btn-solve,
.plan-btn-share,
.proj-btn:not(.proj-btn-secondary),
.xgi-edit-save-btn,
.modal-actions .primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--kft-accent) 90%, #FFFFFF 10%), var(--kft-accent)) !important;
  border-color: color-mix(in srgb, var(--kft-accent) 72%, #000000 28%) !important;
  color: #FFFFFF !important;
}

input,
select,
textarea,
.proj-input,
.proj-select,
.xgi-search,
.brk-search,
.xgi-team-select,
.modal-search,
.modal-input,
.market-search,
.manager-input,
.bracket-search,
.bracket-select,
.gw-select {
  border-radius: var(--kft-control-radius) !important;
  border: 1px solid var(--kft-line) !important;
  background: color-mix(in srgb, var(--bg-white) 92%, var(--bg-paper)) !important;
  color: var(--text-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

input:focus,
select:focus,
textarea:focus,
.proj-input:focus,
.proj-select:focus,
.xgi-search:focus,
.brk-search:focus,
.xgi-team-select:focus,
.modal-search:focus,
.modal-input:focus,
.market-search:focus,
.manager-input:focus,
.bracket-search:focus,
.bracket-select:focus,
.gw-select:focus {
  outline: none !important;
  border-color: color-mix(in srgb, var(--kft-accent) 68%, var(--kft-line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kft-accent) 18%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}

table,
.proj-table,
.kft-table,
.compare-summary-table,
.projections-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

thead th,
.proj-table thead th,
.kft-table thead th,
.compare-summary-table th,
.projections-table th,
.brk-chart-head {
  background: color-mix(in srgb, var(--kft-muted-surface) 88%, var(--bg-white)) !important;
  color: color-mix(in srgb, var(--text-muted) 84%, var(--text-ink)) !important;
  font-weight: 850 !important;
  text-transform: uppercase;
  border-bottom: 1px solid var(--kft-line) !important;
}

tbody td,
.proj-table tbody td,
.kft-table tbody td,
.compare-summary-table td,
.projections-table td {
  border-bottom-color: var(--kft-soft-line) !important;
}

tbody tr:hover td,
.proj-table tbody tr:hover,
.kft-table tbody tr:hover td,
.compare-summary-table tbody tr:hover td,
.projections-table tbody tr:hover {
  background: color-mix(in srgb, var(--kft-accent) 6%, var(--bg-white)) !important;
}

#projections .proj-table thead th.sort-active {
  color: var(--kft-accent) !important;
}

#projections .proj-table thead th {
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  padding: 8px 12px !important;
}

.progress-dots {
  right: 22px !important;
  gap: 5px !important;
}

/* dot-circle carries the visual; .dot is a flex wrapper now */
.dot {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 3px 0 !important;
  gap: 8px !important;
}

.dot-circle {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--kft-surface) !important;
  border: 1px solid var(--kft-line) !important;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.14);
  flex-shrink: 0 !important;
  display: block !important;
  transition: transform 200ms ease, background 200ms ease !important;
}

.dot.active .dot-circle {
  background: var(--kft-accent) !important;
  transform: scale(1.3) !important;
}

footer {
  background: color-mix(in srgb, var(--bg-white) 90%, var(--bg-paper)) !important;
  border-top: 1px solid var(--kft-line) !important;
}

.modal-overlay,
.xgi-edit-overlay {
  background: var(--kft-overlay-bg, rgba(10, 12, 18, 0.58)) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}

html[data-theme="dark"] .modal-overlay,
html[data-theme="dark"] .xgi-edit-overlay.open {
  background: rgba(8, 10, 16, 0.88) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.modal-card,
.modal-box {
  overflow: hidden;
}

.modal-top h2,
#entryModal h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem) !important;
}

.modal-note {
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--kft-accent) 7%, var(--bg-neutral)) !important;
}

.modal-close,
.kft-gate-close {
  border-radius: 8px !important;
}

#entryModal .modal-card {
  width: min(640px, 100%) !important;
  padding: 0 !important;
}

#entryModal .modal-top,
#entryModal .entry-modal-body {
  padding: 24px 26px;
}

#entryModal .modal-top {
  margin: 0 !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-profile, var(--kft-accent)) 14%, var(--bg-white)), var(--bg-white));
  border-bottom: 1px solid var(--kft-line);
}

.entry-modal-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--primary-profile, var(--kft-accent));
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.entry-modal-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--primary-profile, var(--kft-accent));
  color: #FFFFFF;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-profile, var(--kft-accent)) 26%, transparent);
}

.entry-modal-mark::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: 9px 9px 0 -6px currentColor;
}

.entry-input-group {
  display: grid;
  gap: 8px;
  margin: 16px 0 14px;
}

.entry-input-group label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

#entryModal .modal-actions {
  padding: 0 26px 26px;
}

#entryModal #loadBtn {
  min-width: 150px;
  min-height: 44px;
}

/* Gate split-panel shell */
.kft-gate {
  background: rgba(6, 8, 14, 0.80) !important;
}
.kft-gate.is-open {
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

.kft-gate-logo-beat {
  display: none !important;
}

/* Keep the gate open animation controlled by inline CSS. */
.kft-gate-panel {
  width: min(860px, 100%) !important;
  padding: 0 !important;
  border-radius: 18px !important;
  background: var(--kft-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 32px 80px rgba(0,0,0,0.52), var(--kft-inset) !important;
  overflow: hidden !important;
  display: flex !important;
}

.kft-gate-logorow {
  margin: 0 !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid var(--kft-line);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary-orange, #FF5F1F) 12%, var(--bg-white)), var(--bg-white));
}

.kft-gate-logorow img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
}

.kft-gate-kicker {
  font-size: 12px !important;
  font-weight: 850 !important;
}

.kft-gate-status {
  margin-left: auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-neutral) 80%, var(--bg-white));
  border: 1px solid var(--kft-line);
  font-size: 11px;
  font-weight: 850;
}

.kft-gate-top {
  padding: 24px 26px 0 !important;
}

.kft-gate-title {
  font-size: clamp(2rem, 4vw, 3.35rem) !important;
  max-width: 720px;
}

.kft-gate-sub {
  max-width: 660px !important;
  font-size: 15px !important;
}

.kft-gate-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 24px 26px 0 !important;
}

.kft-gate.is-open .kft-gate-card,
.kft-gate.panel-ready .kft-gate-card {
  opacity: 1 !important;
  transform: none !important;
}

/* Compact gate card row */
.kft-gate-card {
  min-height: auto !important;
  border-radius: 9px !important;
  padding: 12px 13px !important;
  background: var(--kft-surface) !important;
  box-shadow: none !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 13px !important;
}

.kft-gate-card::before {
  position: absolute !important;
  left: 0; top: 0; bottom: 0 !important;
  width: 3px !important; height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.kft-gate-icon {
  margin: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  position: static !important;
  font-size: inherit !important;
}

.kft-gate-card-body {
  padding: 0 !important;
  flex: 1 !important;
}

.kft-gate-card h3 {
  font-size: 13.5px !important;
  font-weight: 780 !important;
  line-height: 1.2 !important;
}

.kft-gate-card p {
  font-size: 11px !important;
  line-height: 1.4 !important;
}

/* Gate footer row */
.kft-gate-foot {
  margin: 0 !important;
  padding: 12px 20px !important;
  border-top: 1px solid var(--kft-line) !important;
}

.kft-gate-continue {
  min-height: 36px;
  border-radius: 8px !important;
  background: var(--primary-orange, #FF5F1F) !important;
  color: #FFFFFF !important;
  border-color: color-mix(in srgb, var(--primary-orange, #FF5F1F) 78%, #000000) !important;
}

.kft-gate-check input {
  width: 15px;
  height: 15px;
}

/* Circular gate loader and card stack */
.kft-gate-panel { display: none !important; }
.kft-gate-brand { display: none !important; }
.kft-gate-logo-beat { display: none !important; }

.kft-gate-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
}

.kft-gate-loader-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
}

.kft-gate-loader-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 90, 26, 0.25);
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  animation: kftLoaderRing 2.6s ease-in-out infinite;
}

.kft-gate-loader-ring.r1 { width: 260px; height: 260px; animation-delay: 0s; }
.kft-gate-loader-ring.r2 { width: 310px; height: 310px; animation-delay: 0.45s; border-color: rgba(232,90,26,0.15); }
.kft-gate-loader-ring.r3 { width: 360px; height: 360px; animation-delay: 0.9s; border-color: rgba(232,90,26,0.08); }

@keyframes kftLoaderRing {
  0%, 100% { opacity: 0.12; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.035); }
}

.kft-gate-loader-circle {
  width: clamp(160px, 38vw, 210px);
  height: clamp(160px, 38vw, 210px);
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-shadow:
    0 0 0 3px rgba(232, 90, 26, 0.3),
    0 0 0 7px rgba(232, 90, 26, 0.1),
    0 24px 72px rgba(0, 0, 0, 0.58);
  background: #07090d;
}

.kft-gate-loader-circle video,
.kft-gate-loader-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kft-gate-loader-label {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin: 18px 0 0;
  user-select: none;
}

/* ── Orbital workspace selector (Phase 2) ── */
.kft-gate-orbit-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.kft-gate-orbit-wrap[aria-hidden="true"] { display: none !important; }

/* Blackout overlay — fades in between phase 1 and phase 2 */
.kft-gate-blackout {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 9990;
}

/* Dog row — matches the kiba-guide position/size (mirrored to left) */
.kft-gate-dog-row {
  position: fixed;
  left: 18px;
  top: 48vh;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 9100;
  width: 88px;
}
.kft-gate-dog-row[aria-hidden="true"] { display: none; }

.kft-gate-dog-btn {
  all: unset;
  cursor: pointer;
  display: block;
  width: 88px;
  min-height: 74px;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 10px 18px rgba(16, 24, 40, 0.32));
  transform-origin: 60% 88%;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.kft-gate-dog-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: 50% 92%;
}

.kft-gate-dog-btn:hover,
.kft-gate-dog-btn:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 12px 22px rgba(232, 90, 26, 0.45));
}

.kft-gate-dog-btn-label {
  display: none;
}

/* Kiba tooltip card */
.kft-gate-dog-tip {
  position: absolute;
  bottom: auto;
  top: 0;
  left: calc(100% + 12px);
  transform: none;
  width: min(240px, calc(100vw - 120px));
  background: linear-gradient(148deg, rgba(28, 30, 40, 0.98) 0%, rgba(16, 18, 24, 0.99) 100%);
  border: 1px solid rgba(232, 90, 26, 0.25);
  border-radius: 14px;
  padding: 14px 15px 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04);
  z-index: 10;
}

.kft-gate-dog-tip::after {
  content: '';
  position: absolute;
  top: 18px;
  left: -7px;
  transform: rotate(-45deg);
  width: 12px;
  height: 12px;
  background: rgba(20, 22, 30, 0.99);
  border-left: 1px solid rgba(232, 90, 26, 0.25);
  border-bottom: 1px solid rgba(232, 90, 26, 0.25);
}

.kft-gate-dog-tip[hidden] { display: none; }

.kft-gate-dog-tip-title {
  font-size: 13px;
  font-weight: 840;
  color: rgba(255,255,255,0.93);
  margin: 0 0 6px;
}

.kft-gate-dog-tip-body {
  font-size: 11.5px;
  color: rgba(255,255,255,0.52);
  line-height: 1.52;
  margin: 0 0 10px;
  font-weight: 600;
}

.kft-gate-dog-tip-ok {
  all: unset;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: center;
  padding: 7px 0;
  border-radius: 8px;
  background: rgba(232, 90, 26, 0.16);
  border: 1px solid rgba(232, 90, 26, 0.3);
  color: #E85A1A;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: background 0.15s ease;
}

.kft-gate-dog-tip-ok:hover { background: rgba(232, 90, 26, 0.26); }

.kft-gate-orbit {
  position: relative;
  width: clamp(280px, 72vw, 400px);
  height: clamp(280px, 72vw, 400px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kft-gate-orbit-ring {
  position: absolute;
  width: min(72vw, 370px);
  height: min(72vw, 370px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

/* Hub button */
/* Hub — large video circle, breathes with the front node's accent via --orbit-glow */
.kft-gate-orbit-hub {
  position: relative;
  z-index: 150;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #05070b;
  border: 2.5px solid color-mix(in srgb, var(--orbit-glow, #E85A1A) 38%, transparent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  animation: kftHubPulse 3s ease-in-out infinite;
  transition: border-color 0.9s ease;
  padding: 0;
}

@keyframes kftHubPulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--orbit-glow, #E85A1A) 14%, transparent),
      0 0 32px 6px color-mix(in srgb, var(--orbit-glow, #E85A1A) 20%, transparent),
      0 12px 36px rgba(0, 0, 0, 0.6);
  }
  50% {
    box-shadow:
      0 0 0 8px color-mix(in srgb, var(--orbit-glow, #E85A1A) 24%, transparent),
      0 0 56px 14px color-mix(in srgb, var(--orbit-glow, #E85A1A) 36%, transparent),
      0 12px 36px rgba(0, 0, 0, 0.6);
  }
}

.kft-gate-orbit-hub-ping,
.kft-gate-orbit-hub-ping-2 {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--orbit-glow, #E85A1A) 50%, transparent);
  animation: kftHubRing 2.6s ease-out infinite;
  pointer-events: none;
  transition: border-color 0.9s ease;
}

.kft-gate-orbit-hub-ping-2 {
  inset: -20px;
  animation-delay: 1.3s;
  border-color: color-mix(in srgb, var(--orbit-glow, #E85A1A) 24%, transparent);
}

@keyframes kftHubRing {
  0%   { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.55); }
}

.kft-gate-orbit-hub-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Orbit nodes */
.kft-gate-orbit {
  cursor: grab;
}
.kft-gate-orbit.is-dragging {
  cursor: grabbing;
}

/* Breathing glow ring — colour tracks front node via --orbit-glow */
.kft-gate-orbit::before {
  content: '';
  position: absolute;
  width: min(72vw, 370px);
  height: min(72vw, 370px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: kftOrbitBreathe 2.8s ease-in-out infinite;
  transition: box-shadow 0.9s ease;
}

@keyframes kftOrbitBreathe {
  0%, 100% { opacity: 0.22; box-shadow: 0 0 20px 5px var(--orbit-glow, #E85A1A); }
  50%       { opacity: 0.52; box-shadow: 0 0 50px 16px var(--orbit-glow, #E85A1A); }
}

/* Orbit nodes — frosted glass pill chips */
.kft-gate-onode {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  will-change: transform, opacity;
  /* pill chrome */
  padding: 8px 14px 8px 10px;
  border-radius: 99px;
  background: rgba(12, 14, 20, 0.68);
  border: 1px solid color-mix(in srgb, var(--node-accent, #E85A1A) 30%, rgba(255,255,255,0.06));
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    0 2px 12px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.06);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

/* breathing accent aura behind the pill */
.kft-gate-onode::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 99px;
  background: radial-gradient(ellipse at center, var(--node-accent, #E85A1A) 0%, transparent 68%);
  opacity: 0.08;
  animation: kftPillAura 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes kftPillAura {
  0%, 100% { opacity: 0.06; transform: scale(0.88); }
  50%       { opacity: 0.26; transform: scale(1.14); }
}

.kft-gate-onode:hover {
  background: rgba(18, 21, 30, 0.88);
  border-color: color-mix(in srgb, var(--node-accent, #E85A1A) 62%, rgba(255,255,255,0.1));
  box-shadow:
    0 4px 22px rgba(0,0,0,0.5),
    0 0 18px color-mix(in srgb, var(--node-accent, #E85A1A) 28%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.09);
}

.kft-gate-onode:hover::after {
  animation: none;
  opacity: 0.38;
  transform: scale(1.18);
}

.kft-gate-onode.is-selected {
  background: rgba(22, 24, 34, 0.94);
  border-color: color-mix(in srgb, var(--node-accent, #E85A1A) 75%, rgba(255,255,255,0.15));
  box-shadow:
    0 4px 28px rgba(0,0,0,0.55),
    0 0 32px color-mix(in srgb, var(--node-accent, #E85A1A) 38%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

.kft-gate-onode.is-selected::after {
  animation: none;
  opacity: 0.5;
  transform: scale(1.24);
}

/* Icon inside pill */
.kft-gate-onode-dot {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--node-accent, #E85A1A) 90%, #fff 10%);
}

.kft-gate-onode-dot svg {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--node-accent, #E85A1A) 55%, transparent));
}

.kft-gate-onode.is-selected .kft-gate-onode-dot svg {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--node-accent, #E85A1A) 80%, transparent));
}

/* Label inline with icon */
.kft-gate-onode-label {
  font-size: 11px;
  font-weight: 800;
  color: color-mix(in srgb, var(--node-accent, #E85A1A) 72%, rgba(255,255,255,0.65));
  text-transform: uppercase;
  letter-spacing: 0.09em;
  white-space: nowrap;
  user-select: none;
  transition: color 0.2s;
}

.kft-gate-onode.is-selected .kft-gate-onode-label {
  color: color-mix(in srgb, var(--node-accent, #E85A1A) 92%, #fff 8%);
}

/* Popup card on selected node */
.kft-gate-onode-card {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  width: clamp(180px, 50vw, 230px);
  background: linear-gradient(148deg, rgba(30, 32, 44, 0.97) 0%, rgba(18, 20, 26, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.kft-gate-onode.is-selected .kft-gate-onode-card {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}

.kft-gate-onode-card-kicker {
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--node-accent, rgba(255,255,255,0.45));
}

.kft-gate-onode-card-title {
  font-size: 15px;
  font-weight: 820;
  color: rgba(255, 255, 255, 0.93);
  margin: 0;
  line-height: 1.15;
}

.kft-gate-onode-card-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.44);
  line-height: 1.46;
  margin: 0;
}

.kft-gate-onode-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kft-gate-onode-card-status {
  font-size: 8.5px;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.3);
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.kft-gate-onode-energy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 2px;
}

.kft-gate-onode-energy-bar {
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.kft-gate-onode-energy-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--node-accent, rgba(255,255,255,0.3));
}

/* Orbit footer */
.kft-gate-orbit-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  width: min(340px, 90vw);
}

/* continue button removed — direct navigation on node tap */

.kft-gate-orbit-foot .kft-gate-check {
  color: rgba(255, 255, 255, 0.38) !important;
  font-size: 11.5px;
}

.kft-gate-orbit-foot .kft-gate-check input {
  accent-color: rgba(255, 255, 255, 0.4) !important;
  width: 14px !important;
  height: 14px !important;
}

.kft-gate-swipe-hint {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.22);
  margin: 0;
  text-align: center;
  user-select: none;
}

@media (max-width: 700px) {
  .kft-gate-loader-ring.r1 { width: 200px; height: 200px; }
  .kft-gate-loader-ring.r2 { width: 242px; height: 242px; }
  .kft-gate-loader-ring.r3 { width: 284px; height: 284px; }
  .kft-gate-orbit { width: min(88vw, 340px); height: min(88vw, 340px); }
  .kft-gate-orbit-ring { width: min(86vw, 326px); height: min(86vw, 326px); }
  .kft-gate-orbit::before { width: min(86vw, 326px); height: min(86vw, 326px); }
  .kft-gate-onode-card {
    top: auto;
    bottom: calc(100% + 8px);
    width: clamp(170px, 46vw, 220px);
    transform: translateX(-50%) scale(0.9);
  }
  .kft-gate-onode.is-selected .kft-gate-onode-card {
    transform: translateX(-50%) scale(1);
  }
  .kft-gate-orbit-hub { width: 88px; height: 88px; }
}

.pitch-section,
#plan .squad-body .pitch-section {
  border-color: var(--kft-line) !important;
}

.pcard {
  border-radius: 8px !important;
}

.pcard:hover,
.market-row:hover,
.player-row:hover,
.fixture-row:hover,
.gw-card:hover,
.league-row:hover {
  transform: translateY(-1px);
}

.market-row,
.player-row,
.fixture-row,
.gw-card,
.league-row,
.price-row,
.bonus-row,
.defcon-row,
.exposure-row {
  border-radius: 8px !important;
  border-color: var(--kft-line) !important;
}

@media (max-width: 1180px) {
  .hamburger {
    display: flex !important;
  }

  .nav-links {
    display: none !important;
    position: fixed !important;
    top: var(--kft-nav-h) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--kft-nav-h)) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 20px !important;
    border-radius: 0 !important;
    background: var(--kft-accent) !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
    overflow-y: auto !important;
    z-index: 999 !important;
  }

  .nav-links.active {
    display: flex !important;
  }

  .nav-links li {
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
    padding: 8px 0 !important;
  }

  .nav-links a {
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 44px;
    padding: 10px 12px !important;
    font-size: 15px !important;
  }

  .hero-tiles,
  .hero-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  :root {
    --kft-nav-h: 60px;
  }

  nav {
    padding: 0 14px !important;
  }

  .nav-links {
    top: var(--kft-nav-h) !important;
    padding: 18px !important;
    border-radius: 0 !important;
    background: var(--kft-accent) !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .nav-links a {
    justify-content: flex-start !important;
    width: 100%;
    min-height: 44px;
    font-size: 15px;
  }

  section {
    max-width: calc(100% - 24px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  h1 {
    font-size: clamp(2.15rem, 12vw, 3.35rem) !important;
  }

  .section-title {
    margin-bottom: 14px !important;
  }

  .hero-tiles,
  .hero-cards-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-tile,
  .hero-card-link,
  .feature-card,
  .newsletter-card,
  .origin-card {
    min-height: 132px;
  }

  .kft-gate-card {
    min-height: auto;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .kft-gate-card p {
    overflow-wrap: anywhere;
  }

  #entryModal .modal-top,
  #entryModal .entry-modal-body,
  #entryModal .modal-actions {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ── Global polish additions ── */

/* Sharper hero tile layout: 4-up on large screens */
@media (min-width: 1181px) {
  .hero-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Better footer */
footer {
  padding: 28px 32px !important;
}

footer p {
  font-size: 13px;
  line-height: 1.7;
}

/* Improved mini-icon sizing in tiles */
.mini-icon {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
}

/* Tighter hero tile CTA */
.hero-tile-cta {
  margin-top: auto !important;
  font-size: 11.5px !important;
}

/* Better primary continue button */
.kft-gate-continue {
  letter-spacing: 0.01em;
}

/* Nav brand more legible */
.nav-brand span {
  font-size: 14px !important;
}

/* Better section padding on larger screens */
@media (min-width: 1024px) {
  section {
    padding-top: calc(var(--kft-nav-h) + 52px) !important;
  }
}

/* Smoother card transitions */
.hero-tile,
.hero-card-link,
.feature-card,
.dashboard-card,
.live-card,
.sidebar-card {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background 200ms ease !important;
}

/* Hero tile focus-visible improved */
.hero-tile:focus-visible {
  outline: 2px solid var(--kft-accent) !important;
  outline-offset: 2px !important;
}

/* SEO-friendly hero explainer blocks */
.hero-explainer {
  width: min(100%, 980px);
  margin: 2px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--kft-soft-line);
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(250px, 0.82fr);
  gap: 26px;
  text-align: left;
}

.hero-explainer h2,
.hero-explainer h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.32rem) !important;
  line-height: 1.22 !important;
  margin: 0 0 8px !important;
}

.hero-explainer p {
  margin: 0 0 10px !important;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem) !important;
  line-height: 1.65 !important;
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text-ink) 12%) !important;
}

.hero-explainer-list {
  list-style: none;
  padding: 0;
  margin: 2px 0 0;
  display: grid;
  gap: 10px;
}

.hero-explainer-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.94rem;
  line-height: 1.55;
  font-weight: 650;
}

.hero-explainer-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.67em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kft-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kft-accent) 14%, transparent);
}

.hero-feature-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 13px;
  margin-top: 12px;
  font-size: 0.9rem;
}

.hero-feature-links a,
.hero-feature-links button {
  appearance: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--kft-accent) 45%, transparent);
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text-ink) !important;
  padding: 0 0 2px !important;
  font-weight: 850;
  cursor: pointer;
  box-shadow: none !important;
  text-decoration: none;
}

.hero-feature-links a:hover,
.hero-feature-links button:hover {
  color: var(--kft-accent) !important;
  transform: none !important;
  border-color: var(--kft-accent);
}

/* Kiba mascot navigation */
.progress-dots[hidden] {
  display: none !important;
}

.kiba-guide {
  --kiba-accent: var(--kft-accent);
  position: fixed;
  right: 18px;
  top: 48vh;
  width: 88px;
  z-index: 940;
  color: var(--kiba-accent);
  pointer-events: none;
  transition: left 620ms cubic-bezier(0.34, 1.28, 0.64, 1), top 620ms cubic-bezier(0.34, 1.28, 0.64, 1), transform 220ms ease;
}

.kiba-dog-button {
  all: unset;
  box-sizing: border-box;
  display: block;
  pointer-events: auto;
  position: relative;
  width: 88px;
  min-width: 88px;
  min-height: 74px;
  color: inherit;
  cursor: pointer;
  filter: drop-shadow(0 10px 18px rgba(16, 24, 40, 0.24));
  transform-origin: 60% 88%;
}

.kiba-dog-button:hover,
.kiba-guide.menu-open .kiba-dog-button {
  transform: translateY(-2px);
}

.kiba-dog-button:focus-visible {
  outline: 2px solid var(--kiba-accent);
  outline-offset: 3px;
  border-radius: 14px;
}

.kiba-dog-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: 50% 92%;
  will-change: transform;
}

.kiba-dog-shadow ellipse {
  fill: rgba(16, 24, 40, 0.18);
}

.kiba-dog-body,
.kiba-dog-head {
  transform-origin: 78px 92px;
  transform-box: fill-box;
}

.kiba-dog-tail {
  transform-origin: 119px 86px;
  transform-box: fill-box;
}

.kiba-eye,
.kiba-mouth,
.kiba-tongue {
  transform-box: fill-box;
  transform-origin: center;
}

.kiba-zzz {
  font: 900 17px/1 system-ui, -apple-system, Segoe UI, sans-serif;
  opacity: 0;
}

.kiba-feature-menu {
  box-sizing: border-box;
  pointer-events: none;
  position: absolute;
  right: calc(100% + 12px);
  top: 4px;
  min-width: 188px;
  padding: 7px;
  border: 1px solid var(--kft-line);
  border-radius: 8px;
  background: var(--kft-surface);
  box-shadow: var(--kft-shadow-2), var(--kft-inset);
  opacity: 0;
  transform: translateX(12px) scale(0.96);
  transform-origin: right top;
  transition: opacity 170ms ease, transform 170ms ease;
}

.kiba-feature-menu::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 21px;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--kft-line);
  border-right: 1px solid var(--kft-line);
  background: var(--kft-surface);
  transform: rotate(45deg);
}

.kiba-guide.menu-open .kiba-feature-menu {
  pointer-events: auto;
  opacity: 1;
  transform: translateX(0) scale(1);
}

.kiba-menu-title {
  box-sizing: border-box;
  padding: 6px 9px 8px;
  border-bottom: 1px solid var(--kft-soft-line);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.kiba-menu-item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 3px 0 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px !important;
  background: transparent;
  color: var(--text-ink);
  box-shadow: none !important;
  cursor: pointer;
  font-size: 13px;
  font-weight: 760;
  text-align: left;
}

.kiba-menu-item:focus-visible {
  outline: 2px solid var(--kiba-accent);
  outline-offset: 1px;
}

.kiba-menu-item:hover,
.kiba-menu-item.is-active {
  background: color-mix(in srgb, var(--kiba-accent) 9%, var(--bg-white)) !important;
  color: var(--kiba-accent) !important;
  transform: none !important;
}

.kiba-menu-mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--kiba-accent) 48%, var(--kft-line));
  background: transparent;
  flex: 0 0 auto;
}

.kiba-menu-item.is-active .kiba-menu-mark,
.kiba-menu-item:hover .kiba-menu-mark {
  background: var(--kiba-accent);
}

.kiba-guide.is-sleeping .kiba-dog-body {
  animation: kibaBreath 2.6s ease-in-out infinite;
}

.kiba-guide.is-sleeping .kiba-dog-head {
  animation: kibaSleepNod 3s ease-in-out infinite;
}

.kiba-guide.is-sleeping .kiba-tongue {
  opacity: 0;
}

.kiba-guide.is-sleeping .kiba-zzz {
  animation: kibaZzz 2.8s ease-in-out infinite;
}

.kiba-guide.is-awake .kiba-dog-tail {
  animation: kibaTail 460ms ease-in-out infinite;
}

.kiba-guide.is-running .kiba-dog-button {
  animation: kibaRunBody 560ms linear infinite;
}

.kiba-guide.is-running .kiba-dog-tail {
  animation: kibaTail 240ms ease-in-out infinite;
}

.kiba-guide.is-running .kiba-dog-body {
  animation: kibaRunLegs 420ms ease-in-out infinite;
}

.kiba-guide.is-running .kiba-dog-head {
  animation: kibaFocusedHead 680ms ease-in-out infinite;
}

.kiba-guide.is-running .kiba-eye,
.kiba-guide.is-running .kiba-mouth {
  animation: kibaFocusedFace 680ms ease-in-out infinite;
}

.kiba-guide.is-running .kiba-tongue {
  opacity: .9;
  animation: kibaHappyTongue 520ms ease-in-out infinite;
}

@keyframes kibaBreath {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50% { transform: scaleY(0.985) translateY(1px); }
}

@keyframes kibaSleepNod {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(2px); }
}

@keyframes kibaZzz {
  0% { opacity: 0; transform: translate(0, 7px) scale(0.8); }
  22% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(8px, -16px) scale(1.05); }
}

@keyframes kibaTail {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(13deg); }
}

@keyframes kibaRunBody {
  0%, 100% { transform: translateX(-2px) rotate(-2deg); }
  25% { transform: translateX(-10px) translateY(-4px) rotate(-8deg); }
  50% { transform: translateX(-4px) translateY(2px) rotate(3deg); }
  75% { transform: translateX(-12px) translateY(-2px) rotate(-5deg); }
}

@keyframes kibaRunLegs {
  0%, 100% { transform: skewX(0deg); }
  50% { transform: skewX(-8deg); }
}

@keyframes kibaFocusedHead {
  0%, 100% { transform: translateX(3px) rotate(1.5deg); }
  50% { transform: translateX(5px) translateY(-1px) rotate(3deg); }
}

@keyframes kibaFocusedFace {
  0%, 100% { transform: translateX(2px); }
  50% { transform: translateX(4px) translateY(-.5px); }
}

@keyframes kibaHappyTongue {
  0%, 100% { transform: translateX(2px) translateY(0) rotate(0deg); }
  50% { transform: translateX(4px) translateY(2px) rotate(6deg); }
}

.kiba-ambient {
  position: fixed;
  inset: var(--kft-nav-h, 68px) 0 0;
  pointer-events: none;
  z-index: 920;
  overflow: hidden;
  contain: layout style paint;
  perspective: 900px;
  perspective-origin: 50% 82%;
}

.kiba-ambient-scene {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(10px, 3.6vh, 34px);
  height: clamp(86px, 12vw, 138px);
  opacity: 0;
  animation: kibaSceneFade 12000ms linear forwards;
  transform-style: preserve-3d;
}

.kiba-ambient-scene.is-leaving {
  opacity: 0;
  transition: opacity 460ms ease;
}

.kiba-ambient-sprite,
.kiba-ambient-prop {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(54px, 6.2vw, 86px);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 8px 14px rgba(16, 24, 40, 0.18));
  will-change: transform;
}

.kiba-guide.is-cameo {
  top: auto !important;
  right: auto !important;
  bottom: clamp(16px, 4vh, 36px) !important;
  left: 0;
  width: clamp(58px, 6.7vw, 92px);
  z-index: 938;
  pointer-events: auto;
  transition: none !important;
  will-change: transform;
  transform-style: preserve-3d;
}

.kiba-guide.is-cameo .kiba-feature-menu {
  display: none !important;
}

.kiba-guide.is-cameo .kiba-dog-button {
  width: clamp(58px, 6.7vw, 92px);
  min-width: clamp(58px, 6.7vw, 92px);
  min-height: clamp(50px, 5.8vw, 78px);
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 12px 16px rgba(16, 24, 40, 0.2));
  transform-style: preserve-3d;
}

.kiba-guide.is-cameo .kiba-dog-svg {
  transform-origin: 50% 82%;
  animation: kibaCameoSideLean 1320ms ease-in-out infinite;
  filter: drop-shadow(0 13px 14px rgba(16, 24, 40, 0.18));
}

.kiba-guide.is-cameo .kiba-dog-head {
  animation: kibaCameoLookRight 1800ms ease-in-out infinite;
}

.kiba-guide.is-cameo .kiba-eye,
.kiba-guide.is-cameo .kiba-mouth {
  animation: kibaCameoFaceRight 1800ms ease-in-out infinite;
}

.kiba-guide.is-cameo .kiba-tongue {
  opacity: .9;
  animation: kibaHappyTongue 900ms ease-in-out infinite;
}

.kiba-guide.is-cameo::before,
.kiba-guide.is-cameo::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.kiba-guide.is-cameo::before {
  left: -58px;
  top: 24px;
  width: 60px;
  height: 26px;
  background:
    linear-gradient(90deg, transparent, rgba(91,140,219,.38), transparent) 0 2px / 48px 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(255,95,31,.34), transparent) 12px 13px / 42px 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(47,128,237,.28), transparent) 2px 23px / 34px 2px no-repeat;
  animation: kibaWindBurst 520ms linear infinite;
}

.kiba-guide.is-cameo::after {
  left: 7px;
  bottom: -4px;
  width: 58px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(16,24,40,.18), transparent 72%);
  animation: kibaGroundPulse 420ms ease-in-out infinite;
}

.kiba-guide.kiba-cameo-stroll {
  animation: kibaNavStroll 12000ms cubic-bezier(.36,.02,.32,1) forwards;
}

.kiba-guide.kiba-cameo-stroll .kiba-dog-button {
  animation: kibaCameoWalkBob 1350ms ease-in-out infinite;
}

.kiba-guide.kiba-cameo-bone {
  animation: kibaNavBonePounce 13000ms cubic-bezier(.28,.05,.22,1) forwards;
}

.kiba-guide.kiba-cameo-friends {
  animation: kibaNavFriendPlay 15000ms cubic-bezier(.28,.03,.24,1) forwards;
}

.kiba-guide.kiba-cameo-frisbee {
  animation: kibaNavFrisbeeRun 12000ms cubic-bezier(.22,.01,.2,1) forwards;
}

.kiba-guide.kiba-cameo-cat-chase {
  animation: kibaNavCatChase 12000ms cubic-bezier(.22,.01,.2,1) forwards;
}

.kiba-guide.kiba-cameo-cat-revenge {
  animation: kibaNavCatReverse 12000ms cubic-bezier(.22,.01,.2,1) forwards;
}

.kiba-guide.kiba-cameo-cat-revenge::before {
  left: auto;
  right: -58px;
  transform: scaleX(-1);
}

.kiba-guide.kiba-cameo-cat-revenge .kiba-dog-head {
  animation: kibaCameoLookLeft 1800ms ease-in-out infinite;
}

.kiba-guide.kiba-cameo-cat-revenge .kiba-eye,
.kiba-guide.kiba-cameo-cat-revenge .kiba-mouth {
  animation: kibaCameoFaceLeft 1800ms ease-in-out infinite;
}

.kiba-guide.kiba-cameo-cat-revenge .kiba-dog-svg,
.kiba-guide.kiba-cameo-cat-revenge .kiba-dog-button {
  transform-origin: 50% 82%;
}

.kiba-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 24px;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--kft-accent) 22%, transparent), transparent 76%),
    radial-gradient(ellipse at center, rgba(46,139,87,.14), transparent 70%);
  opacity: .72;
  transform: translateY(12px);
}

.kiba-grass {
  position: absolute;
  bottom: 9px;
  width: 42px;
  height: 19px;
  opacity: .8;
  background:
    linear-gradient(105deg, transparent 46%, rgba(46,139,87,.62) 48% 53%, transparent 55%),
    linear-gradient(84deg, transparent 45%, rgba(74,163,104,.54) 48% 53%, transparent 55%),
    linear-gradient(68deg, transparent 46%, rgba(26,120,72,.44) 48% 53%, transparent 55%);
  filter: drop-shadow(0 2px 2px rgba(16,24,40,.08));
  animation: kibaGrassSway 1.9s ease-in-out infinite;
}

.kiba-grass.g1 { left: 8vw; }
.kiba-grass.g2 { left: 28vw; animation-delay: 260ms; }
.kiba-grass.g3 { left: 50vw; animation-delay: 520ms; }
.kiba-grass.g4 { left: 70vw; animation-delay: 180ms; }
.kiba-grass.g5 { left: 88vw; animation-delay: 430ms; }

.kiba-wind {
  position: absolute;
  bottom: clamp(56px, 8vw, 94px);
  width: 70px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(91,140,219,.32), transparent);
  opacity: 0;
  animation: kibaStageWind 1600ms linear infinite;
}

.kiba-wind.w1 { left: 18vw; animation-delay: 120ms; }
.kiba-wind.w2 { left: 46vw; bottom: clamp(76px, 10vw, 114px); animation-delay: 580ms; }
.kiba-wind.w3 { left: 72vw; animation-delay: 940ms; }

.kiba-dust {
  position: absolute;
  bottom: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kft-accent) 16%, rgba(120,93,62,.18));
  opacity: 0;
  filter: blur(.2px);
  animation: kibaDustPuff 1200ms ease-out infinite;
}

.kiba-dust.d1 { left: 18vw; animation-delay: 40ms; }
.kiba-dust.d2 { left: 49vw; animation-delay: 360ms; }
.kiba-dust.d3 { left: 76vw; animation-delay: 740ms; }

.kiba-ambient-svg,
.kiba-prop-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.kiba-ambient-tail,
.kiba-cat-tail {
  transform-origin: 112px 82px;
  animation: kibaAmbientTail 520ms ease-in-out infinite;
}

.kiba-ambient-head {
  transform-origin: 78px 74px;
  animation: kibaAmbientHead 1.8s ease-in-out infinite;
}

.kiba-leg-a {
  transform-origin: 50px 78px;
  animation: kibaLegA 460ms ease-in-out infinite;
}

.kiba-leg-b {
  transform-origin: 112px 78px;
  animation: kibaLegB 460ms ease-in-out infinite;
}

.kiba-cat-leg-a {
  transform-origin: 45px 64px;
  animation: kibaLegA 380ms ease-in-out infinite;
}

.kiba-cat-leg-b {
  transform-origin: 82px 64px;
  animation: kibaLegB 380ms ease-in-out infinite;
}

.kiba-halo {
  animation: kibaHaloFloat 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(248, 215, 107, 0.54));
}

.kiba-tiara {
  filter: drop-shadow(0 2px 4px rgba(248, 215, 107, 0.36));
}

.kiba-scene-stroll .kiba-stroll-kiba {
  width: clamp(58px, 6.5vw, 88px);
  animation: kibaAmbientStroll 7400ms cubic-bezier(.34,.02,.34,1) forwards;
}

.kiba-scene-bone {
  animation-duration: 13000ms;
}

.kiba-bone {
  left: 50%;
  bottom: 14px;
  width: clamp(42px, 4.6vw, 66px);
  animation: kibaBoneToy 2600ms ease-in-out infinite;
}

.kiba-bone-kiba {
  left: 50%;
  width: clamp(58px, 6.5vw, 88px);
  animation: kibaBonePounce 13000ms ease-in-out forwards;
}

.kiba-scene-friends {
  animation-duration: 15000ms;
}

.kiba-scene-friends .kiba-ambient-sprite {
  width: clamp(46px, 5.4vw, 74px);
  bottom: 4px;
}

.kiba-friend-kiba {
  left: 50%;
  animation: kibaFriendKiba 15000ms ease-in-out forwards;
}

.kiba-friend-husky {
  left: 50%;
  animation: kibaFriendHusky 15000ms ease-in-out forwards;
}

.kiba-friend-pom {
  left: 50%;
  width: clamp(40px, 4.8vw, 66px) !important;
  animation: kibaFriendPom 15000ms ease-in-out forwards;
}

.kiba-friend-golden {
  left: 50%;
  animation: kibaFriendGolden 15000ms ease-in-out forwards;
}

.kiba-scene-frisbee .kiba-frisbee {
  width: clamp(34px, 4vw, 56px);
  bottom: clamp(58px, 7vw, 82px);
  animation: kibaFrisbeeArc 12000ms cubic-bezier(.2,.1,.12,1) forwards;
}

.kiba-scene-frisbee .kiba-frisbee-kiba {
  width: clamp(56px, 6.4vw, 88px);
  animation: kibaFrisbeeRun 12000ms cubic-bezier(.22,.01,.22,1) forwards;
}

.kiba-scene-cat-chase .kiba-chase-cat {
  width: clamp(45px, 5.4vw, 72px);
  animation: kibaCatLead 12000ms cubic-bezier(.24,.02,.2,1) forwards;
}

.kiba-scene-cat-chase .kiba-chase-kiba {
  width: clamp(56px, 6.4vw, 88px);
  animation: kibaCatKiba 12000ms cubic-bezier(.24,.02,.2,1) forwards;
}

.kiba-scene-cat-revenge .kiba-revenge-kiba {
  width: clamp(54px, 6vw, 84px);
  animation: kibaReverseKiba 12000ms cubic-bezier(.22,.02,.2,1) forwards;
}

.kiba-scene-cat-revenge .kiba-revenge-cat {
  width: clamp(40px, 4.8vw, 66px);
  animation: kibaReverseCat 12000ms cubic-bezier(.22,.02,.2,1) forwards;
}

.kiba-revenge-cat.c1 { animation-delay: 90ms; bottom: 2px; }
.kiba-revenge-cat.c2 { animation-delay: 260ms; bottom: 17px; }
.kiba-revenge-cat.c3 { animation-delay: 410ms; bottom: 7px; }

@keyframes kibaNavStroll {
  0% { transform: translateX(-130px) translateY(0) translateZ(-70px) rotateY(28deg) rotateZ(0deg) scale(.86); }
  18% { transform: translateX(18vw) translateY(-2px) translateZ(-30px) rotateY(22deg) rotateZ(-1deg) scale(.94); }
  44% { transform: translateX(44vw) translateY(1px) translateZ(8px) rotateY(18deg) rotateZ(1deg) scale(1.02); }
  70% { transform: translateX(70vw) translateY(-2px) translateZ(-18px) rotateY(22deg) rotateZ(-1deg) scale(.96); }
  100% { transform: translateX(calc(100vw + 132px)) translateY(0) translateZ(-70px) rotateY(28deg) rotateZ(0deg) scale(.86); }
}

@keyframes kibaNavBonePounce {
  0% { transform: translateX(-130px) translateY(0) translateZ(-70px) rotateY(26deg) rotateZ(0deg) scale(.88); }
  18% { transform: translateX(calc(50vw - 112px)) translateY(0) translateZ(-8px) rotateY(20deg) rotateZ(-2deg) scale(1); }
  30% { transform: translateX(calc(50vw - 72px)) translateY(-28px) translateZ(42px) rotateY(17deg) rotateZ(-13deg) scale(1.08); }
  42% { transform: translateX(calc(50vw - 44px)) translateY(3px) translateZ(20px) rotateY(20deg) rotateZ(7deg) scale(1.02); }
  55% { transform: translateX(calc(50vw - 86px)) translateY(-10px) translateZ(30px) rotateY(18deg) rotateZ(-5deg) scale(1.05); }
  72% { transform: translateX(calc(50vw - 34px)) translateY(0) translateZ(4px) rotateY(21deg) rotateZ(3deg) scale(1); }
  100% { transform: translateX(calc(100vw + 130px)) translateY(0) translateZ(-70px) rotateY(26deg) rotateZ(0deg) scale(.88); }
}

@keyframes kibaNavFriendPlay {
  0% { transform: translateX(-130px) translateY(0) translateZ(-60px) rotateY(26deg) rotateZ(0deg) scale(.88); }
  18%, 78% { transform: translateX(calc(50vw - 44px)) translateY(0) translateZ(18px) rotateY(18deg) rotateZ(0deg) scale(1.03); }
  30% { transform: translateX(calc(50vw - 14px)) translateY(-20px) translateZ(44px) rotateY(14deg) rotateZ(8deg) scale(1.08); }
  42% { transform: translateX(calc(50vw - 70px)) translateY(2px) translateZ(22px) rotateY(24deg) rotateZ(-7deg) scale(1.02); }
  54% { transform: translateX(calc(50vw + 2px)) translateY(-15px) translateZ(40px) rotateY(15deg) rotateZ(6deg) scale(1.07); }
  66% { transform: translateX(calc(50vw - 58px)) translateY(0) translateZ(12px) rotateY(22deg) rotateZ(-3deg) scale(1.02); }
  100% { transform: translateX(calc(100vw + 132px)) translateY(0) translateZ(-60px) rotateY(26deg) rotateZ(0deg) scale(.88); }
}

@keyframes kibaNavFrisbeeRun {
  0% { transform: translateX(-132px) translateY(0) translateZ(-70px) rotateY(30deg) rotateZ(0deg) scale(.86); }
  28% { transform: translateX(30vw) translateY(-4px) translateZ(0) rotateY(18deg) rotateZ(-7deg) scale(1); }
  49% { transform: translateX(54vw) translateY(-30px) translateZ(52px) rotateY(14deg) rotateZ(-13deg) scale(1.1); }
  68% { transform: translateX(72vw) translateY(0) translateZ(10px) rotateY(20deg) rotateZ(4deg) scale(1.02); }
  100% { transform: translateX(calc(100vw + 132px)) translateY(0) translateZ(-70px) rotateY(30deg) rotateZ(0deg) scale(.86); }
}

@keyframes kibaNavCatChase {
  0% { transform: translateX(-170px) translateY(5px) translateZ(-80px) rotateY(30deg) rotateZ(0deg) scale(.84); }
  34% { transform: translateX(28vw) translateY(-9px) translateZ(12px) rotateY(18deg) rotateZ(-9deg) scale(1.02); }
  62% { transform: translateX(60vw) translateY(0) translateZ(28px) rotateY(16deg) rotateZ(5deg) scale(1.05); }
  100% { transform: translateX(calc(100vw + 72px)) translateY(3px) translateZ(-60px) rotateY(28deg) rotateZ(0deg) scale(.9); }
}

@keyframes kibaNavCatReverse {
  0% { transform: translateX(calc(100vw + 110px)) translateY(3px) translateZ(-70px) scaleX(-1) rotateY(30deg) rotateZ(0deg) scale(.86); }
  34% { transform: translateX(64vw) translateY(-6px) translateZ(14px) scaleX(-1) rotateY(18deg) rotateZ(8deg) scale(1.02); }
  64% { transform: translateX(30vw) translateY(0) translateZ(24px) scaleX(-1) rotateY(16deg) rotateZ(-6deg) scale(1.04); }
  100% { transform: translateX(-150px) translateY(3px) translateZ(-70px) scaleX(-1) rotateY(30deg) rotateZ(0deg) scale(.86); }
}

@keyframes kibaCameoWalkBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-2deg); }
}

@keyframes kibaCameoSideLean {
  0%, 100% { transform: rotateY(32deg) rotateX(2deg) scaleX(.92) skewY(-.8deg) rotateZ(0deg); }
  50% { transform: rotateY(39deg) rotateX(4deg) scaleX(.86) skewY(-2deg) rotateZ(-1.8deg); }
}

@keyframes kibaCameoLookRight {
  0%, 100% { transform: translateX(4px) translateY(0) rotate(1.5deg); }
  50% { transform: translateX(7px) translateY(-2px) rotate(3deg); }
}

@keyframes kibaCameoFaceRight {
  0%, 100% { transform: translateX(2px); }
  50% { transform: translateX(5px) translateY(-1px); }
}

@keyframes kibaCameoLookLeft {
  0%, 100% { transform: translateX(4px) translateY(0) rotate(1.5deg); }
  50% { transform: translateX(7px) translateY(-2px) rotate(3deg); }
}

@keyframes kibaCameoFaceLeft {
  0%, 100% { transform: translateX(2px); }
  50% { transform: translateX(5px) translateY(-1px); }
}

@keyframes kibaWindBurst {
  0% { opacity: 0; transform: translateX(20px) scaleX(.65); }
  25% { opacity: .85; }
  100% { opacity: 0; transform: translateX(-28px) scaleX(1.12); }
}

@keyframes kibaGroundPulse {
  0%, 100% { opacity: .28; transform: scaleX(.86); }
  50% { opacity: .42; transform: scaleX(1.08); }
}

@keyframes kibaGrassSway {
  0%, 100% { transform: skewX(-4deg) translateY(0); }
  50% { transform: skewX(5deg) translateY(-1px); }
}

@keyframes kibaStageWind {
  0% { opacity: 0; transform: translateX(42px) scaleX(.55); }
  28% { opacity: .65; }
  100% { opacity: 0; transform: translateX(-44px) scaleX(1.08); }
}

@keyframes kibaDustPuff {
  0% { opacity: 0; transform: translate(0, 0) scale(.35); }
  18% { opacity: .46; }
  100% { opacity: 0; transform: translate(-28px, -13px) scale(1.4); }
}

@keyframes kibaSceneFade {
  0% { opacity: 0; }
  8% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes kibaAmbientTail {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(14deg); }
}

@keyframes kibaAmbientHead {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(-2deg); }
}

@keyframes kibaLegA {
  0%, 100% { transform: rotate(9deg); }
  50% { transform: rotate(-11deg); }
}

@keyframes kibaLegB {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(11deg); }
}

@keyframes kibaHaloFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes kibaAmbientStroll {
  0% { transform: translateX(-120px) translateY(0) rotate(0deg); }
  18% { transform: translateX(18vw) translateY(-2px) rotate(-1deg); }
  38% { transform: translateX(38vw) translateY(1px) rotate(1deg); }
  62% { transform: translateX(62vw) translateY(-2px) rotate(-1deg); }
  82% { transform: translateX(82vw) translateY(1px) rotate(1deg); }
  100% { transform: translateX(calc(100vw + 130px)) translateY(0) rotate(0deg); }
}

@keyframes kibaBoneToy {
  0%, 100% { transform: translate(-50%, 0) rotate(-6deg); }
  28% { transform: translate(calc(-50% + 28px), -12px) rotate(16deg); }
  58% { transform: translate(calc(-50% - 20px), 2px) rotate(-18deg); }
}

@keyframes kibaBonePounce {
  0% { transform: translateX(-130px) translateY(0) rotate(0deg); }
  22% { transform: translateX(calc(50vw - 92px)) translateY(0) rotate(-2deg); }
  36% { transform: translateX(calc(50vw - 58px)) translateY(-15px) rotate(-7deg); }
  48% { transform: translateX(calc(50vw - 36px)) translateY(2px) rotate(4deg); }
  66% { transform: translateX(calc(50vw - 82px)) translateY(-4px) rotate(-2deg); }
  100% { transform: translateX(calc(100vw + 120px)) translateY(0) rotate(0deg); }
}

@keyframes kibaFriendKiba {
  0% { transform: translateX(-120px); }
  20%, 82% { transform: translateX(-18px) translateY(0); }
  32% { transform: translateX(18px) translateY(-10px) rotate(5deg); }
  46% { transform: translateX(-8px) translateY(0) rotate(-4deg); }
  60% { transform: translateX(26px) translateY(-8px) rotate(4deg); }
  100% { transform: translateX(calc(50vw + 120px)); }
}

@keyframes kibaFriendHusky {
  0% { transform: translateX(calc(100vw + 120px)) scaleX(-1); }
  24%, 82% { transform: translateX(58px) scaleX(-1); }
  44% { transform: translateX(32px) translateY(-7px) scaleX(-1) rotate(-5deg); }
  64% { transform: translateX(72px) translateY(0) scaleX(-1) rotate(3deg); }
  100% { transform: translateX(calc(-50vw - 140px)) scaleX(-1); }
}

@keyframes kibaFriendPom {
  0% { transform: translateX(calc(-50vw - 90px)); }
  18%, 84% { transform: translateX(-78px) translateY(9px); }
  36% { transform: translateX(-58px) translateY(-16px) rotate(8deg); }
  58% { transform: translateX(-94px) translateY(4px) rotate(-6deg); }
  100% { transform: translateX(calc(50vw + 95px)); }
}

@keyframes kibaFriendGolden {
  0% { transform: translateX(calc(100vw + 110px)) scaleX(-1); }
  22%, 84% { transform: translateX(124px) translateY(7px) scaleX(-1); }
  40% { transform: translateX(104px) translateY(-9px) scaleX(-1) rotate(-4deg); }
  62% { transform: translateX(142px) translateY(2px) scaleX(-1) rotate(5deg); }
  100% { transform: translateX(calc(-50vw - 115px)) scaleX(-1); }
}

@keyframes kibaFrisbeeArc {
  0% { transform: translateX(-80px) translateY(10px) rotate(0deg); }
  42% { transform: translateX(48vw) translateY(-34px) rotate(520deg); }
  74% { transform: translateX(78vw) translateY(10px) rotate(900deg); }
  100% { transform: translateX(calc(100vw + 80px)) translateY(-6px) rotate(1180deg); }
}

@keyframes kibaFrisbeeRun {
  0% { transform: translateX(-130px) translateY(0); }
  32% { transform: translateX(34vw) translateY(-2px) rotate(-5deg); }
  52% { transform: translateX(56vw) translateY(-18px) rotate(-11deg); }
  72% { transform: translateX(74vw) translateY(0) rotate(3deg); }
  100% { transform: translateX(calc(100vw + 120px)) translateY(0); }
}

@keyframes kibaCatLead {
  0% { transform: translateX(-90px); }
  100% { transform: translateX(calc(100vw + 110px)); }
}

@keyframes kibaCatKiba {
  0% { transform: translateX(-170px) translateY(4px); }
  42% { transform: translateX(38vw) translateY(-6px) rotate(-5deg); }
  100% { transform: translateX(calc(100vw + 50px)) translateY(2px); }
}

@keyframes kibaReverseKiba {
  0% { transform: translateX(calc(100vw + 90px)) scaleX(-1); }
  100% { transform: translateX(-130px) scaleX(-1); }
}

@keyframes kibaReverseCat {
  0% { transform: translateX(calc(100vw + 170px)) scaleX(-1); }
  100% { transform: translateX(-60px) scaleX(-1); }
}

@media (prefers-reduced-motion: reduce) {
  .kiba-guide,
  .kiba-guide *,
  .kiba-ambient,
  .kiba-ambient *,
  .hero-explainer *,
  .hero-feature-links * {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 768px) {
  .hero-explainer {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 18px;
  }

  .kiba-dog-button {
    width: 74px;
    min-width: 74px;
    min-height: 62px;
  }

  .kiba-feature-menu {
    right: 8px;
    top: auto;
    bottom: calc(100% + 10px);
    min-width: min(230px, calc(100vw - 32px));
    transform-origin: right bottom;
  }

  .kiba-feature-menu::after {
    right: 20px;
    top: auto;
    bottom: -7px;
    transform: rotate(135deg);
  }

  .kiba-ambient {
    display: none;
  }
}

/* ===== KFT vNext: calmer palette, draggable Kiba, hero carousel ===== */
body.kft-page-analytics {
  --kft-accent: #E85A1A;
  --kft-accent-2: #2F80ED;
  --kft-support-a: #1F8A5B;
  --kft-support-b: #7A3FF2;
  --kft-support-c: #F2B134;
}

body.kft-page-live {
  --kft-accent: #1F8A5B;
  --kft-accent-2: #2F80ED;
  --kft-support-a: #E85A1A;
  --kft-support-b: #7A3FF2;
  --kft-support-c: #F2B134;
}

body.kft-page-profile {
  --kft-accent: #7A3FF2;
  --kft-accent-2: #2F80ED;
  --kft-support-a: #1F8A5B;
  --kft-support-b: #E85A1A;
  --kft-support-c: #F2B134;
}

body.kft-page-planner {
  --kft-accent: #B22234;
  --kft-accent-2: #2F80ED;
  --kft-support-a: #1F8A5B;
  --kft-support-b: #7A3FF2;
  --kft-support-c: #F2B134;
}

body[class*="kft-page-"] {
  background:
    radial-gradient(circle at 8% 16%, color-mix(in srgb, var(--kft-support-c) 12%, transparent), transparent 24%),
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--kft-accent-2) 12%, transparent), transparent 27%),
    radial-gradient(circle at 88% 76%, color-mix(in srgb, var(--kft-support-a) 10%, transparent), transparent 25%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-paper) 94%, #FFFFFF 6%) 0%, var(--bg-paper) 52%, color-mix(in srgb, var(--bg-paper) 90%, #DDE7EF 10%) 100%) !important;
}

body[class*="kft-page-"] nav {
  background:
    linear-gradient(180deg, color-mix(in srgb, #151A22 88%, var(--kft-accent) 12%), #10141B) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--kft-accent) 42%, rgba(255,255,255,0.12)) !important;
}

body[class*="kft-page-"] .nav-links {
  background: rgba(255,255,255,0.075) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

body[class*="kft-page-"] .nav-links a:hover,
body[class*="kft-page-"] .nav-links a.active {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--kft-accent) 22%, transparent), color-mix(in srgb, var(--kft-accent-2) 14%, transparent)) !important;
}

body[class*="kft-page-"] .section-title::after {
  background: linear-gradient(90deg, var(--kft-accent), var(--kft-accent-2) 34%, var(--kft-support-a) 62%, transparent) !important;
}

.hero-explainer {
  grid-template-columns: minmax(0, 0.86fr) minmax(300px, 1.14fr) !important;
  gap: clamp(18px, 3vw, 42px) !important;
  align-items: center;
  border-top: 0 !important;
  padding-top: 4px !important;
}

.hero-snapshot {
  display: grid;
  gap: 12px;
  max-width: 500px;
}

.hero-snapshot h2 {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem) !important;
  margin: 0 !important;
}

.hero-snapshot p {
  max-width: 48ch;
}

.hero-feature-links {
  margin-top: 2px !important;
}

.hero-feature-links a,
.hero-feature-links button {
  border-bottom-color: transparent !important;
  border-radius: 7px !important;
  padding: 7px 9px !important;
  background: color-mix(in srgb, var(--kft-accent) 8%, var(--bg-white)) !important;
  border: 1px solid color-mix(in srgb, var(--kft-accent) 18%, var(--kft-line)) !important;
}

.hero-feature-links a:nth-child(2n),
.hero-feature-links button:nth-child(2n) {
  background: color-mix(in srgb, var(--kft-accent-2) 8%, var(--bg-white)) !important;
  border-color: color-mix(in srgb, var(--kft-accent-2) 18%, var(--kft-line)) !important;
}

.hero-carousel {
  position: relative;
  width: 100%;
  min-height: 238px;
  border: 1px solid var(--kft-line);
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--kft-accent) 9%, var(--kft-surface)), color-mix(in srgb, var(--kft-accent-2) 8%, var(--kft-surface)) 58%, var(--kft-surface));
  box-shadow: var(--kft-shadow-1), var(--kft-inset);
  overflow: hidden;
}

.hero-carousel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--kft-accent), var(--kft-accent-2), var(--kft-support-a));
}

.hero-carousel-track {
  position: relative;
  min-height: 178px;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 30px 30px 22px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms ease, transform 420ms ease;
  pointer-events: none;
}

.hero-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-slide-kicker {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kft-accent) 12%, var(--bg-white));
  color: color-mix(in srgb, var(--kft-accent) 76%, var(--text-ink));
  border: 1px solid color-mix(in srgb, var(--kft-accent) 20%, var(--kft-line));
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-slide h3 {
  margin: 0 !important;
  font-size: clamp(1.3rem, 2.1vw, 2rem) !important;
  line-height: 1.12 !important;
}

.hero-slide p {
  max-width: 58ch;
  margin: 0 !important;
  font-size: 0.98rem !important;
  line-height: 1.58 !important;
}

.hero-slide-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.hero-slide-meta span {
  padding: 5px 8px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--bg-white) 78%, var(--kft-accent-2) 8%);
  border: 1px solid var(--kft-soft-line);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

.hero-carousel-controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 20px;
}

.hero-carousel-controls button {
  all: unset;
  box-sizing: border-box;
  min-width: 42px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--kft-line);
  background: color-mix(in srgb, var(--bg-white) 86%, var(--kft-accent) 5%);
  color: var(--text-ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.hero-carousel-controls button:hover {
  border-color: color-mix(in srgb, var(--kft-accent) 46%, var(--kft-line));
  background: color-mix(in srgb, var(--kft-accent) 12%, var(--bg-white));
}

.hero-carousel-dots {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.hero-carousel-dots button {
  min-width: 9px;
  width: 9px;
  height: 9px;
  min-height: 9px;
  padding: 0 !important;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kft-line) 84%, var(--bg-white)) !important;
}

.hero-carousel-dots button.is-active {
  width: 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--kft-accent), var(--kft-accent-2)) !important;
  border-color: transparent;
}

.kiba-ambient {
  display: none !important;
}

.kiba-guide {
  right: auto !important;
  width: 88px;
  touch-action: none;
  cursor: grab;
}

.kiba-guide.is-cameo,
.kiba-guide[class*="kiba-cameo-"] {
  animation: none !important;
  transform: none !important;
}

.kiba-guide.is-dragging {
  cursor: grabbing;
  z-index: 1100;
  transition: transform 180ms ease !important; /* suppress position transition while dragging */
}

.kiba-guide.is-dragging .kiba-dog-button {
  cursor: grabbing;
  transform: scale(1.04) rotate(-2deg);
}

.kiba-dog-button {
  cursor: grab;
}

.kiba-dog-button:hover .kiba-dog-tail,
.kiba-guide.menu-open .kiba-dog-tail {
  animation: kibaTail 520ms ease-in-out infinite;
}

.kiba-dog-button:hover .kiba-dog-head,
.kiba-guide.menu-open .kiba-dog-head {
  animation: kibaFocusedHead 900ms ease-in-out infinite;
}

.kiba-guide.menu-right .kiba-feature-menu {
  right: auto;
  left: calc(100% + 12px);
  transform-origin: left top;
}

.kiba-guide.menu-right .kiba-feature-menu::after {
  right: auto;
  left: -7px;
  border-right: 0;
  border-left: 1px solid var(--kft-line);
  transform: rotate(-45deg);
}

.kiba-guide.menu-up .kiba-feature-menu {
  top: auto;
  bottom: 8px;
  transform-origin: right bottom;
}

.kiba-guide.menu-right.menu-up .kiba-feature-menu {
  transform-origin: left bottom;
}

@media (max-width: 768px) {
  .hero-explainer {
    grid-template-columns: 1fr !important;
  }

  .hero-carousel {
    min-height: 282px;
  }

  .hero-carousel-track {
    min-height: 218px;
  }

  .hero-slide {
    padding: 26px 18px 18px;
  }
}

/* ===== KFT polish repair: page nav identity, visible Kiba, auto hero spotlight ===== */
body.kft-page-analytics {
  --kft-nav-color: var(--primary-orange, #FF5F1F);
}

body.kft-page-live {
  --kft-nav-color: var(--primary-live, #2E8B57);
}

body.kft-page-profile {
  --kft-nav-color: var(--primary-profile, #7A3FF2);
}

body.kft-page-planner {
  --kft-nav-color: var(--primary-plan, #B22234);
}

body[class*="kft-page-"] nav {
  background: var(--kft-nav-color, var(--kft-accent)) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 10px 28px rgba(16, 24, 40, 0.16) !important;
}

body[class*="kft-page-"] .nav-links {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.hero-feature-links {
  gap: 8px 18px !important;
}

.hero-feature-links a,
.hero-feature-links button {
  position: relative;
  padding: 0 0 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--kft-accent) 78%, var(--text-ink)) !important;
  box-shadow: none !important;
}

.hero-feature-links a::after,
.hero-feature-links button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--kft-accent), var(--kft-accent-2), transparent);
  transform: scaleX(0.42);
  transform-origin: left;
  opacity: 0.55;
  transition: transform 180ms ease, opacity 180ms ease;
}

.hero-feature-links a:hover::after,
.hero-feature-links button:hover::after {
  transform: scaleX(1);
  opacity: 0.95;
}

.hero-carousel {
  --hero-slide-ms: 4400ms;
  min-height: clamp(236px, 25vw, 306px) !important;
  padding: 6px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate;
}

.hero-carousel::before {
  content: "";
  position: absolute;
  inset: 22px auto 36px 0;
  width: 2px;
  height: auto;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--kft-accent), var(--kft-accent-2) 48%, var(--kft-support-a));
  box-shadow: 0 0 22px color-mix(in srgb, var(--kft-accent) 34%, transparent);
  z-index: 2;
}

.hero-carousel::after {
  content: "";
  position: absolute;
  inset: -18px auto 0 -70px;
  width: min(440px, 72vw);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--kft-accent) 14%, transparent), transparent 58%),
    radial-gradient(ellipse at 54% 72%, color-mix(in srgb, var(--kft-accent-2) 10%, transparent), transparent 62%);
  opacity: 0.78;
  z-index: 0;
}

.hero-carousel-track {
  min-height: clamp(198px, 22vw, 254px) !important;
  position: relative;
  z-index: 1;
}

.hero-slide {
  gap: 12px !important;
  padding: clamp(18px, 3vw, 34px) 0 clamp(52px, 4vw, 64px) clamp(28px, 4vw, 48px) !important;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(18px) scale(0.99);
  transition: opacity 720ms cubic-bezier(.2,.75,.25,1), transform 720ms cubic-bezier(.2,.75,.25,1), filter 720ms ease !important;
}

.hero-slide.is-active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.hero-slide-kicker {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--kft-accent) 82%, var(--text-ink)) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
}

.hero-slide h3 {
  max-width: 12.5ch;
  font-size: clamp(1.7rem, 3.4vw, 3.15rem) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

.hero-slide p {
  max-width: 44ch !important;
  color: var(--text-muted);
  font-size: clamp(0.98rem, 1.18vw, 1.08rem) !important;
  line-height: 1.56 !important;
}

.hero-slide-meta {
  gap: 8px 14px !important;
  margin-top: 0 !important;
}

.hero-slide-meta span {
  position: relative;
  padding: 0 0 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--text-ink) 72%, var(--text-muted)) !important;
  font-size: 0.75rem !important;
  font-weight: 850 !important;
}

.hero-slide-meta span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--kft-support-a);
}

.hero-carousel-controls {
  position: absolute !important;
  left: clamp(28px, 4vw, 48px);
  right: auto;
  bottom: 12px;
  z-index: 3;
  padding: 0 !important;
  gap: 0 !important;
}

.hero-carousel-controls > button[data-hero-prev],
.hero-carousel-controls > button[data-hero-next] {
  display: none !important;
}

.hero-carousel-dots {
  gap: 9px !important;
  margin-left: 0 !important;
}

.hero-carousel-dots button {
  position: relative;
  width: 34px !important;
  min-width: 34px !important;
  height: 3px !important;
  min-height: 3px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  overflow: hidden;
  background: color-mix(in srgb, var(--text-muted) 22%, transparent) !important;
}

.hero-carousel-dots button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--kft-accent), var(--kft-accent-2));
  transform: scaleX(0);
  transform-origin: left;
}

.hero-carousel-dots button.is-active {
  background: color-mix(in srgb, var(--text-muted) 18%, transparent) !important;
}

.hero-carousel-dots button.is-active::after {
  animation: kftHeroProgress var(--hero-slide-ms) linear forwards;
}

@keyframes kftHeroProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.kiba-guide {
  width: 106px !important;
  z-index: 1085 !important;
}

.kiba-dog-button {
  width: 106px !important;
  min-width: 106px !important;
  min-height: 88px !important;
  isolation: isolate;
  filter: none !important;
}

.kiba-dog-button::before,
.kiba-dog-button::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.kiba-dog-button::before {
  left: 12px;
  right: 10px;
  bottom: 7px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(16, 24, 40, 0.28), rgba(16, 24, 40, 0.08) 54%, transparent 74%);
  z-index: 0;
}

.kiba-dog-button::after {
  inset: -8px -10px -4px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 55% 58%, color-mix(in srgb, var(--kiba-accent) 16%, transparent), transparent 58%),
    radial-gradient(ellipse at 50% 62%, rgba(255,255,255,0.56), transparent 64%);
  opacity: 0.82;
  z-index: 0;
}

.kiba-dog-svg {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 15px 20px rgba(16, 24, 40, 0.28)) drop-shadow(0 2px 0 rgba(255,255,255,0.28));
}

.kiba-dog-button:hover .kiba-dog-svg,
.kiba-guide.menu-open .kiba-dog-svg {
  filter: drop-shadow(0 18px 24px rgba(16, 24, 40, 0.32)) drop-shadow(0 2px 0 rgba(255,255,255,0.32));
}

@media (max-width: 768px) {
  body[class*="kft-page-"] .nav-links {
    background: var(--kft-nav-color, var(--kft-accent)) !important;
  }

  .hero-carousel {
    min-height: 328px !important;
  }

  .hero-carousel-track {
    min-height: 286px !important;
  }

  .hero-carousel::before {
    inset: 18px auto 42px 0;
  }

  .hero-slide {
    padding: 20px 4px 58px 24px !important;
  }

  .hero-slide h3 {
    max-width: 13.5ch;
    font-size: clamp(1.48rem, 9vw, 2.25rem) !important;
  }

  .hero-carousel-controls {
    left: 24px;
    bottom: 15px;
  }

  .hero-carousel-dots button {
    width: 28px !important;
    min-width: 28px !important;
  }

  .kiba-guide {
    width: 86px !important;
  }

  .kiba-dog-button {
    width: 86px !important;
    min-width: 86px !important;
    min-height: 72px !important;
  }
}

/* ===== KFT feature showcase: bigger carousel, no side writeup, richer surfaces ===== */
.hero-explainer {
  display: block !important;
  width: min(100%, 1120px) !important;
  margin: clamp(18px, 3vw, 30px) auto 0 !important;
  padding-top: clamp(8px, 1.4vw, 16px) !important;
  border-top: 0 !important;
}

.hero-snapshot {
  display: none !important;
}

.hero-carousel {
  width: min(100%, 1120px) !important;
  min-height: clamp(342px, 36vw, 470px) !important;
  margin: 0 auto !important;
  padding-top: clamp(10px, 1.4vw, 18px) !important;
}

.hero-carousel::before {
  inset: clamp(34px, 5vw, 58px) auto clamp(52px, 6vw, 78px) 0 !important;
  width: 3px !important;
}

.hero-carousel::after {
  inset: -28px auto -18px -86px !important;
  width: min(620px, 86vw) !important;
  opacity: 0.9 !important;
}

.hero-carousel-track {
  min-height: clamp(292px, 32vw, 390px) !important;
}

.hero-slide {
  padding: clamp(42px, 6vw, 74px) clamp(18px, 4vw, 44px) clamp(82px, 7vw, 106px) clamp(34px, 6vw, 70px) !important;
}

.hero-slide h3 {
  max-width: 13ch !important;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem) !important;
  line-height: 0.94 !important;
}

.hero-slide p {
  max-width: 52ch !important;
  font-size: clamp(1.04rem, 1.35vw, 1.22rem) !important;
  line-height: 1.56 !important;
}

.hero-slide-meta {
  display: none !important;
}

.hero-carousel-controls {
  left: clamp(34px, 6vw, 70px) !important;
  bottom: clamp(24px, 3vw, 34px) !important;
}

.hero-carousel-dots {
  gap: 11px !important;
}

.hero-carousel-dots button {
  width: clamp(38px, 5vw, 58px) !important;
  min-width: clamp(38px, 5vw, 58px) !important;
  height: 4px !important;
  min-height: 4px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -999px;
}

body[class*="kft-page-"] :is(
  .hero-tile,
  .hero-card-link,
  .feature-card,
  .newsletter-card,
  .origin-card,
  .live-card,
  .dashboard-card,
  .insight-card,
  .graph-shell,
  .panel-shell,
  .compare-summary,
  .sidebar-card,
  .transfer-panel,
  .paths-section,
  .price-box,
  .fixture-card,
  .kft-box,
  .kft-controls
) {
  position: relative;
  overflow: hidden;
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, var(--kft-accent) 18%, var(--kft-line)) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--bg-white) 94%, var(--kft-support-b) 6%), color-mix(in srgb, var(--kft-surface) 92%, var(--kft-accent-2) 8%)) !important;
  box-shadow:
    0 18px 46px rgba(16, 24, 40, 0.10),
    0 1px 0 rgba(255,255,255,0.64) inset,
    0 0 0 1px color-mix(in srgb, var(--kft-accent) 5%, transparent) !important;
}

body[class*="kft-page-"] :is(
  .hero-tile,
  .hero-card-link,
  .feature-card,
  .newsletter-card,
  .origin-card,
  .live-card,
  .dashboard-card,
  .insight-card,
  .graph-shell,
  .panel-shell,
  .compare-summary,
  .sidebar-card,
  .transfer-panel,
  .paths-section,
  .price-box,
  .fixture-card,
  .kft-box,
  .kft-controls
)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kft-accent), var(--kft-accent-2) 44%, var(--kft-support-a));
  opacity: 0.92;
  z-index: 1;
}

body[class*="kft-page-"] :is(
  .hero-tile,
  .hero-card-link,
  .feature-card,
  .newsletter-card,
  .origin-card,
  .live-card,
  .dashboard-card,
  .insight-card,
  .graph-shell,
  .panel-shell,
  .compare-summary,
  .sidebar-card,
  .transfer-panel,
  .paths-section,
  .price-box,
  .fixture-card,
  .kft-box,
  .kft-controls
)::after {
  content: "";
  position: absolute;
  inset: -36px -42px auto auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--kft-accent-2) 14%, transparent), transparent 66%);
  opacity: 0.72;
  z-index: 0;
}

body[class*="kft-page-"] :is(
  .hero-tile,
  .hero-card-link,
  .feature-card,
  .newsletter-card,
  .origin-card,
  .live-card,
  .dashboard-card,
  .insight-card,
  .graph-shell,
  .panel-shell,
  .compare-summary,
  .sidebar-card,
  .transfer-panel,
  .paths-section,
  .price-box,
  .fixture-card,
  .kft-box,
  .kft-controls
):hover {
  transform: translateY(-3px) !important;
  border-color: color-mix(in srgb, var(--kft-accent) 42%, var(--kft-line)) !important;
  box-shadow:
    0 24px 58px rgba(16, 24, 40, 0.14),
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 0 0 1px color-mix(in srgb, var(--kft-accent) 12%, transparent) !important;
}

body[class*="kft-page-"] :is(
  .live-card-head,
  .shell-head,
  .compare-summary-head,
  .sidebar-card-title,
  .price-box-head
) {
  position: relative;
  z-index: 2;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-white) 78%, var(--kft-accent) 8%), color-mix(in srgb, var(--kft-muted-surface) 86%, var(--bg-white))) !important;
}

body[class*="kft-page-"] :is(
  .live-card > *,
  .dashboard-card > *,
  .insight-card > *,
  .graph-shell > *,
  .panel-shell > *,
  .compare-summary > *,
  .sidebar-card > *,
  .transfer-panel > *,
  .paths-section > *,
  .price-box > *,
  .fixture-card > *,
  .kft-box > *,
  .kft-controls > *
) {
  position: relative;
  z-index: 2;
}

.kft-feature-stage {
  position: relative;
}

.kft-feature-stage::before {
  content: "";
  position: absolute;
  left: max(20px, calc((100% - 1120px) / 2));
  right: max(20px, calc((100% - 1120px) / 2));
  top: calc(var(--kft-nav-h) + 20px);
  height: 2px;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--kft-accent), var(--kft-accent-2), transparent);
  opacity: 0;
  transform: scaleX(0.2);
  z-index: 0;
}

.kft-feature-stage.is-jump-entering::before {
  animation: kftSectionSweep 900ms cubic-bezier(.22,.8,.24,1) both;
}

.kft-feature-stage .kft-reveal-item {
  opacity: 1;
  filter: none;
  transform: none;
  transition:
    opacity 620ms cubic-bezier(.2,.75,.25,1),
    transform 720ms cubic-bezier(.2,.75,.25,1),
    filter 680ms ease;
  transition-delay: 0ms;
  will-change: auto;
}

.kft-feature-stage.is-jump-prep .kft-reveal-item,
.kft-feature-stage.is-jump-leaving .kft-reveal-item {
  opacity: 0;
  filter: blur(9px);
  transform: translate3d(var(--kft-reveal-out-x, 0), var(--kft-reveal-out-y, -22px), 0) scale(0.985);
  transition-delay: 0ms !important;
  will-change: opacity, transform, filter;
}

.kft-feature-stage.is-jump-prep .kft-reveal-item {
  transform: translate3d(var(--kft-reveal-x, 0), var(--kft-reveal-y, 22px), 0) scale(0.985);
  transition: none !important;
}

.kft-feature-stage.is-jump-entering .kft-reveal-item {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: calc(var(--kft-reveal-index, 0) * 72ms);
  will-change: opacity, transform, filter;
}

@keyframes kftSectionSweep {
  0% {
    opacity: 0;
    transform: scaleX(0.16);
  }
  28% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

@media (max-width: 768px) {
  .hero-explainer {
    margin-top: 16px !important;
  }

  .hero-carousel {
    min-height: 392px !important;
  }

  .hero-carousel-track {
    min-height: 344px !important;
  }

  .hero-slide {
    padding: 40px 10px 88px 28px !important;
  }

  .hero-slide h3 {
    font-size: clamp(2rem, 12vw, 3.2rem) !important;
  }

  .hero-carousel-controls {
    left: 28px !important;
    bottom: 28px !important;
  }

  .hero-carousel-dots button {
    width: 34px !important;
    min-width: 34px !important;
  }

  .kft-feature-stage.is-jump-prep .kft-reveal-item,
  .kft-feature-stage.is-jump-leaving .kft-reveal-item {
    transform: translate3d(0, 24px, 0) scale(0.99);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kft-feature-stage::before {
    display: none !important;
  }

  .kft-feature-stage .kft-reveal-item {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

body[class*="kft-page-"] :is(.kft-box, .proj-table-wrap, #projections .proj-table-wrap) {
  overflow: auto !important;
}

body[class*="kft-page-"] :is(.kft-controls, .section-controls, .graph-toolbar) {
  overflow: visible !important;
}

/* ===== Kiba menu repair + fetch mode ===== */
.kiba-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1080;
  pointer-events: none;
  opacity: 0;
  background: rgba(248, 250, 252, 0.34);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: opacity 180ms ease, backdrop-filter 180ms ease, -webkit-backdrop-filter 180ms ease;
}

html[data-theme="dark"] .kiba-menu-backdrop {
  background: rgba(7, 10, 14, 0.42);
}

body.kiba-menu-active .kiba-menu-backdrop {
  pointer-events: auto;
  opacity: 1;
  backdrop-filter: blur(8px) saturate(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
}

html[data-theme="dark"] body.kiba-menu-active .kiba-menu-backdrop {
  background: rgba(5, 8, 12, 0.88) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.kiba-menu-active .kiba-guide {
  z-index: 1120 !important;
}

/* === Menu always centred below/above dog, never clipped === */
.kiba-feature-menu {
  left: 50% !important;
  right: auto !important;
  top: calc(100% + 16px) !important;
  bottom: auto !important;
  /* width/min-width use JS-clamped nudge logic */
  width: min(256px, calc(100vw - 28px));
  min-width: min(224px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px);
  /* JS sets --kiba-menu-max-h per-position so menu never overflows */
  max-height: min(440px, var(--kiba-menu-max-h, calc(100vh - 140px)));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: 8px;
  transform: translate(calc(-50% + var(--kiba-menu-nudge, 0px)), 10px) scale(0.95) !important;
  transform-origin: top center !important;
  z-index: 2;
  /* Elevated card look */
  border-radius: 14px !important;
  padding: 8px !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 12px 34px rgba(0,0,0,0.14),
    0 32px 64px rgba(0,0,0,0.10),
    var(--kft-inset) !important;
}

/* Subtle scroll indicator when menu overflows */
.kiba-feature-menu::before {
  content: '';
  position: sticky;
  bottom: 0;
  display: block;
  height: 22px;
  margin: 0 -8px -8px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--kft-surface) 92%, transparent));
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  border-radius: 0 0 14px 14px;
}

.kiba-feature-menu {
  /* show scroll fade only when actually scrollable */
  --scroll-fade: 0;
}

.kiba-guide.menu-above .kiba-feature-menu,
.kiba-guide.menu-up .kiba-feature-menu {
  top: auto !important;
  bottom: calc(100% + 16px) !important;
  transform-origin: bottom center !important;
}

.kiba-guide.menu-open .kiba-feature-menu {
  transform: translate(calc(-50% + var(--kiba-menu-nudge, 0px)), 0) scale(1) !important;
}

.kiba-feature-menu::after {
  left: calc(50% - var(--kiba-menu-nudge, 0px)) !important;
  right: auto !important;
  top: -7px !important;
  bottom: auto !important;
  width: 14px !important;
  height: 14px !important;
  border: 0 !important;
  border-left: 1px solid var(--kft-line) !important;
  border-top: 1px solid var(--kft-line) !important;
  transform: translateX(-50%) rotate(45deg) !important;
  border-radius: 2px !important;
}

.kiba-guide.menu-above .kiba-feature-menu::after,
.kiba-guide.menu-up .kiba-feature-menu::after {
  top: auto !important;
  bottom: -7px !important;
  transform: translateX(-50%) rotate(225deg) !important;
}

/* Elevated menu item rows */
.kiba-menu-item {
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 720 !important;
  letter-spacing: 0;
  gap: 11px !important;
  transition: background 130ms ease, color 130ms ease, transform 130ms ease !important;
}

.kiba-menu-item:hover {
  transform: translateX(2px) !important;
}

.kiba-menu-item.is-active {
  font-weight: 850 !important;
}

.kiba-menu-mark {
  width: 8px !important;
  height: 8px !important;
  flex-shrink: 0 !important;
  transition: background 130ms ease, transform 130ms ease;
}

.kiba-menu-item:hover .kiba-menu-mark { transform: scale(1.3); }
.kiba-menu-item.is-active .kiba-menu-mark { transform: scale(1.2); }

.kiba-menu-title {
  padding: 6px 10px 9px !important;
  font-size: 9.5px !important;
  letter-spacing: 0.09em !important;
}

.kiba-dog-picker {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--kft-soft-line);
}

.kiba-dog-picker-title {
  padding: 0 10px 2px;
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.kiba-dog-choice {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  padding: 5px 8px 5px 6px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--text-ink);
  background: transparent;
  transition: background 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}

.kiba-dog-choice:hover {
  background: color-mix(in srgb, var(--kiba-accent) 8%, var(--bg-white));
  transform: translateX(2px);
}

.kiba-dog-choice:focus-visible {
  outline: 2px solid var(--kiba-accent);
  outline-offset: 2px;
}

.kiba-dog-choice.is-active {
  background: color-mix(in srgb, var(--kiba-accent) 12%, var(--bg-white));
  box-shadow: inset 2.5px 0 0 var(--kiba-accent);
}

.kiba-dog-choice-preview {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 50px;
  height: 42px;
  overflow: visible;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(16, 24, 40, 0.14), transparent 58%),
    color-mix(in srgb, var(--kft-surface) 88%, var(--kiba-accent) 7%);
}

.kiba-dog-choice-preview .kiba-dog-svg {
  width: 54px !important;
  height: auto;
  filter: drop-shadow(0 8px 9px rgba(16, 24, 40, 0.20));
}

.kiba-dog-choice-preview .kiba-zzz {
  display: none;
}

.kiba-dog-choice-copy {
  display: grid;
  min-width: 0;
}

.kiba-dog-choice-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kiba-dog-choice-copy strong {
  font-size: 13.5px;
  font-weight: 900;
  line-height: 1.1;
}

.kiba-fetch-menu-item {
  margin-top: 6px !important;
  border-top: 1px solid var(--kft-soft-line) !important;
  color: color-mix(in srgb, var(--kiba-accent) 82%, var(--text-ink)) !important;
}

/* Kiba hint is intentionally hidden; the guide now speaks through the menu and tour bubble. */
.kiba-nav-hint {
  display: none !important;
  position: absolute;
  left: calc(100% + 10px);
  top: 12px;
  width: max-content;
  max-width: min(190px, calc(100vw - 136px));
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--kiba-accent) 28%, var(--kft-line));
  background: color-mix(in srgb, var(--kft-surface) 94%, var(--kiba-accent) 6%);
  color: var(--text-ink);
  box-shadow: var(--kft-shadow-1);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  pointer-events: none;
  opacity: 0.96;
  transform-origin: left center;
  animation: kibaHintPulse 4200ms ease-in-out infinite;
}

.kiba-guide.menu-open .kiba-nav-hint,
.kiba-guide.is-dragging .kiba-nav-hint,
.kiba-guide.fetch-ready .kiba-nav-hint {
  display: none;
}

@media (max-width: 768px) {
  /* Dog — appropriately smaller for mobile screens */
  .kiba-guide {
    right: auto !important;
    bottom: auto !important;
    width: 70px !important;
  }

  .kiba-dog-button {
    width: 70px !important;
    min-width: 70px !important;
    min-height: 58px !important;
  }

  /* Slingshot — scale down to match dog size */
  .kiba-fetch-sling {
    width: 36px !important;
    height: 44px !important;
  }

  .kiba-fetch-sling::before,
  .kiba-fetch-sling::after {
    width: 6px !important;
    height: 32px !important;
  }

  .kiba-fetch-instruction {
    font-size: 11px !important;
    padding: 7px 13px !important;
  }

  .kiba-feature-menu {
    width: min(244px, calc(100vw - 24px)) !important;
    min-width: min(220px, calc(100vw - 24px)) !important;
  }

  .kiba-nav-hint {
    top: 8px;
    max-width: min(166px, calc(100vw - 112px));
    padding: 5px 9px;
    font-size: 10px;
  }

  .kiba-menu-item {
    padding: 11px 12px !important;
    font-size: 14px !important;
    min-height: 44px;
  }

  .kiba-dog-choice {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 50px;
    gap: 8px;
  }

  .kiba-dog-choice-preview {
    width: 44px;
    height: 38px;
  }

  .kiba-dog-choice-preview .kiba-dog-svg {
    width: 49px !important;
  }

  .kiba-dog-choice-copy strong {
    font-size: 13px;
  }
}

.kiba-fetch-layer {
  position: fixed;
  inset: 0;
  z-index: 1110;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

.kiba-fetch-layer.is-resetting,
.kiba-fetch-layer.is-resetting .kiba-fetch-instruction,
.kiba-fetch-layer.is-resetting .kiba-fetch-band,
.kiba-fetch-layer.is-resetting .kiba-fetch-sling,
.kiba-fetch-layer.is-resetting .kiba-fetch-ball,
.kiba-fetch-layer.is-resetting .kiba-fetch-bark {
  opacity: 0 !important;
  pointer-events: none !important;
}

.kiba-fetch-layer.is-active {
  opacity: 1;
  pointer-events: none; /* layer is visual only — ball is the drag target */
}

/* Ball is the only interactive element in fetch mode */
.kiba-fetch-layer.is-active .kiba-fetch-ball {
  pointer-events: auto;
  cursor: grab;
}

.kiba-fetch-layer.is-aiming .kiba-fetch-ball {
  pointer-events: auto;
  cursor: grabbing;
}

.kiba-fetch-instruction {
  position: fixed;
  left: 50%;
  top: calc(var(--kft-nav-h) + 20px);
  z-index: 1113;
  transform: translateX(-50%);
  white-space: nowrap;
  max-width: calc(100vw - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--kft-accent) 32%, var(--kft-line));
  background: color-mix(in srgb, var(--kft-surface) 94%, var(--kft-accent) 6%);
  color: var(--text-ink);
  box-shadow:
    var(--kft-shadow-1),
    inset 0 1px 0 rgba(255,255,255,0.5);
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
  animation: kibaInstructionBounce 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes kibaInstructionBounce {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.94); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);    }
}

.kiba-fetch-layer.is-aiming .kiba-fetch-instruction {
  opacity: 0;
  transition: opacity 120ms ease;
}

.kiba-fetch-layer.is-launched .kiba-fetch-instruction,
.kiba-fetch-layer.is-launched .kiba-fetch-band,
.kiba-fetch-layer.is-launched .kiba-fetch-sling {
  opacity: 0;
}

.kiba-fetch-band {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.kiba-fetch-band line {
  stroke: color-mix(in srgb, var(--kft-accent) 60%, #2d3748);
  stroke-width: 3.5;
  stroke-linecap: round;
  opacity: 0.78;
  filter: drop-shadow(0 3px 6px rgba(16,24,40,0.22));
  transition: stroke 120ms ease, stroke-width 120ms ease;
}

.kiba-fetch-layer.is-aiming .kiba-fetch-band line {
  stroke: color-mix(in srgb, var(--kft-accent) 88%, #2d3748);
  stroke-width: 4;
  opacity: 0.95;
}

.kiba-fetch-layer.is-stretched .kiba-fetch-band line {
  stroke-width: 5.5;
  stroke: color-mix(in srgb, var(--kft-accent) 92%, #ff4500);
  filter: drop-shadow(0 3px 9px rgba(0,0,0,0.38));
  opacity: 1;
}

.kiba-fetch-layer.is-stretched .kiba-fetch-ball::before {
  box-shadow:
    0 2px 0 rgba(255,255,255,0.5) inset,
    0 14px 30px rgba(0,0,0,0.38),
    0 4px 8px rgba(0,0,0,0.24),
    0 0 0 5px rgba(232,90,26,0.22);
}

.kiba-fetch-sling,
.kiba-fetch-ball,
.kiba-fetch-bark {
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.kiba-fetch-sling {
  width: 44px;
  height: 52px;
  z-index: 1111;
}

/* Slingshot Y-fork: two sturdy arms spread wider for clarity */
.kiba-fetch-sling::before,
.kiba-fetch-sling::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 40px;
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, #a06a3a 0%, #6b3d1e 60%, #4a2810 100%);
  transform-origin: bottom center;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.22),
    inset -1px 0 0 rgba(0,0,0,0.18),
    0 4px 8px rgba(0,0,0,0.28);
}

.kiba-fetch-sling::before {
  transform: translateX(-50%) rotate(-28deg);
}

.kiba-fetch-sling::after {
  transform: translateX(-50%) rotate(28deg);
}

/* Handle/grip at the base */
.kiba-fetch-sling {
  --sling-done: 0;
}


.kiba-fetch-ball {
  --kiba-ball-size: 26px;
  --kiba-ball-hit: 34px;
  width: var(--kiba-ball-hit);
  height: var(--kiba-ball-hit);
  z-index: 1112;
  border-radius: 50%;
  touch-action: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: filter 160ms ease;
}

.kiba-fetch-ball::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--kiba-ball-size);
  height: var(--kiba-ball-size);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,0.68) 0 10%, transparent 12%),
    radial-gradient(circle at 50% 50%, #d4f55a 0 52%, #9acc28 53% 100%);
  border: 1.5px solid rgba(72, 106, 0, 0.28);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.5) inset,
    0 12px 22px rgba(0,0,0,0.28),
    0 4px 8px rgba(0,0,0,0.18);
  box-sizing: border-box;
  transition: width 160ms ease, height 160ms ease, box-shadow 160ms ease;
}

/* Tennis ball seam lines; the outer element stays as the touch target. */
.kiba-fetch-ball::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--kiba-ball-size) - 8px);
  height: calc(var(--kiba-ball-size) - 8px);
  border-radius: 50%;
  border-left: 2px solid rgba(255,255,255,0.72);
  border-right: 2px solid rgba(255,255,255,0.72);
  transform: translate(-50%, -50%) rotate(-32deg);
}

.kiba-fetch-ball.is-carried {
  --kiba-ball-size: 18px;
  --kiba-ball-hit: 28px;
}

.kiba-fetch-ball.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.kiba-fetch-ball.is-carried::before {
  box-shadow: 0 6px 14px rgba(0,0,0,0.22);
}

.kiba-fetch-bark {
  z-index: 1128;
  opacity: 0;
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--kft-surface);
  border: 1px solid color-mix(in srgb, var(--kft-accent) 28%, var(--kft-line));
  color: color-mix(in srgb, var(--kft-accent) 82%, var(--text-ink));
  font-size: 12px;
  font-weight: 900;
  box-shadow: var(--kft-shadow-1);
}

.kiba-fetch-bark.is-visible {
  animation: kibaFetchBark 980ms ease both;
}

.kiba-guide.fetch-ready,
.kiba-guide.is-fetch-watch,
.kiba-guide.is-fetch-run,
.kiba-guide.is-fetch-roll {
  z-index: 1125 !important;
}

.kiba-guide.fetch-ready .kiba-dog-button,
.kiba-guide.is-fetch-watch .kiba-dog-button,
.kiba-guide.is-fetch-run .kiba-dog-button,
.kiba-guide.is-fetch-roll .kiba-dog-button {
  pointer-events: none;
}

.kiba-guide.is-fetch-watch .kiba-tongue,
.kiba-guide.is-fetch-run .kiba-tongue {
  opacity: .9;
}

.kiba-guide.is-fetch-run {
  transition: left var(--kiba-run-ms, 780ms) cubic-bezier(.2,.72,.18,1), top var(--kiba-run-ms, 780ms) cubic-bezier(.2,.72,.18,1), transform 180ms ease !important;
}

.kiba-guide.is-fetch-run .kiba-dog-button {
  animation: kibaFetchBodyBob 360ms ease-in-out infinite;
}

.kiba-guide.is-fetch-run .kiba-dog-svg {
  transform-origin: 50% 74%;
  animation: kibaFetchSideLean 560ms ease-in-out infinite;
}

.kiba-guide.is-fetch-left .kiba-dog-svg {
  transform: scaleX(-1);
}

.kiba-guide.is-fetch-run .kiba-dog-tail {
  animation: kibaTail 260ms ease-in-out infinite;
}

.kiba-guide.is-fetch-run .kiba-dog-body path:nth-of-type(3),
.kiba-guide.is-fetch-run .kiba-dog-body path:nth-of-type(6) {
  transform-origin: 50% 20%;
  animation: kibaFetchLegA 260ms ease-in-out infinite;
}

.kiba-guide.is-fetch-run .kiba-dog-body path:nth-of-type(4),
.kiba-guide.is-fetch-run .kiba-dog-body path:nth-of-type(5) {
  transform-origin: 50% 20%;
  animation: kibaFetchLegB 260ms ease-in-out infinite;
}

.kiba-guide.is-fetch-roll .kiba-dog-svg {
  transform-origin: 50% 72%;
  animation: kibaFetchRoll 920ms cubic-bezier(.28,.72,.22,1) both;
}

@keyframes kibaFetchBodyBob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}

@keyframes kibaFetchSideLean {
  0%, 100% { translate: 0 0; rotate: -3deg; }
  50% { translate: 2px 1px; rotate: 4deg; }
}

@keyframes kibaFetchLegA {
  0%, 100% { transform: rotate(18deg) translateY(0); }
  50% { transform: rotate(-20deg) translateY(-2px); }
}

@keyframes kibaFetchLegB {
  0%, 100% { transform: rotate(-18deg) translateY(-2px); }
  50% { transform: rotate(20deg) translateY(0); }
}

@keyframes kibaFetchRoll {
  0% { transform: rotate(0deg) scale(1); }
  42% { transform: rotate(180deg) scale(0.94); }
  76% { transform: rotate(340deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes kibaFetchBark {
  0% { opacity: 0; transform: translate(-50%, -36%) scale(0.82); }
  18% { opacity: 1; transform: translate(-50%, -62%) scale(1); }
  76% { opacity: 1; transform: translate(-50%, -78%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -106%) scale(0.92); }
}

@keyframes kibaHintPulse {
  0%, 68%, 100% { opacity: .88; transform: scale(1); }
  78% { opacity: 1; transform: scale(1.04); }
  88% { opacity: .94; transform: scale(1); }
}

@media (max-width: 700px) {
  #kftTicker .kft-box {
    max-height: 74vh !important;
    overflow: auto !important;
  }

  #kftTicker .kft-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
  }

  #kftTicker .kft-table thead th {
    padding: 5px 1px !important;
    font-size: 8px !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
  }

  #kftTicker .kft-table tbody td {
    padding: 3px 1px !important;
    font-size: 9px !important;
  }

  #kftTicker .kft-sticky-team {
    min-width: 48px !important;
    width: 48px !important;
    max-width: 48px !important;
    padding: 4px 3px !important;
    font-size: 8.5px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  #kftTicker .kft-gw-hide {
    display: none !important;
  }

  #kftTicker .kft-cellstack {
    gap: 2px !important;
  }

  #kftTicker .kft-cell {
    min-height: 18px !important;
    padding: 2px 1px !important;
    border-radius: 5px !important;
  }

  #kftTicker .kft-opp {
    font-size: 8px !important;
    letter-spacing: 0 !important;
  }

  #kftTicker .kft-rate {
    font-size: 7px !important;
  }

  #projections .proj-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  #projections .proj-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
  }

  #projections .proj-table th,
  #projections .proj-table td {
    padding: 5px 2px !important;
    font-size: 9px !important;
    white-space: normal !important;
  }

  #projections .proj-table th:nth-child(2),
  #projections .proj-table th:nth-child(3),
  #projections .proj-table td:nth-child(2),
  #projections .proj-table td:nth-child(3) {
    display: none !important;
  }

  #projections .proj-table th:first-child,
  #projections .proj-table td:first-child {
    width: 30% !important;
  }

  #projections .proj-table .cell-pts {
    font-size: 8.5px !important;
    font-weight: 900 !important;
  }

  #projections .proj-player-cell {
    gap: 3px !important;
  }

  #projections .proj-player-copy strong {
    max-width: 92px;
    font-size: 9px !important;
    line-height: 1.1;
  }

  #projections .proj-player-copy span {
    font-size: 7.5px !important;
  }
}

/* ===== Mobile gate cleanup ===== */
@media (max-width: 560px) {
  .kft-gate {
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
  }

  .kft-gate-panel {
    width: min(100%, 420px) !important;
    max-height: min(88dvh, 620px) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .kft-gate-content {
    min-height: 0 !important;
  }

  .kft-gate-content-header {
    padding: 12px 14px 10px !important;
  }

  .kft-gate-content-label {
    font-size: 10px !important;
  }

  .kft-gate-products {
    padding: 10px 12px 8px !important;
    gap: 7px !important;
    overflow-y: auto !important;
  }

  .kft-gate-card {
    padding: 9px 10px !important;
    gap: 9px !important;
    min-height: 64px !important;
  }

  .kft-gate-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }

  .kft-gate-card h3 {
    font-size: 12.5px !important;
  }

  .kft-gate-card p {
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  .kft-gate-foot {
    padding: 10px 12px 12px !important;
    gap: 9px !important;
  }

  .kft-gate-check {
    font-size: 11px !important;
  }

  .kft-gate-continue {
    width: 100% !important;
    padding: 10px 12px !important;
  }
}

/* ===== Elevated Kiba nav: polish pass ===== */

/* Sleeping-dog attention aura — soft radial glow pulses every ~4 s to invite a tap */
.kiba-guide::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 36px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--kiba-accent) 32%, transparent) 0%, transparent 65%);
  opacity: 0;
  z-index: -1;
  transform: translate(-50%, -50%) scale(0.78);
}

.kiba-guide.is-sleeping::before {
  animation: kibaSleepAura 4.4s ease-in-out 2.8s infinite;
}

@keyframes kibaSleepAura {
  0%, 50%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.78); }
  68% { opacity: 0.86; transform: translate(-50%, -50%) scale(1.22); }
  86% { opacity: 0; transform: translate(-50%, -50%) scale(1.44); }
}

/* Spring-like menu reveal (opens with a tiny overshoot, feels physical) */
.kiba-feature-menu {
  transition:
    opacity 240ms cubic-bezier(0.2, 0.9, 0.32, 1.22),
    transform 240ms cubic-bezier(0.2, 0.9, 0.32, 1.22) !important;
}

/* Stagger each menu item in after the menu springs open */
.kiba-guide.menu-open .kiba-menu-item {
  animation: kibaItemSlideIn 250ms cubic-bezier(0.18, 1.1, 0.3, 1) both;
}
.kiba-guide.menu-open .kiba-menu-item:nth-child(2) { animation-delay: 58ms; }
.kiba-guide.menu-open .kiba-menu-item:nth-child(3) { animation-delay: 86ms; }
.kiba-guide.menu-open .kiba-menu-item:nth-child(4) { animation-delay: 112ms; }
.kiba-guide.menu-open .kiba-menu-item:nth-child(5) { animation-delay: 136ms; }
.kiba-guide.menu-open .kiba-menu-item:nth-child(6) { animation-delay: 158ms; }
.kiba-guide.menu-open .kiba-menu-item:nth-child(7) { animation-delay: 178ms; }
.kiba-guide.menu-open .kiba-menu-item:nth-child(8) { animation-delay: 196ms; }

@keyframes kibaItemSlideIn {
  0% { opacity: 0; transform: translateX(12px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Dog lifts more and gets a deeper glow when the menu is open */
.kiba-guide.menu-open .kiba-dog-button {
  transform: translateY(-6px) !important;
  filter: drop-shadow(0 20px 36px rgba(16, 24, 40, 0.30)) !important;
}

/* Active section item: vivid accent left-bar + filled indicator dot */
.kiba-menu-item.is-active {
  background: color-mix(in srgb, var(--kiba-accent) 10%, var(--bg-white)) !important;
  border-left: 2.5px solid var(--kiba-accent) !important;
  padding-left: 9.5px !important;
}

.kiba-menu-item.is-active .kiba-menu-mark {
  background: var(--kiba-accent) !important;
  border-color: var(--kiba-accent) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--kiba-accent) 52%, transparent) !important;
}

/* Accent outline ring when menu is open — ties the menu visually to the dog */
.kiba-guide.menu-open .kiba-feature-menu {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 12px 34px rgba(0, 0, 0, 0.14),
    0 32px 64px rgba(0, 0, 0, 0.10),
    var(--kft-inset),
    0 0 0 1.5px color-mix(in srgb, var(--kiba-accent) 22%, transparent) !important;
}

/* Fetch button: italic label, keeps it feeling playful vs navigation items */
.kiba-fetch-menu-item span:last-child {
  font-style: italic;
}

/* Dark mode: richer menu surface, stronger accent border */
html[data-theme="dark"] .kiba-feature-menu {
  background: color-mix(in srgb, var(--bg-paper) 65%, #1c2132) !important;
  border-color: color-mix(in srgb, var(--kiba-accent) 30%, var(--kft-line)) !important;
}

html[data-theme="dark"] .kiba-guide.menu-open .kiba-feature-menu {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.24),
    0 20px 56px rgba(0, 0, 0, 0.48),
    0 0 0 1.5px color-mix(in srgb, var(--kiba-accent) 38%, transparent) !important;
}

html[data-theme="dark"] .kiba-menu-item.is-active {
  background: color-mix(in srgb, var(--kiba-accent) 16%, transparent) !important;
}

html[data-theme="dark"] .kiba-menu-item:hover {
  background: color-mix(in srgb, var(--kiba-accent) 12%, transparent) !important;
}

/* Ball sizing for touch devices — visual size balanced against dog */
html[data-theme="dark"] .kiba-dog-choice:hover {
  background: color-mix(in srgb, var(--kiba-accent) 12%, transparent);
}

html[data-theme="dark"] .kiba-dog-choice.is-active {
  background: color-mix(in srgb, var(--kiba-accent) 18%, transparent);
}

html[data-theme="dark"] .kiba-dog-choice-preview {
  background:
    radial-gradient(ellipse at 50% 78%, rgba(0, 0, 0, 0.34), transparent 58%),
    color-mix(in srgb, var(--bg-paper) 78%, var(--kiba-accent) 10%);
}

/* Clickable hero carousel navigation */
.hero-carousel.is-navigable .hero-slide.is-active {
  cursor: pointer;
}

.hero-carousel.is-navigable .hero-slide.is-active h3,
.hero-carousel.is-navigable .hero-slide.is-active p {
  transition: color 160ms ease, transform 160ms ease;
}

.hero-carousel.is-navigable .hero-slide.is-active:hover h3 {
  color: color-mix(in srgb, var(--kft-accent) 82%, var(--text-ink));
}

.hero-carousel.is-navigable .hero-slide.is-active:hover p {
  color: color-mix(in srgb, var(--text-muted) 82%, var(--text-ink));
}

.hero-carousel-arrow {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  z-index: 5;
  right: clamp(34px, 6vw, 70px);
  bottom: clamp(24px, 3vw, 34px);
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--kft-accent) 24%, var(--kft-line));
  background:
    linear-gradient(135deg, rgba(255,255,255,0.88), rgba(255,255,255,0.58)),
    color-mix(in srgb, var(--kft-surface) 92%, var(--kft-accent) 8%);
  box-shadow:
    0 12px 30px rgba(16, 24, 40, 0.15),
    inset 0 1px 0 rgba(255,255,255,0.72);
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.hero-carousel-arrow-prev {
  right: calc(clamp(34px, 6vw, 70px) + 58px);
}

.hero-carousel-arrow span {
  position: relative;
  width: 13px;
  height: 13px;
  display: block;
  border-top: 2.5px solid color-mix(in srgb, var(--kft-accent) 88%, var(--text-ink));
  border-right: 2.5px solid color-mix(in srgb, var(--kft-accent) 88%, var(--text-ink));
}

.hero-carousel-arrow-prev span {
  transform: translateX(2px) rotate(225deg);
}

.hero-carousel-arrow-next span {
  transform: translateX(-2px) rotate(45deg);
}

.hero-carousel-arrow:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--kft-accent) 48%, var(--kft-line));
  background:
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,255,255,0.7)),
    color-mix(in srgb, var(--kft-surface) 84%, var(--kft-accent) 16%);
  box-shadow:
    0 18px 38px rgba(16, 24, 40, 0.20),
    0 0 0 1px color-mix(in srgb, var(--kft-accent) 14%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.82);
}

.hero-carousel-arrow:focus-visible {
  outline: 2px solid var(--kft-accent);
  outline-offset: 3px;
}

html[data-theme="dark"] .hero-carousel-arrow {
  background:
    linear-gradient(135deg, rgba(31,38,52,0.9), rgba(15,20,30,0.74)),
    color-mix(in srgb, var(--bg-paper) 72%, var(--kft-accent) 12%);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

@media (max-width: 768px) {
  .hero-carousel {
    touch-action: pan-y;
  }

  .hero-carousel-arrow {
    display: none !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .kiba-fetch-ball {
    --kiba-ball-size: 20px;
    --kiba-ball-hit: 48px;
  }

  /* Keep a generous invisible tap zone without inflating the visible ball. */
  .kiba-fetch-layer.is-active .kiba-fetch-ball {
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Reduce motion: skip all new animations */
@media (prefers-reduced-motion: reduce) {
  .kiba-guide::before { display: none !important; }
  .kiba-guide.menu-open .kiba-menu-item { animation: none !important; }
  .kiba-feature-menu { transition: opacity 120ms ease !important; }
}

/* ===== Premium opening tour for index gate ===== */
.kft-gate {
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 2vw, 24px) !important;
  background:
    linear-gradient(135deg, rgba(6, 8, 14, 0.92), rgba(15, 20, 30, 0.82)),
    rgba(6, 8, 14, 0.86) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

.kft-gate-logo-beat {
  display: flex !important;
}

.kft-gate-logo-beat img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 14px !important;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255,255,255,0.16) !important;
}

.kft-gate-panel {
  width: min(860px, 100%) !important;
  min-height: min(560px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: color-mix(in srgb, var(--bg-white) 94%, #ffffff 6%) !important;
  box-shadow:
    0 36px 110px rgba(0, 0, 0, 0.54),
    0 0 0 1px rgba(255,255,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

.kft-gate-brand {
  display: none !important;
}

.kft-gate-brand::before,
.kft-gate-brand::after {
  display: none !important;
}

.kft-gate-brand-top {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.kft-gate-brand-logo {
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,0.32),
    0 0 0 1px rgba(255,255,255,0.18) !important;
}

.kft-gate-brand-name {
  margin: 0 0 3px !important;
  color: rgba(255,255,255,0.82) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
}

.kft-gate-brand-mark {
  margin: 0;
  color: rgba(255,255,255,0.52);
  font-size: 12px;
  font-weight: 760;
}

.kft-gate-brand-title {
  margin: auto 0 18px !important;
  max-width: 12ch;
  color: #fff !important;
  font-size: clamp(2.35rem, 4.7vw, 4.4rem) !important;
  line-height: 0.94 !important;
  letter-spacing: 0 !important;
  font-weight: 930 !important;
}

.kft-gate-brand-desc {
  max-width: 30ch;
  margin: 0 !important;
  color: rgba(255,255,255,0.68) !important;
  font-size: 14px !important;
  line-height: 1.62 !important;
}

.kft-gate-signal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 8px;
  height: 84px;
  margin-top: 34px;
  position: relative;
  z-index: 1;
}

.kft-gate-signal span {
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(255,95,31,0.95), rgba(255,255,255,0.16));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.26);
}

.kft-gate-content {
  flex: 1 !important;
  min-width: 0;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-white) 96%, var(--kft-accent) 4%), var(--bg-white));
}

.kft-gate-content-header {
  padding: 20px 24px 0 !important;
  border-bottom: 0 !important;
}

.kft-gate-content-label {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
}

.kft-gate-close {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--bg-white) 86%, var(--kft-accent) 6%) !important;
}

.kft-gate-tour {
  position: relative;
  min-height: 430px;
  padding: clamp(20px, 3vw, 40px) clamp(24px, 4vw, 54px) 20px;
  touch-action: pan-y;
}

.kft-gate-step {
  position: absolute;
  inset: clamp(20px, 3vw, 40px) clamp(24px, 4vw, 54px) 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.kft-gate-step.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.kft-gate-step-count {
  color: var(--kft-accent);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.14em;
}

.kft-gate-step h3 {
  max-width: 12.5ch;
  margin: 0;
  color: var(--text-ink);
  font-size: clamp(2rem, 4.3vw, 4rem);
  line-height: 0.98;
  font-weight: 930;
  letter-spacing: 0;
}

.kft-gate-step p {
  max-width: 46ch;
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.58;
  font-weight: 650;
}

.kft-gate-kiba-preview {
  width: 92px;
  min-height: 72px;
  margin: 2px 0 0;
  color: var(--kft-accent);
  filter: drop-shadow(0 14px 20px rgba(16, 24, 40, 0.18));
}

.kft-gate-kiba-preview .kiba-dog-svg {
  display: block;
  width: 100%;
  height: auto;
}

.kft-gate-lineup,
.kft-gate-flow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.kft-gate-lineup span,
.kft-gate-flow span {
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--kft-accent) 18%, var(--kft-line));
  background: color-mix(in srgb, var(--kft-surface) 90%, var(--kft-accent) 5%);
  color: var(--text-ink);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.kft-gate-products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
  padding: 8px 0 0 !important;
  overflow: visible !important;
}

.kft-gate-card {
  min-height: 112px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 10px 12px !important;
  padding: 14px !important;
  border-radius: 8px !important;
  border-color: color-mix(in srgb, var(--gc) 20%, var(--kft-line)) !important;
  background: color-mix(in srgb, var(--bg-white) 93%, var(--gc) 4%) !important;
  opacity: 1 !important;
  transform: none !important;
}

.kft-gate-card::before,
.kft-gate-icon {
  display: none !important;
}

.kft-gate-index {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gc);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
}

.kft-gate-card-body {
  display: grid !important;
  gap: 3px !important;
}

.kft-gate-label {
  color: var(--gc) !important;
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
}

.kft-gate-card h3 {
  font-size: 14px !important;
  font-weight: 910 !important;
}

.kft-gate-card p {
  font-size: 11px !important;
  line-height: 1.42 !important;
}

.kft-gate-arrow {
  grid-column: 1 / -1;
  color: var(--gc) !important;
  font-size: 11px !important;
  font-weight: 930;
  letter-spacing: 0.02em;
}

.kft-gate-foot {
  display: grid !important;
  grid-template-columns: 1fr auto auto;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 24px 24px !important;
  border-top: 0 !important;
}

.kft-gate-tour-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.kft-gate-tour-btn {
  all: unset;
  box-sizing: border-box;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid var(--kft-line);
  color: var(--text-ink);
  background: var(--kft-surface);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.kft-gate-tour-btn:disabled {
  opacity: 0.42;
  cursor: default;
}

.kft-gate-dots {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.kft-gate-dots button {
  all: unset;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-muted) 34%, transparent);
  cursor: pointer;
}

.kft-gate-dots button.is-active {
  width: 24px;
  border-radius: 999px;
  background: var(--kft-accent);
}

.kft-gate-check {
  color: var(--text-muted) !important;
}

.kft-gate-continue {
  min-height: 42px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  background: var(--kft-accent) !important;
}

html[data-theme="dark"] .kft-gate-panel {
  background: #151a22 !important;
  box-shadow:
    0 36px 110px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(255,255,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

html[data-theme="dark"] .kft-gate-content {
  background:
    linear-gradient(180deg, color-mix(in srgb, #151a22 92%, var(--kft-accent) 8%), #151a22);
}

html[data-theme="dark"] .kft-gate-card {
  background: color-mix(in srgb, #1d2430 90%, var(--gc) 6%) !important;
}

@media (max-width: 860px) {
  .kft-gate-panel {
    grid-template-columns: 1fr !important;
    min-height: 0;
    width: min(100%, 560px) !important;
  }

  .kft-gate-brand {
    min-height: auto;
    padding: 22px 24px !important;
  }

  .kft-gate-brand-title {
    margin: 24px 0 10px !important;
    max-width: 18ch;
    font-size: clamp(1.9rem, 8vw, 3rem) !important;
  }

  .kft-gate-signal {
    display: none;
  }

  .kft-gate-tour {
    min-height: 390px;
  }

  .kft-gate-products {
    grid-template-columns: 1fr;
  }

  .kft-gate-card {
    min-height: 82px !important;
  }
}

@media (max-width: 560px) {
  .kft-gate {
    align-items: flex-end !important;
    padding: 8px !important;
  }

  .kft-gate-panel {
    width: 100% !important;
    min-height: 0 !important;
    max-height: min(94dvh, 680px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    border-radius: 14px 14px 8px 8px !important;
  }

  .kft-gate-brand {
    display: none !important;
  }

  .kft-gate-content {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden !important;
  }

  .kft-gate-content-header {
    padding: 14px 16px 4px !important;
  }

  .kft-gate-tour {
    height: clamp(270px, 50dvh, 360px);
    min-height: 0;
    padding: 18px 18px 8px;
    overflow: hidden;
    user-select: none;
  }

  .kft-gate-step {
    inset: 18px 18px 8px;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
  }

  .kft-gate-step h3 {
    max-width: 14ch;
    font-size: clamp(1.58rem, 8vw, 2.1rem) !important;
    line-height: 1.02 !important;
  }

  .kft-gate-step p {
    font-size: 13px !important;
    line-height: 1.52 !important;
  }

  .kft-gate-lineup,
  .kft-gate-flow,
  .kft-gate-tour-btn {
    display: none !important;
  }

  .kft-gate-tour-controls {
    justify-content: center;
    width: 100%;
  }

  .kft-gate-foot {
    grid-template-columns: 1fr !important;
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom)) !important;
    gap: 9px !important;
  }

  .kft-gate-continue {
    width: 100% !important;
  }
}

/* ===== Sister-page gradient system + responsive opening motion ===== */
body.kft-page-analytics {
  --kft-page-gradient:
    linear-gradient(126deg, color-mix(in srgb, #fff8ef 78%, var(--kft-accent) 22%) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(218deg, color-mix(in srgb, #eef6ff 82%, var(--kft-accent-2) 18%) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, #fffdfa 0%, color-mix(in srgb, var(--bg-paper) 86%, #eaf2ee 14%) 54%, color-mix(in srgb, #f4f8fb 82%, var(--kft-support-a) 18%) 100%);
  --kft-page-grid: rgba(232, 90, 26, 0.075);
  --kft-page-stripe: rgba(47, 128, 237, 0.055);
}

body.kft-page-live {
  --kft-page-gradient:
    linear-gradient(126deg, color-mix(in srgb, #effaf4 76%, var(--kft-accent) 24%) 0%, rgba(255,255,255,0) 44%),
    linear-gradient(222deg, color-mix(in srgb, #edf6ff 80%, var(--kft-accent-2) 20%) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #f7fbf7 0%, color-mix(in srgb, var(--bg-paper) 84%, #e7f3ec 16%) 56%, #edf5f8 100%);
  --kft-page-grid: rgba(31, 138, 91, 0.085);
  --kft-page-stripe: rgba(47, 128, 237, 0.058);
}

body.kft-page-profile {
  --kft-page-gradient:
    linear-gradient(128deg, color-mix(in srgb, #f7f0ff 76%, var(--kft-accent) 24%) 0%, rgba(255,255,255,0) 44%),
    linear-gradient(220deg, color-mix(in srgb, #eef6ff 78%, var(--kft-accent-2) 22%) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #fbf8ff 0%, color-mix(in srgb, var(--bg-paper) 84%, #f1ecfb 16%) 54%, color-mix(in srgb, #f5f9f4 82%, var(--kft-support-a) 18%) 100%);
  --kft-page-grid: rgba(122, 63, 242, 0.076);
  --kft-page-stripe: rgba(31, 138, 91, 0.055);
}

body.kft-page-planner {
  --kft-page-gradient:
    linear-gradient(126deg, color-mix(in srgb, #fff2f3 76%, var(--kft-accent) 24%) 0%, rgba(255,255,255,0) 43%),
    linear-gradient(220deg, color-mix(in srgb, #f5f1ff 80%, var(--kft-support-b) 20%) 0%, rgba(255,255,255,0) 51%),
    linear-gradient(180deg, #fffafa 0%, color-mix(in srgb, var(--bg-paper) 84%, #f6eeee 16%) 54%, color-mix(in srgb, #eff7f2 84%, var(--kft-support-a) 16%) 100%);
  --kft-page-grid: rgba(178, 34, 52, 0.078);
  --kft-page-stripe: rgba(122, 63, 242, 0.052);
}

body[class*="kft-page-"] {
  background: var(--kft-page-gradient) !important;
  background-attachment: fixed !important;
}

body[class*="kft-page-"]::before {
  background-image:
    linear-gradient(var(--kft-page-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--kft-page-grid) 1px, transparent 1px),
    repeating-linear-gradient(118deg, transparent 0 92px, var(--kft-page-stripe) 92px 93px, transparent 93px 184px) !important;
  background-size: 44px 44px, 44px 44px, 220px 220px !important;
  opacity: 0.62 !important;
}

html[data-theme="dark"] body.kft-page-analytics,
html[data-theme="dark"] body.kft-page-live,
html[data-theme="dark"] body.kft-page-profile,
html[data-theme="dark"] body.kft-page-planner {
  --kft-page-grid: color-mix(in srgb, var(--kft-accent) 18%, transparent);
  --kft-page-stripe: color-mix(in srgb, var(--kft-accent-2) 14%, transparent);
  --kft-page-gradient:
    linear-gradient(126deg, color-mix(in srgb, #10141b 80%, var(--kft-accent) 20%) 0%, rgba(16,20,27,0) 46%),
    linear-gradient(220deg, color-mix(in srgb, #0f141c 78%, var(--kft-accent-2) 22%) 0%, rgba(16,20,27,0) 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-paper) 88%, #171b22 12%) 0%, var(--bg-paper) 58%, #090c11 100%);
}

/* Interactive folder hero navigation. */
body[class*="kft-page-"] .hero-suite-strip {
  display: none !important;
}

.kft-folder-nav {
  --folder-accent: var(--kft-accent);
  width: min(100%, 680px);
  min-height: 0;
  margin: clamp(0px, 1vw, 8px) auto 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  z-index: 4;
  overflow: visible;
}

.kft-folder-stage {
  position: relative;
  width: min(100%, 650px);
  height: 116px;
  perspective: 1100px;
  overflow: visible;
}

.kft-folder-toggle {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 158px;
  height: 112px;
  transform: translateX(-50%);
  cursor: pointer;
  display: block;
  z-index: 30;
}

.kft-folder-toggle:focus-visible {
  outline: 2px solid var(--folder-accent);
  outline-offset: 8px;
  border-radius: 18px;
}

.kft-folder-back,
.kft-folder-tab,
.kft-folder-front {
  position: absolute;
  box-shadow: 0 16px 32px rgba(16, 24, 40, 0.12);
}

.kft-folder-back {
  left: 8px;
  right: 8px;
  bottom: 10px;
  height: 86px;
  border-radius: 8px 16px 16px 16px;
  background: color-mix(in srgb, var(--folder-accent) 78%, #171b22 22%);
}

.kft-folder-tab {
  left: 8px;
  bottom: 94px;
  width: 48px;
  height: 15px;
  border-radius: 8px 8px 0 0;
  background: color-mix(in srgb, var(--folder-accent) 78%, #171b22 22%);
}

.kft-folder-front {
  left: 8px;
  right: 8px;
  bottom: 10px;
  height: 86px;
  z-index: 4;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--folder-accent) 86%, #fff 14%), var(--folder-accent));
  border: 1px solid color-mix(in srgb, var(--folder-accent) 78%, #fff 22%);
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1), filter 420ms ease;
  transform-origin: 50% 100%;
}

.kft-folder-front-left {
  border-radius: 8px 0 0 16px;
  clip-path: polygon(0 0, 52% 0, 52% 100%, 0 100%);
}

.kft-folder-front-right {
  border-radius: 0 16px 16px 0;
  clip-path: polygon(48% 0, 100% 0, 100% 100%, 48% 100%);
}

.kft-folder-nav.is-open .kft-folder-front-left {
  transform: skewX(14deg) scaleY(.62) translateY(6px);
  filter: brightness(.98);
}

.kft-folder-nav.is-open .kft-folder-front-right {
  transform: skewX(-14deg) scaleY(.62) translateY(6px);
  filter: brightness(.98);
}

.kft-folder-label {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  transition: opacity 240ms ease, transform 240ms ease;
  pointer-events: none;
}

.kft-folder-nav.is-open .kft-folder-label {
  opacity: 0;
  transform: translate(-50%, 8px);
}

.kft-folder-papers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}

.kft-folder-paper {
  --drift-x: 0px;
  --drift-y: 0px;
  position: absolute;
  left: 50%;
  bottom: 42px;
  width: 154px;
  min-height: 98px;
  padding: 13px 13px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--text-ink);
  text-decoration: none;
  text-align: center;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--paper-accent) 24%, var(--kft-line));
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), color-mix(in srgb, #fff 82%, var(--paper-accent) 18%));
  box-shadow: 0 16px 34px rgba(16, 24, 40, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 34px) rotate(0deg) scale(.76);
  transition:
    opacity 260ms ease,
    transform 560ms cubic-bezier(.2, 1.05, .26, 1),
    border-color 180ms ease,
    box-shadow 180ms ease;
  z-index: calc(20 - var(--paper-index));
}

.kft-folder-nav.is-open .kft-folder-paper {
  opacity: 1;
  pointer-events: auto;
}

.kft-folder-nav.is-open .kft-folder-paper:nth-child(1) {
  transform: translate(calc(-50% - 228px + var(--drift-x)), calc(-18px + var(--drift-y))) rotate(-13deg);
}

.kft-folder-nav.is-open .kft-folder-paper:nth-child(2) {
  transform: translate(calc(-50% - 76px + var(--drift-x)), calc(-42px + var(--drift-y))) rotate(-4deg);
}

.kft-folder-nav.is-open .kft-folder-paper:nth-child(3) {
  transform: translate(calc(-50% + 76px + var(--drift-x)), calc(-42px + var(--drift-y))) rotate(5deg);
}

.kft-folder-nav.is-open .kft-folder-paper:nth-child(4) {
  transform: translate(calc(-50% + 228px + var(--drift-x)), calc(-18px + var(--drift-y))) rotate(14deg);
}

.kft-folder-paper:hover,
.kft-folder-paper:focus-visible,
.kft-folder-paper.is-current {
  border-color: color-mix(in srgb, var(--paper-accent) 72%, #fff 28%);
  box-shadow: 0 20px 42px color-mix(in srgb, var(--paper-accent) 22%, rgba(16, 24, 40, 0.18));
}

.kft-folder-paper:focus-visible {
  outline: 2px solid var(--paper-accent);
  outline-offset: 3px;
}

.kft-folder-paper-kicker {
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper-accent);
}

.kft-folder-paper strong {
  font-size: 17px;
  line-height: 1.05;
  letter-spacing: 0;
}

.kft-folder-paper-lines {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.kft-folder-paper-lines i {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--text-muted) 80%, var(--paper-accent) 20%);
  padding: 4px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-accent) 9%, transparent);
}

html[data-theme="dark"] .kft-folder-paper {
  color: var(--text-ink);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-white) 86%, var(--paper-accent) 14%), color-mix(in srgb, var(--bg-paper) 88%, var(--paper-accent) 12%));
  box-shadow: 0 18px 38px rgba(0,0,0,.34);
}

@media (max-width: 760px) {
  .kft-folder-nav {
    width: 100%;
    min-height: 0;
    margin-top: -4px;
    overflow: visible;
  }

  .kft-folder-stage {
    height: 110px;
    width: min(100%, 360px);
    overflow: visible;
  }

  .kft-folder-toggle {
    width: 148px;
    height: 106px;
    bottom: 2px;
  }

  .kft-folder-paper {
    width: 138px;
    min-height: 90px;
    padding: 11px 10px;
    bottom: 44px;
  }

  .kft-folder-paper strong {
    font-size: 15px;
  }

  .kft-folder-paper-lines i {
    font-size: 9px;
    padding: 4px 5px;
  }

  .kft-folder-nav.is-open .kft-folder-paper:nth-child(1) {
    transform: translate(calc(-50% - 82px + var(--drift-x)), calc(-104px + var(--drift-y))) rotate(-9deg);
  }

  .kft-folder-nav.is-open .kft-folder-paper:nth-child(2) {
    transform: translate(calc(-50% + 82px + var(--drift-x)), calc(-104px + var(--drift-y))) rotate(8deg);
  }

  .kft-folder-nav.is-open .kft-folder-paper:nth-child(3) {
    transform: translate(calc(-50% - 82px + var(--drift-x)), calc(4px + var(--drift-y))) rotate(8deg);
  }

  .kft-folder-nav.is-open .kft-folder-paper:nth-child(4) {
    transform: translate(calc(-50% + 82px + var(--drift-x)), calc(4px + var(--drift-y))) rotate(-7deg);
  }
}

/* Folder nav logo replacement */
.kft-folder-logo-img,
.kft-folder-logo-video {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 96px;
  height: 96px;
  transform: translateX(-50%);
  border-radius: 50%;
  object-fit: cover;
  transition: transform 380ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.kft-folder-logo-picture {
  display: block;
}

.kft-folder-logo-video {
  background: #05070b;
}

.kft-folder-nav.is-open .kft-folder-logo-img,
.kft-folder-nav.is-open .kft-folder-logo-video {
  transform: translateX(-50%) scale(1.07);
}

@media (max-width: 760px) {
  .kft-folder-logo-img,
  .kft-folder-logo-video {
    width: 84px;
    height: 84px;
    bottom: 6px;
  }
}

/* Digital deadline clock. */
.xgi-deadline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 4px;
}

.kft-dclock {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-family: 'Courier New', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-white) 85%, var(--kft-accent) 10%);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 6px;
  padding: 2px 7px;
  line-height: 1.4;
}

.kft-dclock.is-soon { color: #d4900a; background: rgba(242,177,52,0.1); border-color: rgba(242,177,52,0.35); }
.kft-dclock.is-urgent { color: #c0392b; background: rgba(224,79,95,0.1); border-color: rgba(224,79,95,0.35); animation: kftDcUrgentFade 1s step-end infinite; }
.kft-dclock.is-expired { color: var(--text-muted); opacity: 0.5; }
.kft-dc-col { opacity: 0.5; animation: kftDcBlink 1s step-end infinite; }
.kft-dclock.is-urgent .kft-dc-col { animation: kftDcBlink 0.5s step-end infinite; }
@keyframes kftDcBlink { 0%,100%{opacity:0.5;} 50%{opacity:0;} }
@keyframes kftDcUrgentFade { 0%,100%{opacity:1;} 50%{opacity:0.65;} }

/* Rolling deadline counters (kept for other uses). */
.deadline-timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
}

.rolling-counter {
  --roll-bg: color-mix(in srgb, var(--bg-white) 84%, var(--kft-accent) 8%);
  --roll-h: 1.18em;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 8px;
  border-radius: 7px;
  overflow: hidden;
  color: currentColor;
  background: var(--roll-bg);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52), 0 6px 16px rgba(16,24,40,.08);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
  vertical-align: middle;
  isolation: isolate;
}

.rolling-counter::before,
.rolling-counter::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 38%;
  z-index: 3;
  pointer-events: none;
}

.rolling-counter::before {
  top: 0;
  background: linear-gradient(to bottom, var(--roll-bg), transparent);
}

.rolling-counter::after {
  bottom: 0;
  background: linear-gradient(to top, var(--roll-bg), transparent);
}

.rolling-place {
  position: relative;
  z-index: 2;
  width: .64em;
  height: var(--roll-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rolling-place.is-separator {
  width: auto;
  min-width: .24em;
  overflow: visible;
  opacity: .84;
  font-size: .9em;
  padding: 0 1px;
}

.rolling-place.is-space {
  min-width: .32em;
}

.rolling-track {
  display: flex;
  flex-direction: column;
  transform: translateY(var(--roll-offset, 0%));
  transition: transform 640ms cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

.rolling-track span {
  height: var(--roll-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

.deadline-bar .rolling-counter {
  --roll-bg: color-mix(in srgb, var(--bg-white) 82%, var(--kft-accent) 10%);
  font-size: 13px;
  font-weight: 950;
  color: currentColor;
}

.deadline-bar.soon .rolling-counter {
  --roll-bg: color-mix(in srgb, #fff7e8 82%, #f4a62a 18%);
}

.deadline-bar.urgent .rolling-counter {
  --roll-bg: color-mix(in srgb, #fff0f2 78%, var(--signal-red) 22%);
}

.xgi-deadline .rolling-counter {
  --roll-bg: color-mix(in srgb, var(--bg-white) 80%, var(--kft-accent) 10%);
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 950;
}

html[data-theme="dark"] .rolling-counter {
  --roll-bg: color-mix(in srgb, var(--bg-white) 78%, var(--kft-accent) 10%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.28);
}

/* ═══════════════════════════════════════════════════════════
   KFT Dock Control Bar — macOS‑style magnification control dock
   ═══════════════════════════════════════════════════════════ */
.kft-dock-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 7px;
  background: color-mix(in srgb, var(--bg-white) 93%, var(--bg-paper));
  border: 1px solid var(--kft-soft-line, rgba(0,0,0,0.08));
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(16,24,40,0.07), inset 0 1px 0 rgba(255,255,255,0.72);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 14px;
  overflow: visible;
  flex-wrap: nowrap;
}

.kft-dock-sep {
  width: 1px;
  height: 18px;
  background: var(--kft-soft-line, rgba(0,0,0,0.09));
  flex-shrink: 0;
  margin: 0 3px;
  align-self: center;
}

.kft-dock-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border-radius: 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted) !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  white-space: nowrap;
  line-height: 1;
  transform-origin: center bottom;
}

.kft-dock-item:hover {
  background: color-mix(in srgb, var(--kft-accent, #E85A1A) 9%, var(--bg-white)) !important;
  border-color: color-mix(in srgb, var(--kft-accent, #E85A1A) 26%, var(--kft-soft-line, rgba(0,0,0,0.08))) !important;
  color: var(--text-ink) !important;
  transform: none !important;
}

.kft-dock-item.active,
.kft-dock-item.is-active {
  background: color-mix(in srgb, var(--kft-accent, #E85A1A) 13%, var(--bg-white)) !important;
  border-color: color-mix(in srgb, var(--kft-accent, #E85A1A) 36%, transparent) !important;
  color: var(--kft-accent, #E85A1A) !important;
}

.kft-dock-item:disabled,
.kft-dock-item[disabled] {
  opacity: 0.32 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.kft-dock-accent {
  background: color-mix(in srgb, var(--kft-accent, #E85A1A) 11%, var(--bg-white)) !important;
  border-color: color-mix(in srgb, var(--kft-accent, #E85A1A) 24%, transparent) !important;
  color: var(--kft-accent, #E85A1A) !important;
}
.kft-dock-accent:hover {
  background: var(--kft-accent, #E85A1A) !important;
  color: #fff !important;
  border-color: color-mix(in srgb, var(--kft-accent, #E85A1A) 70%, #000) !important;
}

/* Checkbox-backed toggle item: checked state via :has() */
.kft-dock-toggle { cursor: pointer; }
.kft-dock-toggle:has(input:checked) {
  background: color-mix(in srgb, var(--kft-accent, #E85A1A) 13%, var(--bg-white)) !important;
  border-color: color-mix(in srgb, var(--kft-accent, #E85A1A) 36%, transparent) !important;
  color: var(--kft-accent, #E85A1A) !important;
}

/* Popover tooltip via data-tip attribute */
.kft-dock-item[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: color-mix(in srgb, var(--bg-white) 97%, var(--bg-paper));
  border: 1px solid var(--kft-line, rgba(0,0,0,0.12));
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-ink);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.14s ease, transform 0.14s ease;
  box-shadow: 0 4px 14px rgba(16,24,40,0.14);
  z-index: 200;
}
.kft-dock-item[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Non-interactive label (GW number, etc.) */
.kft-dock-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-ink);
  padding: 0 5px;
  min-width: 44px;
  text-align: center;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Inline search field */
.kft-dock-search {
  height: 32px;
  padding: 0 10px;
  border-radius: 10px !important;
  border: 1px solid var(--kft-soft-line, rgba(0,0,0,0.09)) !important;
  background: color-mix(in srgb, var(--bg-white) 97%, var(--bg-paper)) !important;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-ink) !important;
  width: 120px;
  transition: border-color 0.15s, box-shadow 0.15s, width 0.28s cubic-bezier(0.4,0,0.2,1);
  outline: none;
  flex-shrink: 0;
  box-shadow: none !important;
}
.kft-dock-search:focus {
  width: 162px;
  border-color: color-mix(in srgb, var(--kft-accent, #E85A1A) 60%, var(--kft-line, rgba(0,0,0,0.12))) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kft-accent, #E85A1A) 14%, transparent) !important;
}
.kft-dock-search::placeholder { opacity: 0.6; }

/* Inline select field */
.kft-dock-select {
  height: 32px !important;
  padding: 0 8px !important;
  border-radius: 10px !important;
  border: 1px solid var(--kft-soft-line, rgba(0,0,0,0.09)) !important;
  background: color-mix(in srgb, var(--bg-white) 97%, var(--bg-paper)) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-ink) !important;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
  max-width: 140px;
  box-shadow: none !important;
}
.kft-dock-select:focus {
  border-color: color-mix(in srgb, var(--kft-accent, #E85A1A) 60%, var(--kft-line, rgba(0,0,0,0.12))) !important;
}

/* Price range filter strip (conditionally shown) */
.kft-dock-price-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.kft-dock-price-input {
  width: 64px;
  height: 28px;
  padding: 0 6px;
  border-radius: 8px;
  border: 1px solid var(--kft-soft-line, rgba(0,0,0,0.09));
  background: var(--bg-white);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-ink);
  text-align: center;
  outline: none;
}

/* Stat block (FT, Bank, Hit, xPts) */
.kft-dock-ctrl-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 1px 7px;
  flex-shrink: 0;
}
.kft-dock-ctrl-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  line-height: 1;
  white-space: nowrap;
}

html[data-theme="dark"] .kft-dock-bar {
  background: var(--bg-white, #151820) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ═══════════════════════════════════════════════════════════
   KFT Dock Cover — animated pill label reveal
   ═══════════════════════════════════════════════════════════ */
.kft-dock-cover {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0 auto 14px;
}

.kft-dock-cover.open {
  z-index: 1020;
}

.kft-dock-cover > .kft-dock-bar,
.kft-dock-cover > .kft-control-deck-panel {
  margin: 0 !important;
}

.kft-dock-cover > .kft-dock-bar,
.kft-dock-cover > .kft-control-deck-panel {
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px) scale(0.985);
  filter: saturate(0.88);
  transition:
    opacity 0.26s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.26s cubic-bezier(0.18, 0.72, 0.22, 1),
    filter 0.26s ease;
}

.kft-dock-cover.open > .kft-dock-bar,
.kft-dock-cover.open > .kft-control-deck-panel {
  opacity: 1;
  pointer-events: all;
  position: relative;
  z-index: 1021;
  transform: none;
  filter: none;
  touch-action: pan-y;
}

.kft-cover-pill {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 8px 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #1C1C1E 90%, var(--kft-accent, #FF5F1F)), #111214);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--kft-accent, #FF5F1F) 32%, rgba(255,255,255,0.2));
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0 !important;
  white-space: nowrap;
  cursor: pointer;
  transform: translate(-50%, -50%);
  overflow: hidden;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s, border-color 0.15s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.18);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  pointer-events: all;
}

.kft-cover-pill::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 0 35%, rgba(255,255,255,0.22) 50%, transparent 65% 100%);
  transform: translateX(-120%);
  animation: kftControlDeckScan 2.8s ease-in-out infinite;
}

.kft-cover-pill > * {
  position: relative;
  z-index: 1;
}

.kft-cover-pill:hover {
  background: color-mix(in srgb, #1C1C1E 82%, var(--kft-accent, #FF5F1F));
  border-color: color-mix(in srgb, var(--kft-accent, #FF5F1F) 58%, rgba(255,255,255,0.22));
  transform: translate(-50%, -50%) scale(1.02);
}

.kft-dock-cover.open .kft-cover-pill {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.88) translateY(-2px);
  pointer-events: none;
}

html[data-theme="dark"] .kft-cover-pill {
  background: color-mix(in srgb, #000 90%, #fff);
  box-shadow: 0 2px 16px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.32);
}

/* Control Deck close/minimize button */
.kft-deck-close {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%) translateX(3px);
  z-index: 1025;
  opacity: 0;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.kft-deck-close:hover {
  background: rgba(255,255,255,0.16);
  color: #fff;
  border-color: rgba(255,255,255,0.28);
}
.kft-dock-cover.open .kft-deck-close {
  opacity: 1;
  pointer-events: all;
  transform: translateY(-50%) translateX(0);
}
.kft-dock-cover.open > .kft-dock-bar,
.kft-dock-cover.open > .kft-control-deck-panel {
  padding-right: 44px !important;
}

@media (max-width: 700px) {
  .kft-dock-cover {
    align-items: stretch;
  }

  .kft-dock-cover.open > .kft-dock-bar,
  .kft-dock-cover.open > .kft-control-deck-panel {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 72vh !important;
    min-height: 0 !important;
    padding: 36px 8px 6px !important;
    border-radius: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .kft-dock-cover.open > .kft-control-deck-panel > .kft-dock-sep {
    display: none !important;
  }

  .kft-dock-cover.open > .kft-control-deck-panel > .kft-dock-search {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .kft-dock-cover.open > .kft-control-deck-panel > :is(
    .brk-menu-wrap,
    .kft-dock-item,
    button:not(.kft-cover-pill),
    a,
    label,
    select,
    input,
    .gw-select-wrap,
    .kft-dock-label,
    .kft-dock-ctrl-block
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .kft-dock-cover.open > .kft-control-deck-panel > :is(
    .brk-menu-wrap,
    .kft-dock-item,
    button:not(.kft-cover-pill),
    a,
    label,
    select,
    .gw-select-wrap
  ) {
    flex: 1 1 calc(50% - 8px) !important;
  }

  .kft-dock-cover.open > .kft-control-deck-panel > .brk-menu-wrap > .kft-dock-item,
  .kft-dock-cover.open > .kft-control-deck-panel > .brk-menu-wrap > button {
    width: 100% !important;
  }

  .kft-dock-cover.open > .kft-control-deck-panel > .kft-dock-label,
  .kft-dock-cover.open > .kft-control-deck-panel > .xgi-deadline {
    flex: 1 1 auto !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .kft-dock-cover.open > .kft-control-deck-panel > .kft-dl-btn {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 36px !important;
    border-radius: 12px !important;
  }

  .kft-dock-cover.open > .kft-control-deck-panel > :is(.kft-row, .kft-hint, .kft-hidden) {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .kft-dock-cover.open > .kft-control-deck-panel :is(.kft-row, .kft-row-left, .kft-row-right) {
    flex-wrap: wrap !important;
    justify-content: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .kft-dock-cover.open > .kft-control-deck-panel :is(.kft-row-left, .kft-row-right) > :is(button, a, label, select, input, .kft-btn) {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .kft-deck-close {
    top: 7px;
    right: 7px;
    transform: none;
    width: 28px;
    height: 28px;
  }
  .kft-dock-cover.open .kft-deck-close {
    transform: none;
  }
  .kft-dock-cover.open > .kft-control-deck-panel .kft-dock-item,
  .kft-dock-cover.open > .kft-dock-bar .kft-dock-item {
    height: 30px !important;
    font-size: 11px !important;
    padding: 0 8px !important;
  }
}

@keyframes kftControlDeckScan {
  0%, 48% { transform: translateX(-120%); }
  72%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .kft-dock-cover > .kft-control-deck-panel,
  .kft-cover-pill {
    transition: none !important;
  }

  .kft-cover-pill::before {
    animation: none !important;
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   KFT Animated Checkbox  (adapted from Uiverse.io / mrhyddenn)
   Usage: <input type="checkbox" style="display:none"> <span class="kft-check"><svg…></span>
   ═══════════════════════════════════════════════════════════ */
.kft-check {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(0, 0, 0);
}
.kft-check::before {
  content: "";
  position: absolute;
  top: -13px;
  left: -13px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kft-accent, #E85A1A) 10%, transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.kft-check svg {
  position: relative;
  z-index: 1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #c8ccd4;
  stroke-width: 1.5;
  transform: translate3d(0, 0, 0);
  transition: stroke 0.2s ease;
}
.kft-check svg path {
  stroke-dasharray: 60;
  stroke-dashoffset: 0;
}
.kft-check svg polyline {
  stroke-dasharray: 22;
  stroke-dashoffset: 66;
}
label:hover .kft-check::before { opacity: 1; }
label:hover .kft-check svg { stroke: var(--kft-accent, #E85A1A); }

input[type="checkbox"]:checked + .kft-check svg {
  stroke: var(--kft-accent, #E85A1A);
}
input[type="checkbox"]:checked + .kft-check svg path {
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 0.3s linear;
}
input[type="checkbox"]:checked + .kft-check svg polyline {
  stroke-dashoffset: 42;
  transition: stroke-dashoffset 0.2s linear 0.15s;
}

input[type="radio"]:checked + .kft-check svg {
  stroke: var(--kft-accent, #E85A1A);
}
input[type="radio"]:checked + .kft-check svg path {
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 0.3s linear;
}
input[type="radio"]:checked + .kft-check svg polyline {
  stroke-dashoffset: 42;
  transition: stroke-dashoffset 0.2s linear 0.15s;
}

/* Suppress the ripple ring inside compact dock items */
.kft-dock-item .kft-check::before { display: none; }

html[data-theme="dark"] .kft-check svg { stroke: #5a6070; }
html[data-theme="dark"] input[type="checkbox"]:checked + .kft-check svg { stroke: var(--kft-accent, #E85A1A); }
html[data-theme="dark"] input[type="radio"]:checked + .kft-check svg { stroke: var(--kft-accent, #E85A1A); }

/* Scrollable team list inside filter dropdowns */
.brk-dd-team-list {
  max-height: 180px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--kft-accent, #E85A1A) 30%, transparent) transparent;
}
.brk-dd-team-list::-webkit-scrollbar { width: 4px; }
.brk-dd-team-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--kft-accent, #E85A1A) 30%, transparent);
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════
   KFT Animated Download Button  (adapted from Uiverse.io / vinodjangid07)
   ═══════════════════════════════════════════════════════════ */
.kft-dl-btn {
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--kft-accent, #E85A1A) 28%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--kft-accent, #E85A1A) 10%, var(--bg-white));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  flex-shrink: 0;
  gap: 2px;
  padding: 0;
}
.kft-dl-arrow {
  fill: var(--kft-accent, #E85A1A);
  height: 0.6em;
  display: block;
  transition: fill 0.25s ease;
}
.kft-dl-tray {
  width: 11px;
  height: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--kft-accent, #E85A1A) 75%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--kft-accent, #E85A1A) 75%, transparent);
  border-right: 2px solid color-mix(in srgb, var(--kft-accent, #E85A1A) 75%, transparent);
  transition: border-color 0.25s ease;
}
.kft-dl-tip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  background: var(--text-ink, #1a1a2e);
  color: var(--bg-white, #fff);
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.2s ease;
  letter-spacing: 0.3px;
  z-index: 10;
}
.kft-dl-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  background: var(--text-ink, #1a1a2e);
  margin-top: -4px;
}
.kft-dl-btn:hover .kft-dl-tip { opacity: 1; }
.kft-dl-btn:hover {
  background: var(--kft-accent, #E85A1A);
  border-color: var(--kft-accent, #E85A1A);
  box-shadow: 0 3px 14px color-mix(in srgb, var(--kft-accent, #E85A1A) 36%, transparent);
}
.kft-dl-btn:hover .kft-dl-tray { border-color: rgba(255,255,255,0.85); }
.kft-dl-btn:hover .kft-dl-arrow {
  fill: #fff;
  animation: kft-dl-slidein 0.48s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes kft-dl-slidein {
  0%   { transform: translateY(-6px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

html[data-theme="dark"] .kft-dl-btn {
  background: color-mix(in srgb, var(--kft-accent, #E85A1A) 16%, var(--bg-white));
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}

/* ═══════════════════════════════════════════════════════════
   BRK Sort/Filter dropdown panels
   ═══════════════════════════════════════════════════════════ */
.brk-menu-wrap {
  position: relative;
  display: inline-flex;
}
.brk-menu-btn {
  gap: 4px;
  white-space: nowrap;
}
.brk-caret {
  font-size: 9px;
  display: inline-block;
  transition: transform 0.15s ease;
  line-height: 1;
}
.brk-menu-btn[aria-expanded="true"] .brk-caret {
  transform: rotate(180deg);
}
.brk-menu-btn[aria-expanded="true"],
.brk-menu-btn.is-active {
  background: color-mix(in srgb, var(--kft-accent, #E85A1A) 13%, var(--bg-white)) !important;
  border-color: color-mix(in srgb, var(--kft-accent, #E85A1A) 36%, transparent) !important;
  color: var(--kft-accent, #E85A1A) !important;
}
.brk-active-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--kft-accent, #E85A1A);
  margin-left: 3px;
  vertical-align: middle;
}
.brk-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 172px;
  background: var(--bg-white, #fff);
  border: 1px solid var(--kft-soft-line, rgba(0,0,0,0.09));
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(16,24,40,0.13), 0 2px 8px rgba(16,24,40,0.07);
  padding: 6px;
  z-index: 1010;
  animation: brkDropIn 0.13s ease both;
}
@keyframes brkDropIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-5px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.brk-dd-head {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 4px 8px 5px;
}
.brk-dd-sep {
  height: 1px;
  background: var(--kft-soft-line, rgba(0,0,0,0.08));
  margin: 4px 2px;
}
.brk-dd-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-ink);
  transition: background 0.12s ease;
  user-select: none;
}
.brk-dd-opt:hover {
  background: color-mix(in srgb, var(--kft-accent, #E85A1A) 7%, var(--bg-white));
}
.brk-dd-opt input[type="radio"],
.brk-dd-opt input[type="checkbox"] { display: none; }

.brk-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 1009;
}

html[data-theme="dark"] .brk-dropdown {
  background: var(--bg-white);
  box-shadow: 0 10px 40px rgba(0,0,0,0.38), 0 2px 8px rgba(0,0,0,0.22);
}

/* Mobile: slide-up bottom sheet */
@media (max-width: 600px) {
  .brk-dropdown {
    position: fixed;
    bottom: 0; left: 0; right: 0; top: auto;
    transform: none !important;
    border-radius: 18px 18px 0 0;
    min-width: unset;
    width: 100%;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    max-height: 70vh;
    overflow-y: auto;
    animation: brkSlideUp 0.18s ease both;
  }
  @keyframes brkSlideUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .kft-folder-front,
  .kft-folder-paper,
  .kft-folder-label,
  .rolling-track {
    transition: none !important;
  }
}

/* CardSwap-style opening tour. */
.kft-gate .kft-gate-panel {
  width: min(1120px, calc(100vw - 28px)) !important;
  grid-template-columns: minmax(270px, 0.78fr) minmax(460px, 1.22fr) !important;
}

.kft-gate .kft-gate-brand-title {
  max-width: 13ch !important;
}

.kft-gate .kft-card-swap-tour {
  min-height: min(520px, calc(100dvh - 210px)) !important;
  padding: clamp(22px, 3vw, 40px) clamp(24px, 4vw, 58px) clamp(16px, 2.2vw, 28px) !important;
  perspective: 1200px;
  overflow: visible !important;
  isolation: isolate;
}

.kft-gate .kft-card-swap-tour::before {
  content: "";
  position: absolute;
  inset: 11% 6% 10% 12%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 42% 48%, color-mix(in srgb, var(--kft-accent) 12%, transparent), transparent 62%),
    radial-gradient(ellipse at 64% 58%, color-mix(in srgb, var(--kft-accent-2) 10%, transparent), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.kft-gate .kft-swap-card {
  --card-accent: var(--kft-accent);
  --card-accent-2: var(--kft-accent-2);
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 14px !important;
  width: min(455px, calc(100% - 112px)) !important;
  height: min(344px, calc(100% - 24px)) !important;
  min-height: 0 !important;
  padding: clamp(22px, 3vw, 34px) !important;
  border: 1px solid color-mix(in srgb, var(--card-accent) 30%, var(--kft-line)) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--bg-white) 92%, var(--card-accent) 8%),
      color-mix(in srgb, var(--kft-surface) 88%, var(--card-accent-2) 10%)) !important;
  box-shadow:
    0 26px 58px rgba(16, 24, 40, 0.18),
    0 1px 0 rgba(255,255,255,0.72) inset !important;
  opacity: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform-origin: center center;
  transition: border-color 220ms ease, box-shadow 220ms ease !important;
  z-index: 1;
}

.kft-gate .kft-swap-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--card-accent), var(--card-accent-2));
}

.kft-gate .kft-swap-card[data-gate-card="live"] {
  --card-accent: #1F8A5B;
  --card-accent-2: #2F80ED;
}

.kft-gate .kft-swap-card[data-gate-card="profile"] {
  --card-accent: #7A3FF2;
  --card-accent-2: #2F80ED;
}

.kft-gate .kft-swap-card[data-gate-card="planner"] {
  --card-accent: #B22234;
  --card-accent-2: #7A3FF2;
}

.kft-gate .kft-swap-card[data-gate-card="kiba"] {
  --card-accent: #E85A1A;
  --card-accent-2: #F2B134;
}

.kft-gate .kft-swap-card.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 5;
}

.kft-gate .kft-swap-card.is-next {
  opacity: 0.78;
  z-index: 4;
}

.kft-gate .kft-swap-card.is-after {
  opacity: 0.52;
  z-index: 3;
}

.kft-gate .kft-swap-card.is-back {
  opacity: 0.28;
  z-index: 1;
}

.kft-gate .kft-swap-card:hover {
  border-color: color-mix(in srgb, var(--card-accent) 52%, var(--kft-line)) !important;
  box-shadow:
    0 34px 72px color-mix(in srgb, var(--card-accent) 14%, rgba(16, 24, 40, 0.18)),
    0 1px 0 rgba(255,255,255,0.78) inset !important;
}

.kft-gate .kft-swap-card .kft-gate-step-count {
  width: max-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-accent) 12%, var(--bg-white));
  color: color-mix(in srgb, var(--card-accent) 84%, var(--text-ink));
  border: 1px solid color-mix(in srgb, var(--card-accent) 22%, var(--kft-line));
  font-size: 11px !important;
  letter-spacing: 0 !important;
}

.kft-gate .kft-swap-card h3 {
  max-width: 12.5ch !important;
  margin: 0 !important;
  color: var(--text-ink);
  font-size: clamp(1.7rem, 3.5vw, 3.25rem) !important;
  line-height: 0.96 !important;
  letter-spacing: 0 !important;
}

.kft-gate .kft-swap-card p {
  max-width: 44ch !important;
  margin: 0 !important;
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text-ink) 12%);
  font-size: 14px !important;
  line-height: 1.56 !important;
  font-weight: 700 !important;
}

.kft-swap-card-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.kft-swap-card-tools span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 20%, var(--kft-line));
  background: color-mix(in srgb, var(--bg-white) 74%, var(--card-accent) 8%);
  color: color-mix(in srgb, var(--text-ink) 78%, var(--card-accent) 22%);
  font-size: 11px;
  font-weight: 900;
}

.kft-swap-card-link {
  width: fit-content;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 36%, var(--kft-line));
  background:
    radial-gradient(circle at 50% 145%, var(--card-accent) 0 52%, transparent 53%) 50% 100% / 0 0 no-repeat,
    color-mix(in srgb, var(--bg-white) 88%, var(--card-accent) 6%);
  color: color-mix(in srgb, var(--text-ink) 84%, var(--card-accent) 16%);
  font-size: 12px;
  font-weight: 950;
  text-decoration: none;
  transition: background-size 420ms cubic-bezier(.2,.8,.2,1), color 180ms ease, transform 150ms ease;
}

.kft-swap-card-link:hover,
.kft-swap-card-link:focus-visible {
  background-size: 220% 220%;
  color: #fff;
  transform: translateY(-1px);
  outline: none;
}

.kft-gate .kft-swap-card .kft-gate-kiba-preview {
  position: absolute;
  right: 22px;
  top: 22px;
  width: 82px !important;
  min-height: 62px !important;
  margin: 0 !important;
  color: var(--card-accent);
}

html[data-theme="dark"] .kft-gate .kft-swap-card {
  background:
    linear-gradient(145deg,
      color-mix(in srgb, #1d2430 88%, var(--card-accent) 12%),
      color-mix(in srgb, #151a22 88%, var(--card-accent-2) 12%)) !important;
  box-shadow:
    0 34px 78px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255,255,255,0.08) inset !important;
}

html[data-theme="dark"] .kft-swap-card-tools span,
html[data-theme="dark"] .kft-swap-card-link {
  background-color: color-mix(in srgb, #1d2430 88%, var(--card-accent) 12%);
}

@media (max-width: 860px) {
  .kft-gate .kft-gate-panel {
    width: min(100%, 600px) !important;
    grid-template-columns: 1fr !important;
  }

  .kft-gate .kft-gate-brand {
    display: none !important;
  }

  .kft-gate .kft-card-swap-tour {
    min-height: 430px !important;
    padding: 22px 20px 10px !important;
    overflow: hidden !important;
  }

  .kft-gate .kft-swap-card {
    width: min(390px, calc(100% - 82px)) !important;
    height: min(322px, calc(100% - 20px)) !important;
  }
}

@media (max-width: 640px) {
  .kft-gate .kft-gate-panel {
    width: min(100%, 430px) !important;
    max-height: min(90dvh, 620px) !important;
  }

  .kft-gate .kft-card-swap-tour {
    height: clamp(340px, 56dvh, 430px) !important;
    max-height: none !important;
    padding: 14px 10px 6px !important;
    overflow: hidden !important;
  }

  .kft-gate .kft-swap-card {
    left: 47% !important;
    width: min(304px, calc(100% - 62px)) !important;
    height: min(304px, calc(100% - 22px)) !important;
    padding: 16px !important;
    gap: 9px !important;
  }

  .kft-gate .kft-swap-card h3 {
    max-width: 13.5ch !important;
    font-size: clamp(1.34rem, 7vw, 2rem) !important;
    line-height: 1 !important;
  }

  .kft-gate .kft-swap-card p {
    font-size: 12px !important;
    line-height: 1.42 !important;
  }

  .kft-gate .kft-swap-card.is-next {
    transform:
      translate(-50%, -50%)
      translate3d(28px, -30px, -70px)
      skewY(3deg)
      scale(0.96) !important;
  }

  .kft-gate .kft-swap-card.is-after {
    transform:
      translate(-50%, -50%)
      translate3d(55px, -58px, -140px)
      skewY(5deg)
      scale(0.92) !important;
  }

  .kft-swap-card-tools {
    gap: 5px;
  }

  .kft-swap-card-tools span {
    min-height: 22px;
    padding: 4px 7px;
    font-size: 10px;
  }

  .kft-swap-card-link {
    min-height: 32px;
    padding: 7px 11px;
    font-size: 11px;
  }

  .kft-gate .kft-swap-card .kft-gate-kiba-preview {
    width: 58px !important;
    min-height: 46px !important;
    right: 14px;
    top: 14px;
  }
}

/* Bottom-sheet layout on narrow phones */
@media (max-width: 540px) {
  .kft-gate {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .kft-gate .kft-gate-panel {
    border-radius: 20px 20px 0 0 !important;
    width: 100% !important;
    max-height: 93dvh !important;
  }

  .kft-gate .kft-card-swap-tour {
    height: clamp(260px, 50dvh, 380px) !important;
  }

  .kft-gate .kft-swap-card {
    width: min(300px, calc(100% - 36px)) !important;
    height: min(270px, calc(100% - 16px)) !important;
    padding: 14px !important;
    gap: 8px !important;
  }

  .kft-gate .kft-swap-card h3 {
    font-size: clamp(1.2rem, 5.5vw, 1.65rem) !important;
  }

  .kft-gate .kft-swap-card p {
    font-size: 12.5px !important;
  }
}

/* Landscape / short-screen: keep popup from overflowing */
@media (max-height: 560px) and (max-width: 900px) {
  .kft-gate .kft-gate-panel {
    max-height: 97dvh !important;
  }

  .kft-gate .kft-card-swap-tour {
    height: clamp(200px, 44dvh, 310px) !important;
  }

  .kft-gate .kft-swap-card {
    height: min(230px, calc(100% - 14px)) !important;
    gap: 6px !important;
    padding: 12px !important;
  }

  .kft-gate .kft-swap-card h3 {
    font-size: clamp(1rem, 4vw, 1.4rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kft-gate .kft-swap-card {
    transition: opacity 120ms ease !important;
  }
}

/* PillNav-inspired action controls, shared by all sister pages. */
body[class*="kft-page-"] {
  --kft-pill-bg: color-mix(in srgb, var(--bg-white) 90%, var(--kft-accent) 5%);
  --kft-pill-text: color-mix(in srgb, var(--text-ink) 88%, var(--kft-accent) 12%);
  --kft-pill-border: color-mix(in srgb, var(--kft-accent) 28%, var(--kft-line));
}

body[class*="kft-page-"] :is(
  .hero-feature-links a,
  .hero-feature-links button,
  .hero-suite-link,
  .connect-btn,
  .control-btn,
  .compare-btn,
  .kft-btn,
  .plan-btn,
  .gw-nav-btn,
  .step-btn,
  .form-btn,
  .chip-badge,
  .path-btn,
  .ask-kiba-btn,
  .pdash-action-btn,
  .mfilter,
  .mkt-page-btn,
  .exposure-page-btn,
  .xgi-gw-btn,
  .xgi-pos-btn,
  .brk-pos-btn,
  .xgi-action-btn,
  .xgi-page-btn,
  .xgi-edit-reset-btn,
  .xgi-edit-save-btn,
  .proj-btn,
  .proj-gw-menu-item,
  .bracket-open-btn,
  .bracket-clear-btn,
  .bracket-add-btn,
  .bracket-suggestion,
  .kft-gate-tour-btn,
  .kft-gate-continue,
  button[onclick*="downloadSquadPng"],
  button[onclick*="cancelSubMode"],
  button[onclick*="quickSavePrompt"]
) {
  --pill-base: var(--kft-accent);
  --pill-bg: var(--kft-pill-bg);
  --pill-text: var(--kft-pill-text);
  --pill-hover-text: #fff;
  --pill-fill-size: 0 0;
  appearance: none !important;
  position: relative !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  width: auto;
  padding: 8px 15px !important;
  border-radius: 999px !important;
  border: 1px solid var(--kft-pill-border) !important;
  background:
    radial-gradient(circle at 50% 145%, var(--pill-base) 0 52%, transparent 53%) 50% 100% / var(--pill-fill-size) no-repeat,
    var(--pill-bg) !important;
  color: var(--pill-text) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.72) inset, 0 10px 24px rgba(16, 24, 40, 0.08) !important;
  font-family: inherit !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-decoration: none !important;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  overflow: hidden !important;
  isolation: isolate;
  transition:
    background-size 430ms cubic-bezier(.2,.8,.2,1),
    color 210ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 150ms ease !important;
}

body[class*="kft-page-"] :is(
  .hero-feature-links a,
  .hero-feature-links button,
  .hero-suite-link,
  .connect-btn,
  .control-btn,
  .compare-btn,
  .kft-btn,
  .plan-btn,
  .gw-nav-btn,
  .step-btn,
  .form-btn,
  .chip-badge,
  .path-btn,
  .ask-kiba-btn,
  .pdash-action-btn,
  .mfilter,
  .mkt-page-btn,
  .exposure-page-btn,
  .xgi-gw-btn,
  .xgi-pos-btn,
  .brk-pos-btn,
  .xgi-action-btn,
  .xgi-page-btn,
  .xgi-edit-reset-btn,
  .xgi-edit-save-btn,
  .proj-btn,
  .proj-gw-menu-item,
  .bracket-open-btn,
  .bracket-clear-btn,
  .bracket-add-btn,
  .bracket-suggestion,
  .kft-gate-tour-btn,
  .kft-gate-continue
):is([hidden], [style*="display:none"], [style*="display: none"]) {
  display: none !important;
}

body[class*="kft-page-"] :is(
  .hero-feature-links a,
  .hero-feature-links button,
  .hero-suite-link,
  .connect-btn,
  .control-btn,
  .compare-btn,
  .kft-btn,
  .plan-btn,
  .gw-nav-btn,
  .step-btn,
  .form-btn,
  .chip-badge,
  .path-btn,
  .ask-kiba-btn,
  .pdash-action-btn,
  .mfilter,
  .mkt-page-btn,
  .exposure-page-btn,
  .xgi-gw-btn,
  .xgi-pos-btn,
  .brk-pos-btn,
  .xgi-action-btn,
  .xgi-page-btn,
  .xgi-edit-reset-btn,
  .xgi-edit-save-btn,
  .proj-btn,
  .proj-gw-menu-item,
  .bracket-open-btn,
  .bracket-clear-btn,
  .bracket-add-btn,
  .bracket-suggestion,
  .kft-gate-tour-btn,
  .kft-gate-continue,
  button[onclick*="downloadSquadPng"],
  button[onclick*="cancelSubMode"],
  button[onclick*="quickSavePrompt"]
):is(:hover, :focus-visible) {
  --pill-fill-size: 220% 220%;
  border-color: color-mix(in srgb, var(--pill-base) 58%, var(--kft-line)) !important;
  color: var(--pill-hover-text) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--pill-base) 18%, transparent), 0 1px 0 rgba(255,255,255,0.5) inset !important;
}

body[class*="kft-page-"] :is(
  .control-btn.primary,
  .kft-btn-primary,
  .xgi-action-btn.dl,
  .plan-btn-optimise,
  .path-save,
  .ask-kiba-btn,
  .form-btn.active,
  .chip-badge.active,
  .mfilter.active,
  .xgi-pos-btn.active,
  .brk-pos-btn.active,
  .mkt-page-btn.active,
  .pdash-action-btn.active-badge
) {
  --pill-fill-size: 220% 220%;
  border-color: color-mix(in srgb, var(--pill-base) 64%, var(--kft-line)) !important;
  color: #fff !important;
}

body[class*="kft-page-"] :is(
  .plan-btn-warn,
  .path-del,
  .proj-gw-menu-item-danger,
  button[onclick*="removeChip"]
) {
  --pill-base: var(--signal-red);
  --pill-text: var(--signal-red);
  --kft-pill-border: color-mix(in srgb, var(--signal-red) 34%, var(--kft-line));
}

body[class*="kft-page-"] :is(
  .hero-feature-links a,
  .hero-feature-links button,
  .hero-suite-link,
  .connect-btn,
  .control-btn,
  .compare-btn,
  .kft-btn,
  .plan-btn,
  .gw-nav-btn,
  .step-btn,
  .form-btn,
  .chip-badge,
  .path-btn,
  .ask-kiba-btn,
  .pdash-action-btn,
  .mfilter,
  .mkt-page-btn,
  .exposure-page-btn,
  .xgi-gw-btn,
  .xgi-pos-btn,
  .brk-pos-btn,
  .xgi-action-btn,
  .xgi-page-btn,
  .xgi-edit-reset-btn,
  .xgi-edit-save-btn,
  .proj-btn,
  .proj-gw-menu-item,
  .bracket-open-btn,
  .bracket-clear-btn,
  .bracket-add-btn,
  .bracket-suggestion,
  .kft-gate-tour-btn,
  .kft-gate-continue
):disabled {
  --pill-fill-size: 0 0;
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

body[class*="kft-page-"] :is(
  .hero-feature-links,
  .hero-suite-strip,
  .xgi-controls,
  .xgi-controls-row2,
  .xgi-pos-filter,
  .xgi-metric-filter,
  .brk-controls,
  .proj-controls-row,
  .proj-controls-row-tight,
  .proj-weeks,
  .proj-chips,
  .xgi-pagination,
  .brk-pagination,
  .kft-row,
  .kft-row-left,
  .kft-row-right,
  .kft-hidden-chips,
  .connect-actions,
  .section-controls,
  .graph-toolbar,
  .league-controls,
  .league-pagination,
  .modal-actions,
  .modal-filters,
  .formation-btns,
  .gw-nav,
  .chips-row,
  .market-pagination,
  .exposure-pagination,
  .bracket-controls,
  .bracket-actions
) {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

body[class*="kft-page-"] :is(
  .xgi-gw-btn,
  .step-btn,
  .form-btn,
  .mfilter,
  .mkt-page-btn,
  .exposure-page-btn,
  .pdash-action-btn,
  .kft-gw-hide
) {
  min-height: 30px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
}

body[class*="kft-page-"] :is(
  .proj-select,
  .xgi-team-select,
  .gw-select,
  .league-select,
  .bracket-select,
  .gw-input
) {
  min-height: 38px !important;
  border-radius: 999px !important;
  border-color: color-mix(in srgb, var(--kft-accent) 28%, var(--kft-line)) !important;
  background: color-mix(in srgb, var(--bg-white) 92%, var(--kft-accent) 5%) !important;
  color: var(--text-ink) !important;
  text-align: center !important;
  font-weight: 850 !important;
}

.kft-gate {
  overflow: hidden !important;
}

.kft-gate::before,
.kft-gate::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.kft-gate::before {
  inset: -18%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.052) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 76px),
    linear-gradient(112deg, transparent 0 34%, rgba(255,255,255,0.085) 48%, transparent 62%);
  opacity: 0.78;
  transform: translate3d(-5%, 0, 0);
  animation: kftGateFieldScan 8s linear infinite;
}

.kft-gate::after {
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 20%, color-mix(in srgb, var(--kft-accent) 24%, transparent) 38%, transparent 56%),
    linear-gradient(245deg, transparent 0 24%, color-mix(in srgb, var(--kft-accent-2) 18%, transparent) 44%, transparent 66%);
  opacity: 0.58;
  animation: kftGateLightPass 5.8s ease-in-out infinite alternate;
}

.kft-gate-panel {
  position: relative;
  z-index: 1;
}

.kft-gate-logo-beat {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
}

.kft-gate-brand::before,
.kft-gate-brand::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.kft-gate-brand::before {
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 58px),
    linear-gradient(135deg, color-mix(in srgb, var(--kft-accent) 26%, transparent), transparent 54%);
  opacity: 0.5;
  background-position: 0 0, 0 0, 0 0;
  animation: kftGateBrandGrid 9s linear infinite;
}

.kft-gate-brand::after {
  left: -18%;
  right: -18%;
  top: 44%;
  height: 36%;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 18%, color-mix(in srgb, var(--kft-accent) 42%, transparent) 42%, color-mix(in srgb, var(--kft-accent-2) 34%, transparent) 62%, transparent 100%);
  transform: skewY(-10deg) translateX(-12%);
  animation: kftGateBrandRibbon 4.8s ease-in-out infinite alternate;
}

.kft-gate-signal span {
  transform-origin: bottom;
  animation: kftGateSignalPulse 1.85s ease-in-out infinite alternate;
}

.kft-gate-signal span:nth-child(2) { animation-delay: 120ms; }
.kft-gate-signal span:nth-child(3) { animation-delay: 240ms; }
.kft-gate-signal span:nth-child(4) { animation-delay: 360ms; }

.kft-gate-brand-top,
.kft-gate-brand-title,
.kft-gate-brand-desc,
.kft-gate-signal {
  position: relative;
  z-index: 1;
}

.kft-gate.panel-ready .kft-gate-step.is-active h3,
.kft-gate.panel-ready .kft-gate-step.is-active p,
.kft-gate.panel-ready .kft-gate-step.is-active .kft-gate-step-count {
  animation: kftGateCopyIn 360ms cubic-bezier(.22,.61,.36,1) both;
}

.kft-gate.panel-ready .kft-gate-step.is-active p { animation-delay: 70ms; }
.kft-gate.panel-ready .kft-gate-step.is-active .kft-gate-step-count { animation-delay: 20ms; }

@keyframes kftGateFieldScan {
  0% { transform: translate3d(-5%, 0, 0); }
  100% { transform: translate3d(5%, 0, 0); }
}

@keyframes kftGateLightPass {
  0% { opacity: 0.34; transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { opacity: 0.66; transform: translate3d(2%, 1%, 0) scale(1.03); }
}

@keyframes kftGateBrandGrid {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 58px 0, 0 58px, 0 0; }
}

@keyframes kftGateBrandRibbon {
  0% { transform: skewY(-10deg) translateX(-14%); opacity: 0.48; }
  100% { transform: skewY(-10deg) translateX(14%); opacity: 0.76; }
}

@keyframes kftGateSignalPulse {
  0% { transform: scaleY(0.62); filter: saturate(0.9); }
  100% { transform: scaleY(1); filter: saturate(1.25); }
}

@keyframes kftGateCopyIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  body[class*="kft-page-"] {
    background-attachment: scroll !important;
  }

  .kft-gate-foot {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .kft-gate-foot-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .kft-gate-continue {
    width: 100% !important;
  }
}

@media (max-height: 660px) and (min-width: 561px) {
  .kft-gate-panel {
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
  }

  .kft-gate-brand {
    padding: 22px 28px !important;
  }

  .kft-gate-brand-title {
    margin: 20px 0 10px !important;
    font-size: clamp(1.9rem, 5.5vw, 3rem) !important;
  }

  .kft-gate-brand-desc {
    font-size: 13px !important;
    line-height: 1.46 !important;
  }

  .kft-gate-signal {
    height: 54px !important;
    margin-top: 18px !important;
  }

  .kft-gate-tour {
    min-height: 318px !important;
    padding-top: 22px !important;
    padding-bottom: 10px !important;
  }

  .kft-gate-step {
    inset: 22px clamp(24px, 4vw, 44px) 10px !important;
  }

  .kft-gate-step h3 {
    font-size: clamp(1.7rem, 4vw, 2.8rem) !important;
  }

  .kft-gate-step p {
    font-size: 13.5px !important;
  }

  .kft-gate-foot {
    padding-top: 10px !important;
    padding-bottom: 14px !important;
  }
}

@media (max-width: 560px) {
  .kft-gate::before {
    inset: -28%;
    background-size: auto;
    opacity: 0.42;
  }

  .kft-gate::after {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kft-gate::before,
  .kft-gate::after,
  .kft-gate-brand::before,
  .kft-gate-brand::after,
  .kft-gate-signal span,
  .kft-gate-step.is-active h3,
  .kft-gate-step.is-active p,
  .kft-gate-step.is-active .kft-gate-step-count {
    animation: none !important;
    transform: none !important;
  }
}

/* ===== Dog-led feature tour ===== */
body.kiba-guide-tour-active .kiba-guide,
.kiba-guide.is-guiding {
  z-index: 980;
}

.kiba-guide.is-guiding .kiba-nav-hint {
  display: none;
}

.kiba-guide-tour-menu-item {
  margin-top: 6px !important;
  border-top: 1px solid var(--kft-soft-line) !important;
  color: color-mix(in srgb, var(--kiba-accent) 86%, var(--text-ink)) !important;
  font-weight: 880 !important;
}

.kiba-guide-tour-menu-item .kiba-menu-mark {
  border-color: color-mix(in srgb, var(--kiba-accent) 66%, var(--kft-line));
  background: color-mix(in srgb, var(--kiba-accent) 22%, transparent);
}

.kiba-help-title-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  vertical-align: top;
}

.section-title .kiba-help-title-line > :is(h1, h2, h3) {
  margin-bottom: 0 !important;
}

.kiba-help-trigger {
  appearance: none;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--kft-accent, var(--primary-orange)) 42%, var(--kft-line));
  border-radius: 999px;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--kft-surface) 92%, var(--kft-accent, var(--primary-orange)) 8%),
      var(--kft-surface));
  color: color-mix(in srgb, var(--kft-accent, var(--primary-orange)) 86%, var(--text-ink));
  box-shadow: 0 8px 18px rgba(12, 18, 28, 0.1), var(--kft-inset);
  font: 950 14px/1 var(--font-body, Inter, system-ui, sans-serif);
  cursor: pointer;
  transform: translateY(-1px);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.kiba-help-trigger:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--kft-accent, var(--primary-orange)) 72%, var(--kft-line));
  box-shadow: 0 10px 22px rgba(12, 18, 28, 0.14), var(--kft-inset);
}

.kiba-help-trigger:active {
  transform: translateY(0);
}

.kiba-help-trigger:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--kft-accent, var(--primary-orange)) 36%, transparent);
  outline-offset: 3px;
}

html[data-theme="dark"] .kiba-help-trigger {
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--kft-surface) 86%, var(--kft-accent, var(--primary-orange)) 14%),
      var(--kft-surface));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34), var(--kft-inset);
}

.kiba-tour-bubble[hidden] {
  display: none !important;
}

.kiba-tour-bubble {
  position: absolute;
  top: 0;
  width: min(320px, calc(100vw - 136px));
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--kiba-accent) 28%, var(--kft-line));
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--kft-surface) 94%, var(--kiba-accent) 6%), var(--kft-surface));
  color: var(--text-ink);
  box-shadow: var(--kft-shadow-2), var(--kft-inset);
  pointer-events: auto;
  transform: translateY(-2px);
}

.kiba-guide.tour-bubble-right .kiba-tour-bubble {
  left: calc(100% + 13px);
  right: auto;
}

.kiba-guide.tour-bubble-left .kiba-tour-bubble {
  right: calc(100% + 13px);
  left: auto;
}

.kiba-tour-bubble::after {
  content: "";
  position: absolute;
  top: 22px;
  width: 12px;
  height: 12px;
  border-top: 1px solid color-mix(in srgb, var(--kiba-accent) 28%, var(--kft-line));
  border-left: 1px solid color-mix(in srgb, var(--kiba-accent) 28%, var(--kft-line));
  background: color-mix(in srgb, var(--kft-surface) 94%, var(--kiba-accent) 6%);
}

.kiba-guide.tour-bubble-right .kiba-tour-bubble::after {
  left: -7px;
  transform: rotate(-45deg);
}

.kiba-guide.tour-bubble-left .kiba-tour-bubble::after {
  right: -7px;
  transform: rotate(135deg);
}

.kiba-tour-kicker {
  color: color-mix(in srgb, var(--kiba-accent) 86%, var(--text-muted));
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.kiba-tour-bubble strong {
  display: block;
  color: var(--text-ink);
  font-size: 15px;
  line-height: 1.14;
  font-weight: 930;
  margin-bottom: 6px;
}

.kiba-tour-bubble p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 700;
}

.kiba-tour-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 11px;
}

.kiba-tour-actions button {
  all: unset;
  box-sizing: border-box;
  min-height: 31px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--kft-line);
  background: var(--kft-surface);
  color: var(--text-ink);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.kiba-tour-actions button:focus-visible {
  outline: 2px solid var(--kiba-accent);
  outline-offset: 2px;
}

.kiba-tour-actions button[data-kiba-tour-next] {
  border-color: color-mix(in srgb, var(--kiba-accent) 62%, var(--kft-line));
  background: var(--kiba-accent);
  color: #fff;
}

@media (max-width: 640px) {
  .kiba-tour-bubble {
    position: absolute;
    top: 0;
    bottom: auto;
    width: min(250px, calc(100vw - 112px));
    max-width: min(250px, calc(100vw - 112px));
    transform: translateY(-2px);
  }

  .kiba-guide.tour-bubble-right .kiba-tour-bubble {
    left: calc(100% + 10px) !important;
    right: auto !important;
  }

  .kiba-guide.tour-bubble-left .kiba-tour-bubble {
    right: calc(100% + 10px) !important;
    left: auto !important;
  }

  .kiba-tour-bubble::after {
    display: block;
  }

  .kiba-tour-actions {
    justify-content: stretch;
  }

  .kiba-tour-actions button {
    flex: 1;
    text-align: center;
  }

  .kiba-help-title-line {
    gap: 8px;
  }

  .kiba-help-trigger {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kiba-help-trigger {
    transition: none;
  }

  .kiba-help-trigger:hover,
  .kiba-help-trigger:active {
    transform: translateY(-1px);
  }
}

/* ===== Final mobile gate + tile-matched page gradients ===== */
body[class*="kft-page-"] {
  --kft-page-gradient:
    linear-gradient(145deg,
      color-mix(in srgb, var(--bg-white) 94%, var(--kft-support-b) 6%) 0%,
      color-mix(in srgb, var(--kft-surface) 92%, var(--kft-accent-2) 8%) 46%,
      color-mix(in srgb, var(--bg-paper) 88%, var(--kft-accent) 7%) 100%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--kft-accent) 10%, transparent) 0%,
      transparent 34%,
      color-mix(in srgb, var(--kft-support-a) 8%, transparent) 68%,
      color-mix(in srgb, var(--kft-accent-2) 8%, transparent) 100%);
  background: var(--kft-page-gradient) !important;
}

body[class*="kft-page-"]::before {
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--kft-accent) 18%, transparent), transparent 36%, color-mix(in srgb, var(--kft-accent-2) 14%, transparent) 72%, transparent),
    repeating-linear-gradient(135deg, transparent 0 34px, color-mix(in srgb, var(--kft-line) 36%, transparent) 34px 35px, transparent 35px 70px) !important;
  background-size: 100% 100%, 140px 140px !important;
  opacity: 0.34 !important;
}

html[data-theme="dark"] body[class*="kft-page-"] {
  --kft-page-gradient:
    linear-gradient(145deg,
      color-mix(in srgb, #151a22 92%, var(--kft-support-b) 8%) 0%,
      color-mix(in srgb, #111821 90%, var(--kft-accent-2) 10%) 48%,
      color-mix(in srgb, var(--bg-paper) 86%, var(--kft-accent) 14%) 100%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--kft-accent) 14%, transparent) 0%,
      transparent 36%,
      color-mix(in srgb, var(--kft-support-a) 10%, transparent) 70%,
      color-mix(in srgb, var(--kft-accent-2) 10%, transparent) 100%);
}

@media (max-width: 640px) {
  .kft-gate {
    align-items: center !important;
    justify-content: center !important;
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) !important;
    background: rgba(7, 10, 16, 0.68) !important;
    backdrop-filter: blur(12px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.04) !important;
  }

  .kft-gate::before,
  .kft-gate::after {
    display: none !important;
  }

  .kft-gate-logo-beat {
    transform: scale(0.82);
  }

  .kft-gate-panel {
    width: min(100%, 420px) !important;
    min-height: 0 !important;
    max-height: min(86dvh, 560px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
    border-radius: 8px !important;
    border: 1px solid color-mix(in srgb, var(--kft-accent) 24%, rgba(255,255,255,0.2)) !important;
    background:
      linear-gradient(145deg,
        color-mix(in srgb, var(--bg-white) 94%, var(--kft-support-b) 6%),
        color-mix(in srgb, var(--kft-surface) 92%, var(--kft-accent-2) 8%)) !important;
    box-shadow:
      0 22px 58px rgba(0, 0, 0, 0.42),
      0 1px 0 rgba(255,255,255,0.72) inset !important;
    overflow: hidden !important;
  }

  .kft-gate-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--kft-accent), var(--kft-accent-2) 44%, var(--kft-support-a));
    z-index: 2;
  }

  .kft-gate-brand {
    display: none !important;
  }

  .kft-gate-content {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    background: transparent !important;
  }

  .kft-gate-content-header {
    min-height: 42px !important;
    padding: 11px 12px 6px !important;
    align-items: center !important;
  }

  .kft-gate-content-label {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
  }

  .kft-gate-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }

  .kft-gate-tour {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(min(86dvh, 560px) - 142px) !important;
    padding: 10px 14px 4px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    user-select: none;
  }

  .kft-gate-step {
    position: static !important;
    inset: auto !important;
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .kft-gate-step.is-active {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .kft-gate-step-count {
    width: max-content;
    padding: 4px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--kft-accent) 10%, var(--bg-white));
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }

  .kft-gate-step h3 {
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(1.22rem, 6vw, 1.72rem) !important;
    line-height: 1.05 !important;
  }

  .kft-gate-step p {
    max-width: none !important;
    font-size: 12.5px !important;
    line-height: 1.46 !important;
    font-weight: 680 !important;
  }

  .kft-gate-kiba-preview {
    width: 76px !important;
    min-height: 58px !important;
    margin: 0 auto 2px !important;
  }

  .kft-gate-lineup,
  .kft-gate-flow {
    display: none !important;
  }

  .kft-gate-foot {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid color-mix(in srgb, var(--kft-line) 72%, transparent) !important;
    background: color-mix(in srgb, var(--kft-surface) 86%, transparent) !important;
  }

  .kft-gate-tour-controls {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .kft-gate-tour-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    padding: 7px 10px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
  }

  .kft-gate-dots {
    justify-content: center !important;
  }

  .kft-gate-foot-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .kft-gate-check {
    justify-content: center !important;
    font-size: 10.5px !important;
  }

  .kft-gate-continue {
    width: 100% !important;
    min-height: 38px !important;
    padding: 9px 12px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
  }
}

/* ===== Pack mode ===== */

/* Extend menu stagger to cover pack buttons */
.kiba-guide.menu-open .kiba-menu-item:nth-child(9)  { animation-delay: 212ms; }
.kiba-guide.menu-open .kiba-menu-item:nth-child(10) { animation-delay: 228ms; }
.kiba-guide.menu-open .kiba-menu-item:nth-child(11) { animation-delay: 244ms; }
.kiba-guide.menu-open .kiba-menu-item:nth-child(12) { animation-delay: 260ms; }

/* Pack + stop buttons: separator line and italic label, matching fetch style */
.kiba-pack-menu-item,
.kiba-pack-stop-item {
  margin-top: 6px !important;
  border-top: 1px solid var(--kft-soft-line) !important;
}

.kiba-pack-menu-item span:last-child,
.kiba-pack-stop-item span:last-child {
  font-style: italic;
}

/* Stop button hidden by default; pack button hidden while packing */
.kiba-pack-stop-item {
  display: none;
}

.kiba-guide.is-packing .kiba-pack-stop-item {
  display: flex !important;
  color: color-mix(in srgb, var(--kiba-accent) 92%, var(--text-ink)) !important;
  font-weight: 880 !important;
}

.kiba-guide.is-packing .kiba-pack-stop-item .kiba-menu-mark {
  background: color-mix(in srgb, var(--kiba-accent) 28%, transparent);
  border-color: color-mix(in srgb, var(--kiba-accent) 66%, var(--kft-line));
}

.kiba-guide.is-packing .kiba-pack-menu-item {
  display: none !important;
}

/* ── Pack layer ── */
.kiba-pack-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--kft-nav-h, 68px);
  pointer-events: none;
  z-index: 1001;
  overflow: hidden;
}

.kiba-pack-layer.is-leaving {
  opacity: 0;
  transition: opacity 360ms ease;
}

/* Pack dog elements */
.kiba-pack-dog {
  position: absolute;
  bottom: 2px;
  width: 44px;
  pointer-events: none;
}

.kiba-pack-dog .kiba-dog-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 5px rgba(16, 24, 40, 0.28));
}

.kiba-pack-dog.is-flipped .kiba-dog-svg {
  transform: scaleX(-1);
}

.kiba-pack-dog.is-walking .kiba-dog-svg {
  animation: kibaPackWalk 540ms ease-in-out infinite;
}

.kiba-pack-dog.is-flipped.is-walking .kiba-dog-svg {
  animation: kibaPackWalkFlipped 540ms ease-in-out infinite;
}

@keyframes kibaPackWalk {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%       { transform: translateY(-4px) rotate(1deg); }
}

@keyframes kibaPackWalkFlipped {
  0%, 100% { transform: scaleX(-1) translateY(0) rotate(-1deg); }
  50%       { transform: scaleX(-1) translateY(-4px) rotate(1deg); }
}

/* Reduced motion: disable pack walk animations */
@media (prefers-reduced-motion: reduce) {
  .kiba-pack-dog.is-walking .kiba-dog-svg,
  .kiba-pack-dog.is-flipped.is-walking .kiba-dog-svg {
    animation: none !important;
  }
}

/* Page-wide opener gradient: the carousel becomes text on the page, not a tile. */
body.kft-page-analytics {
  --kft-page-gradient:
    linear-gradient(126deg, color-mix(in srgb, #fff8ef 78%, var(--kft-accent) 22%) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(218deg, color-mix(in srgb, #eef6ff 82%, var(--kft-accent-2) 18%) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, #fffdfa 0%, color-mix(in srgb, var(--bg-paper) 86%, #eaf2ee 14%) 54%, color-mix(in srgb, #f4f8fb 82%, var(--kft-support-a) 18%) 100%);
  --kft-page-grid: rgba(232, 90, 26, 0.075);
  --kft-page-stripe: rgba(47, 128, 237, 0.055);
}

body.kft-page-live {
  --kft-page-gradient:
    linear-gradient(126deg, color-mix(in srgb, #effaf4 76%, var(--kft-accent) 24%) 0%, rgba(255,255,255,0) 44%),
    linear-gradient(222deg, color-mix(in srgb, #edf6ff 80%, var(--kft-accent-2) 20%) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #f7fbf7 0%, color-mix(in srgb, var(--bg-paper) 84%, #e7f3ec 16%) 56%, #edf5f8 100%);
  --kft-page-grid: rgba(31, 138, 91, 0.085);
  --kft-page-stripe: rgba(47, 128, 237, 0.058);
}

body.kft-page-profile {
  --kft-page-gradient:
    linear-gradient(128deg, color-mix(in srgb, #f7f0ff 76%, var(--kft-accent) 24%) 0%, rgba(255,255,255,0) 44%),
    linear-gradient(220deg, color-mix(in srgb, #eef6ff 78%, var(--kft-accent-2) 22%) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(180deg, #fbf8ff 0%, color-mix(in srgb, var(--bg-paper) 84%, #f1ecfb 16%) 54%, color-mix(in srgb, #f5f9f4 82%, var(--kft-support-a) 18%) 100%);
  --kft-page-grid: rgba(122, 63, 242, 0.076);
  --kft-page-stripe: rgba(31, 138, 91, 0.055);
}

body.kft-page-planner {
  --kft-page-gradient:
    linear-gradient(126deg, color-mix(in srgb, #fff2f3 76%, var(--kft-accent) 24%) 0%, rgba(255,255,255,0) 43%),
    linear-gradient(220deg, color-mix(in srgb, #f5f1ff 80%, var(--kft-support-b) 20%) 0%, rgba(255,255,255,0) 51%),
    linear-gradient(180deg, #fffafa 0%, color-mix(in srgb, var(--bg-paper) 84%, #f6eeee 16%) 54%, color-mix(in srgb, #eff7f2 84%, var(--kft-support-a) 16%) 100%);
  --kft-page-grid: rgba(178, 34, 52, 0.078);
  --kft-page-stripe: rgba(122, 63, 242, 0.052);
}

body[class*="kft-page-"] {
  background: var(--kft-page-gradient) !important;
  background-attachment: fixed !important;
}

body[class*="kft-page-"]::before {
  background-image:
    linear-gradient(var(--kft-page-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--kft-page-grid) 1px, transparent 1px),
    repeating-linear-gradient(118deg, transparent 0 92px, var(--kft-page-stripe) 92px 93px, transparent 93px 184px) !important;
  background-size: 44px 44px, 44px 44px, 220px 220px !important;
  opacity: 0.62 !important;
}

@media (max-width: 720px) {
  body[class*="kft-page-"] {
    background-attachment: scroll !important;
  }
}

body[class*="kft-page-"] section,
body[class*="kft-page-"] #hero,
body[class*="kft-page-"] footer {
  background: transparent !important;
}

body[class*="kft-page-"] .hero-explainer,
body[class*="kft-page-"] .hero-carousel,
body[class*="kft-page-"] .hero-carousel-track,
body[class*="kft-page-"] .hero-slide {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body[class*="kft-page-"] .hero-explainer {
  border-top: 0 !important;
}

body[class*="kft-page-"] .hero-carousel::after {
  display: none !important;
}

html[data-theme="dark"] body.kft-page-analytics,
html[data-theme="dark"] body.kft-page-live,
html[data-theme="dark"] body.kft-page-profile,
html[data-theme="dark"] body.kft-page-planner {
  --kft-page-grid: color-mix(in srgb, var(--kft-accent) 18%, transparent);
  --kft-page-stripe: color-mix(in srgb, var(--kft-accent-2) 14%, transparent);
  --kft-page-gradient:
    linear-gradient(126deg, color-mix(in srgb, #10141b 80%, var(--kft-accent) 20%) 0%, rgba(16,20,27,0) 46%),
    linear-gradient(220deg, color-mix(in srgb, #0f141c 78%, var(--kft-accent-2) 22%) 0%, rgba(16,20,27,0) 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-paper) 88%, #171b22 12%) 0%, var(--bg-paper) 58%, #090c11 100%);
}

/* ── Gate: GSAP CardSwap perspective stack ── */
.kft-gate .kft-card-swap-tour {
  overflow: visible !important;
  isolation: isolate;
}

.kft-gate .kft-swap-card {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  inset: auto !important;
  width: min(440px, calc(100% - 48px)) !important;
  height: min(340px, calc(100% - 48px)) !important;
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  will-change: transform !important;
  transition: border-color 220ms ease, box-shadow 220ms ease, opacity 260ms ease !important;
}

/* ── Fallback for when GSAP has not yet initialised ── */
.kft-gate .kft-swap-card:not([data-gsap-init]) {
  opacity: 0;
}
.kft-gate .kft-swap-card.is-active:not([data-gsap-init]) {
  opacity: 1;
}

/* Final repair: stable opening gate + tidy control panels. */
.kft-gate {
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 2vw, 24px) !important;
  background:
    linear-gradient(135deg, rgba(6, 8, 14, 0.88), rgba(15, 20, 30, 0.78)),
    rgba(6, 8, 14, 0.82) !important;
}

.kft-gate .kft-gate-panel {
  width: min(900px, calc(100vw - 32px)) !important;
  max-height: min(680px, calc(100dvh - 32px)) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: var(--bg-white) !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  overflow: hidden !important;
}

.kft-gate .kft-gate-brand {
  display: flex !important;
  flex: 0 0 250px !important;
  min-height: 0 !important;
  padding: 28px 24px 24px !important;
  background:
    linear-gradient(155deg, #ff5f1f 0%, #d94a16 56%, #8e2106 100%) !important;
}

.kft-gate .kft-gate-brand-logo {
  width: 48px !important;
  height: 48px !important;
  margin: 0 0 18px !important;
  border-radius: 10px !important;
}

.kft-gate .kft-gate-brand-name {
  margin: 0 0 8px !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

.kft-gate .kft-gate-brand-title {
  max-width: 12ch !important;
  margin: 0 0 14px !important;
  color: #fff !important;
  font-size: clamp(1.55rem, 2.4vw, 2.05rem) !important;
  line-height: 1.05 !important;
}

.kft-gate .kft-gate-brand-desc {
  max-width: 28ch !important;
  margin: 0 auto 0 0 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 12px !important;
  line-height: 1.56 !important;
}

.kft-gate .kft-gate-brand-pills {
  display: flex !important;
  margin-top: auto !important;
  gap: 6px !important;
}

.kft-gate .kft-gate-brand-pill {
  background: rgba(255, 255, 255, 0.13) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.84) !important;
}

.kft-gate .kft-gate-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template-rows: none !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-white) 94%, var(--kft-accent) 4%), var(--bg-white)) !important;
}

.kft-gate .kft-gate-content-header {
  min-height: 56px !important;
  padding: 16px 20px 12px !important;
  border-bottom: 1px solid var(--kft-line) !important;
  align-items: center !important;
}

.kft-gate .kft-gate-content-label {
  color: var(--text-muted) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.1em !important;
}

.kft-gate .kft-gate-close {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--bg-neutral) 76%, var(--bg-white)) !important;
}

.kft-gate .kft-gate-products {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  padding: 14px 20px 12px !important;
  overflow-y: auto !important;
}

.kft-gate .kft-gate-card {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  border-color: color-mix(in srgb, var(--gc) 22%, var(--kft-line)) !important;
  background: color-mix(in srgb, var(--bg-white) 94%, var(--gc) 4%) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.kft-gate .kft-gate-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 3px !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: var(--gc) !important;
}

.kft-gate .kft-gate-card:hover {
  border-color: color-mix(in srgb, var(--gc) 42%, var(--kft-line)) !important;
  background: color-mix(in srgb, var(--bg-white) 90%, var(--gc) 7%) !important;
  transform: translateX(2px) !important;
}

.kft-gate .kft-gate-icon {
  display: flex !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  position: static !important;
  background: color-mix(in srgb, var(--gc) 10%, var(--bg-white)) !important;
  border: 1px solid color-mix(in srgb, var(--gc) 22%, var(--kft-line)) !important;
}

.kft-gate .kft-gate-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 0 !important;
  min-width: 0 !important;
}

.kft-gate .kft-gate-card h3 {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.kft-gate .kft-gate-card p {
  max-width: none !important;
  font-size: 11px !important;
  line-height: 1.38 !important;
}

.kft-gate .kft-gate-arrow {
  grid-column: auto !important;
  color: var(--gc) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.kft-gate .kft-gate-foot {
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 20px 16px !important;
  border-top: 1px solid var(--kft-line) !important;
  background: color-mix(in srgb, var(--bg-white) 88%, var(--bg-neutral)) !important;
}

.kft-gate .kft-gate-check {
  justify-content: flex-start !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

.kft-gate .kft-gate-continue {
  width: auto !important;
  min-height: 40px !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  background: var(--kft-accent) !important;
}

html[data-theme="dark"] .kft-gate .kft-gate-panel {
  background: #151a22 !important;
}

html[data-theme="dark"] .kft-gate .kft-gate-content {
  background: linear-gradient(180deg, color-mix(in srgb, #151a22 92%, var(--kft-accent) 8%), #151a22) !important;
}

html[data-theme="dark"] .kft-gate .kft-gate-card {
  background: color-mix(in srgb, #1d2430 92%, var(--gc) 6%) !important;
}

@media (max-width: 760px) {
  .kft-gate .kft-gate-panel {
    width: min(560px, calc(100vw - 24px)) !important;
    flex-direction: column !important;
  }

  .kft-gate .kft-gate-brand {
    flex: none !important;
    min-height: 86px !important;
    padding: 16px 18px !important;
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    gap: 10px 12px !important;
    align-items: center !important;
  }

  .kft-gate .kft-gate-brand-logo {
    margin: 0 !important;
  }

  .kft-gate .kft-gate-brand-name,
  .kft-gate .kft-gate-brand-desc,
  .kft-gate .kft-gate-brand-pills {
    display: none !important;
  }

  .kft-gate .kft-gate-brand-title {
    margin: 0 !important;
    max-width: none !important;
    font-size: 1.28rem !important;
  }
}

@media (max-width: 540px) {
  .kft-gate {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .kft-gate .kft-gate-panel {
    width: 100% !important;
    max-height: 92dvh !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .kft-gate .kft-gate-brand {
    display: none !important;
  }

  .kft-gate .kft-gate-content-header {
    padding: 12px 14px 8px !important;
  }

  .kft-gate .kft-gate-products {
    padding: 10px 14px !important;
  }

  .kft-gate .kft-gate-card {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 10px 11px !important;
  }

  .kft-gate .kft-gate-icon {
    width: 34px !important;
    height: 34px !important;
  }

  .kft-gate .kft-gate-card p {
    display: none !important;
  }

  .kft-gate .kft-gate-foot {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .kft-gate .kft-gate-check {
    justify-content: center !important;
  }

.kft-gate .kft-gate-continue {
  width: 100% !important;
}
}

.kft-gate-logo-beat {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 220ms ease !important;
}

.kft-gate-logo-beat.is-playing {
  opacity: 1 !important;
}

.kft-gate-logo-beat.is-finished {
  opacity: 0 !important;
}

.kft-gate-intro-video {
  width: min(520px, 76vw) !important;
  max-height: min(70dvh, 560px) !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 14px !important;
  background: #05070b !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.14) !important;
}

@media (max-width: 540px) {
  .kft-gate-intro-video {
    width: min(94vw, 420px) !important;
    max-height: 62dvh !important;
    border-radius: 10px !important;
  }
}

body[class*="kft-page-"] :is(
  .xgi-controls,
  .xgi-controls-row2,
  .brk-controls,
  .proj-controls,
  .kft-controls,
  .pitch-action-row,
  .chips-row,
  .modal-filters,
  .modal-actions,
  .market-pagination,
  .exposure-pagination,
  .section-controls
) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--kft-accent) 18%, var(--kft-line)) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-white) 94%, var(--kft-accent) 3%), var(--bg-white)) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset, 0 12px 28px rgba(16, 24, 40, 0.07) !important;
  padding: 10px !important;
  text-align: left !important;
}

body[class*="kft-page-"] :is(.xgi-controls, .brk-controls, .kft-controls, .proj-controls) {
  margin-bottom: 12px !important;
}

body[class*="kft-page-"] .xgi-controls {
  margin-bottom: 0 !important;
  border-radius: 8px 8px 0 0 !important;
}

body[class*="kft-page-"] .xgi-controls-row2 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  border-top: 0 !important;
  border-radius: 0 0 8px 8px !important;
}

body[class*="kft-page-"] :is(.kft-row, .kft-row-left, .kft-row-right, .proj-controls-row, .proj-controls-row-tight) {
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: left !important;
}

body[class*="kft-page-"] :is(.proj-controls-row, .proj-controls-row-tight) {
  width: 100%;
}

body[class*="kft-page-"] .proj-note {
  width: 100%;
  margin: 6px 0 0 !important;
  border-radius: 8px !important;
}

body[class*="kft-page-"] .kft-hidden {
  width: 100%;
}

body[class*="kft-page-"] :is(.formation-btns, .gw-nav, .xgi-gw-nav, .xgi-pos-filter, .xgi-metric-filter, .proj-weeks, .proj-chips, .kft-hidden-chips) {
  border-radius: 8px !important;
  justify-content: flex-start !important;
}

body[class*="kft-page-"] .gw-nav,
body[class*="kft-page-"] .xgi-gw-nav {
  border: 1px solid color-mix(in srgb, var(--kft-accent) 18%, var(--kft-line)) !important;
  background: color-mix(in srgb, var(--bg-neutral) 76%, var(--bg-white)) !important;
  padding: 4px !important;
}

body[class*="kft-page-"] .ctrl-bar {
  margin: 0 12px 10px !important;
  border: 1px solid color-mix(in srgb, var(--kft-accent) 18%, var(--kft-line)) !important;
  border-radius: 8px !important;
  background: var(--bg-white) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset, 0 12px 28px rgba(16, 24, 40, 0.07) !important;
  overflow: hidden !important;
}

body[class*="kft-page-"] .chips-row {
  margin: 0 12px 10px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--kft-accent) 18%, var(--kft-line)) !important;
}

body[class*="kft-page-"] .pitch-action-row {
  margin: 10px 0 !important;
}

body[class*="kft-page-"] :is(.xgi-controls, .xgi-controls-row2, .brk-controls, .kft-controls, .proj-controls, .pitch-action-row, .chips-row) > * {
  flex-shrink: 0;
}

body[class*="kft-page-"] :is(.xgi-search, .brk-search, .proj-input, .market-search, .modal-search) {
  min-height: 38px !important;
}

@media (max-width: 700px) {
  body[class*="kft-page-"] :is(
    .xgi-controls,
    .xgi-controls-row2,
    .brk-controls,
    .proj-controls,
    .kft-controls,
    .pitch-action-row,
    .chips-row,
    .modal-filters,
    .modal-actions,
    .market-pagination,
    .exposure-pagination,
    .section-controls
  ) {
    justify-content: stretch !important;
  }

  body[class*="kft-page-"] :is(.xgi-controls, .xgi-controls-row2, .brk-controls, .kft-controls, .pitch-action-row, .chips-row) > :is(button, a, label, select, input, .xgi-gw-nav, .gw-nav) {
    flex: 1 1 150px !important;
  }

  body[class*="kft-page-"] :is(.xgi-gw-nav, .gw-nav) {
    justify-content: center !important;
  }
}

/* Feature control panels: the actual working controls on each tool/page. */
body[class*="kft-page-"] :is(
  .section-controls,
  .graph-toolbar,
  .league-controls,
  .league-pagination,
  .bracket-controls,
  .bracket-actions,
  .planner-topbar,
  .pitch-action-row,
  .transfer-head-row,
  .paths-head,
  .path-slot-top,
  .modal-filters,
  .modal-actions,
  .market-pagination,
  .exposure-pagination,
  .xgi-edit-footer,
  #tickerFdrEditor > div:last-child,
  #xptsModalBody > div:last-child
) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100%;
  min-height: 44px;
  padding: 9px !important;
  border: 1px solid color-mix(in srgb, var(--kft-accent) 20%, var(--kft-line)) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-white) 92%, var(--kft-accent) 4%), var(--bg-white)) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 12px 26px rgba(16, 24, 40, 0.07) !important;
  text-align: left !important;
}

body[class*="kft-page-"] :is(.graph-toolbar, .league-controls, .league-pagination) {
  margin: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body[class*="kft-page-"] :is(.planner-topbar, .pitch-action-row, .chips-row, .ctrl-bar) {
  max-width: calc(100% - 24px);
  margin-left: 12px !important;
  margin-right: 12px !important;
}

body[class*="kft-page-"] .live-card-head > div:has(.formation-btns),
body[class*="kft-page-"] .live-card-head > div:has(.control-btn),
body[class*="kft-page-"] .live-card-head > div:has(.compare-btn),
body[class*="kft-page-"] .live-card-head > div:has(.plan-btn) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 8px !important;
  border: 1px solid color-mix(in srgb, var(--kft-accent) 18%, var(--kft-line)) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--bg-white) 88%, var(--kft-accent) 5%) !important;
}

body[class*="kft-page-"] .pdash-actions,
body[class*="kft-page-"] .cap-panel-body {
  padding: 8px !important;
  border: 1px solid color-mix(in srgb, var(--kft-accent) 18%, var(--kft-line)) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-white) 92%, var(--kft-accent) 4%), var(--bg-white)) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) inset !important;
}

body[class*="kft-page-"] .pdash-actions {
  gap: 6px !important;
}

body[class*="kft-page-"] .path-slot-top {
  margin-bottom: 8px !important;
}

body[class*="kft-page-"] :is(.transfer-head-row, .paths-head) {
  margin-bottom: 10px !important;
}

body[class*="kft-page-"] :is(.gw-select-wrap, .chip-toggle, .impact-window-control) {
  min-height: 34px;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 9px !important;
  border: 1px solid color-mix(in srgb, var(--kft-accent) 18%, var(--kft-line)) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--bg-neutral) 72%, var(--bg-white)) !important;
}

body[class*="kft-page-"] :is(.section-controls, .graph-toolbar, .league-controls, .league-pagination, .bracket-actions, .planner-topbar, .pitch-action-row, .path-slot-top) > :is(button, a, label, select, input, .gw-select-wrap, .gw-nav, .shell-pill) {
  flex-shrink: 0;
}

@media (max-width: 700px) {
  body[class*="kft-page-"] :is(
    .section-controls,
    .graph-toolbar,
    .league-controls,
    .league-pagination,
    .bracket-controls,
    .bracket-actions,
    .planner-topbar,
    .pitch-action-row,
    .transfer-head-row,
    .paths-head,
    .path-slot-top
  ) {
    justify-content: stretch !important;
  }

  body[class*="kft-page-"] :is(.section-controls, .graph-toolbar, .league-controls, .league-pagination, .bracket-actions, .planner-topbar, .pitch-action-row, .path-slot-top) > :is(button, a, label, select, input, .gw-select-wrap, .gw-nav, .shell-pill) {
    flex: 1 1 150px !important;
  }
}

/* Overlay and control repairs. */
:root {
  --kft-freeze-bg: rgba(248, 250, 252, 0.38);
  --kft-freeze-bg-strong: rgba(248, 250, 252, 0.48);
  --kft-freeze-bg-soft: rgba(248, 250, 252, 0.28);
}

html[data-theme="dark"] {
  --kft-freeze-bg: rgba(3, 6, 12, 0.58);
  --kft-freeze-bg-strong: rgba(1, 3, 8, 0.68);
  --kft-freeze-bg-soft: rgba(3, 6, 12, 0.50);
}

html.kft-scroll-locked {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.kft-scroll-locked {
  position: fixed !important;
  left: 0;
  right: 0;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.kft-nav-menu-active::after,
body.brk-tooltip-active::after {
  content: "";
  position: fixed;
  inset: var(--kft-nav-h, 68px) 0 0;
  z-index: 890;
  pointer-events: none;
  background: var(--kft-freeze-bg);
  backdrop-filter: blur(14px) saturate(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
}

body.brk-tooltip-active::after {
  inset: 0;
  z-index: 589;
  background: var(--kft-freeze-bg-strong);
}

body.brk-tooltip-active .xgi-tooltip.show {
  z-index: 620 !important;
  pointer-events: auto;
}

.xgi-edit-overlay {
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.kft-dock-cover.open {
  z-index: 930 !important;
}

.kft-dock-cover.open > .kft-dock-bar,
.kft-dock-cover.open > .kft-control-deck-panel {
  z-index: 931 !important;
}

.brk-overlay {
  z-index: 920 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.brk-overlay[hidden] {
  display: none !important;
}

.brk-dropdown {
  z-index: 930 !important;
}

body.kft-options-open {
  background-attachment: scroll !important;
}

body.kft-options-open .brk-overlay {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 600px) {
  body.kft-options-open .kft-dock-cover.open > .kft-dock-bar,
  body.kft-options-open .kft-dock-cover.open > .kft-control-deck-panel {
    overflow: visible !important;
  }

  .brk-dropdown {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    bottom: auto !important;
    width: min(248px, calc(100vw - 24px)) !important;
    min-width: min(172px, calc(100vw - 24px)) !important;
    max-height: min(56vh, 360px) !important;
    border-radius: 12px !important;
    transform: none !important;
    animation: brkDropInCompact 0.13s ease both !important;
  }

  #xgiSortPanel,
  #projSortPanel,
  #brkSortPanel {
    left: 0 !important;
    right: auto !important;
  }

  #xgiFilterPanel,
  #projFilterPanel,
  #brkFilterPanel {
    left: auto !important;
    right: 0 !important;
  }

  @keyframes brkDropInCompact {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

html[data-theme="dark"] .modal-overlay {
  background: var(--kft-freeze-bg-strong) !important;
}

@media (max-width: 768px) {
  body.kft-nav-menu-active .nav-links.active {
    max-height: calc(100dvh - var(--kft-nav-h, 60px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: color-mix(in srgb, var(--kft-nav-color, var(--kft-accent, #E85A1A)) 88%, rgba(12,16,24,0.28)) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  }

  html[data-theme="dark"] body.kft-nav-menu-active .nav-links.active {
    background: color-mix(in srgb, var(--bg-white) 76%, var(--kft-nav-color, var(--kft-accent, #E85A1A)) 24%) !important;
  }
}

@media (max-width: 700px) {
  .kft-dock-cover,
  .kft-dock-cover.open > .kft-dock-bar,
  .kft-dock-cover.open > .kft-control-deck-panel {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .kft-dock-cover.open > .kft-control-deck-panel {
    align-content: flex-start !important;
    overscroll-behavior: contain !important;
  }

  .kft-dock-cover.open > .kft-control-deck-panel > *,
  .kft-dock-cover.open > .kft-control-deck-panel :is(.brk-menu-wrap, button, a, label, select, input) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .kft-dock-cover.open > .kft-control-deck-panel .kft-dock-search,
  .kft-dock-cover.open > .kft-control-deck-panel .kft-dock-search:focus {
    width: 100% !important;
    max-width: 100% !important;
  }
}

body[class*="kft-page-"] .planner-topbar .kft-dock-bar {
  gap: 3px !important;
  padding: 5px 7px !important;
  border-radius: 16px !important;
  flex-wrap: nowrap !important;
  width: fit-content !important;
  max-width: 100% !important;
}

body[class*="kft-page-"] .planner-gw-topbar {
  justify-content: center !important;
  text-align: center !important;
  padding: 6px 12px !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body[class*="kft-page-"] .planner-gw-topbar .planner-gw-dock {
  margin: 0 auto !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.planner-deadline-state[hidden] {
  display: none !important;
}

body[class*="kft-page-"] .gw-nav-btn.kft-dock-item {
  min-width: 32px !important;
  width: auto !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 9px !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

body[class*="kft-page-"] .gw-nav-btn.kft-dock-item:hover:not(:disabled),
body[class*="kft-page-"] .gw-nav-btn.kft-dock-item:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--kft-accent, #E85A1A) 9%, var(--bg-white)) !important;
  border-color: color-mix(in srgb, var(--kft-accent, #E85A1A) 26%, var(--kft-soft-line, rgba(0,0,0,0.08))) !important;
  color: var(--text-ink) !important;
  transform: none !important;
}

body[class*="kft-page-"] .gw-nav-btn.kft-dock-item:disabled {
  opacity: 0.32 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

body[class*="kft-page-"] .gw-nav-label {
  min-width: 46px !important;
  padding: 0 5px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 32px !important;
  text-align: center !important;
}

body[class*="kft-page-"] .planner-gw-topbar .gw-nav-label {
  color: var(--text-ink) !important;
}

.deadline-timer.xgi-deadline {
  min-height: 22px;
  padding: 0 4px;
  letter-spacing: 0;
}

.deadline-timer.soon .rolling-counter {
  --roll-bg: color-mix(in srgb, #fff7e8 82%, #f4a62a 18%);
}

.deadline-timer.urgent .rolling-counter {
  --roll-bg: color-mix(in srgb, #fff0f2 78%, var(--signal-red) 22%);
}

.deadline-timer.passed .rolling-counter {
  opacity: 0.58;
}

/* ═══════════════════════════════════════════════════════════
   KFT UI Polish — button system, card transitions, info pages
   ═══════════════════════════════════════════════════════════ */

/* ─── Hero CTA buttons (index.html) ─── */
.btn {
  border-radius: 8px !important;
  font-weight: 780 !important;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease !important;
}

.btn-primary {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary-orange, #FF5F1F) 90%, #FFFFFF 10%),
    var(--primary-orange, #FF5F1F)
  ) !important;
  border-color: color-mix(in srgb, var(--primary-orange, #FF5F1F) 72%, #000000 28%) !important;
  color: #FFFFFF !important;
  box-shadow:
    0 2px 6px color-mix(in srgb, var(--primary-orange, #FF5F1F) 28%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--primary-orange, #FF5F1F) 32%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

.btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.14) !important;
}

.btn-primary:focus-visible {
  outline: 2px solid var(--primary-orange, #FF5F1F) !important;
  outline-offset: 2px !important;
}

.btn-secondary {
  background: var(--bg-white, #FFFFFF) !important;
  border-color: color-mix(in srgb, var(--primary-orange, #FF5F1F) 68%, var(--border, #E6E2D8)) !important;
  color: var(--primary-orange, #FF5F1F) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.64) !important;
}

.btn-secondary:hover {
  transform: translateY(-1px) !important;
  background: color-mix(in srgb, var(--primary-orange, #FF5F1F) 6%, var(--bg-white, #FFFFFF)) !important;
  box-shadow: 0 6px 18px rgba(16,24,40,0.08), inset 0 1px 0 rgba(255,255,255,0.64) !important;
}

.btn-secondary:active {
  transform: translateY(0) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06) !important;
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--primary-orange, #FF5F1F) !important;
  outline-offset: 2px !important;
}

/* ─── xGI week / tab buttons ─── */
.week-btn {
  border-radius: var(--kft-control-radius, 8px) !important;
  font-weight: 780 !important;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease !important;
}

.week-btn:hover {
  border-color: var(--primary-orange, #FF5F1F) !important;
  color: var(--primary-orange, #FF5F1F) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(16,24,40,0.08) !important;
}

.week-btn.active {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary-orange, #FF5F1F) 90%, #FFFFFF 10%),
    var(--primary-orange, #FF5F1F)
  ) !important;
  border-color: color-mix(in srgb, var(--primary-orange, #FF5F1F) 72%, #000000 28%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-orange, #FF5F1F) 26%, transparent) !important;
  transform: none !important;
}

.week-btn:focus-visible {
  outline: 2px solid var(--primary-orange, #FF5F1F) !important;
  outline-offset: 2px !important;
}

/* ─── Focus-visible rings on all control buttons ─── */
.control-btn:focus-visible,
.compare-btn:focus-visible,
.plan-btn:focus-visible,
.kft-btn:focus-visible,
.proj-btn:focus-visible,
.xgi-action-btn:focus-visible,
.xgi-page-btn:focus-visible,
.bracket-open-btn:focus-visible,
.bracket-clear-btn:focus-visible,
.bracket-add-btn:focus-visible,
.mfilter:focus-visible,
.mkt-page-btn:focus-visible,
.pdash-action-btn:focus-visible,
.pcard-action:focus-visible,
.pcard-float-btn:focus-visible,
.gw-chip:focus-visible,
.xgi-gw-btn:focus-visible,
.xgi-pos-btn:focus-visible,
.brk-pos-btn:focus-visible,
.xgi-sort-btn:focus-visible,
.brk-sort-btn:focus-visible {
  outline: 2px solid var(--kft-accent) !important;
  outline-offset: 2px !important;
}

/* ─── Active press states on control buttons ─── */
.control-btn:active,
.compare-btn:active,
.plan-btn:active,
.kft-btn:active,
.proj-btn:active,
.xgi-action-btn:active,
.xgi-page-btn:active,
.bracket-open-btn:active,
.bracket-clear-btn:active,
.bracket-add-btn:active,
.mfilter:active,
.mkt-page-btn:active,
.pdash-action-btn:active,
.pcard-action:active,
.pcard-float-btn:active {
  transform: translateY(0) scale(0.99) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.10) !important;
}

/* ─── Info page cards: smooth hover transitions ─── */
.hero-card,
.content-card {
  transition:
    transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease !important;
}

/* ─── Notice component (about, methodology etc.) ─── */
.notice {
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--kft-accent) 5%, var(--kft-muted-surface, var(--bg-neutral))) !important;
}

/* ─── Rule items (methodology, terms, etc.) ─── */
.rule-item {
  border-radius: 8px !important;
  border-color: var(--kft-line) !important;
  background: var(--kft-surface, var(--bg-neutral)) !important;
  box-shadow: var(--kft-shadow-1), var(--kft-inset) !important;
}

/* ─── Page kicker badge (info pages) ─── */
.page-kicker {
  background: color-mix(in srgb, var(--kft-accent) 9%, var(--bg-neutral)) !important;
  color: color-mix(in srgb, var(--kft-accent) 72%, var(--text-muted)) !important;
  border: 1px solid color-mix(in srgb, var(--kft-accent) 22%, var(--border)) !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ─── Contact buttons (about/contact pages) ─── */
.contact-btn:hover {
  box-shadow: 0 4px 12px rgba(16,24,40,0.09) !important;
}

.contact-btn:focus-visible {
  outline: 2px solid var(--primary-orange, #FF5F1F) !important;
  outline-offset: 2px !important;
}

/* ─── Download link (index.html xGI section) ─── */
.download-link {
  border-radius: 8px !important;
  font-weight: 780 !important;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease !important;
}

.download-link:hover {
  transform: translateY(-1px) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(16,24,40,0.12) !important;
}

.download-link:focus-visible {
  outline: 2px solid var(--secondary-blue, #007AFF) !important;
  outline-offset: 2px !important;
}

/* ─── Footer links ─── */
footer a {
  color: var(--text-muted) !important;
  transition: color 160ms ease !important;
}

footer a:hover {
  color: var(--kft-accent) !important;
}

/* ─── Reduced motion: skip transforms on new additions ─── */
@media (prefers-reduced-motion: reduce) {
  .hero-card,
  .content-card,
  .rule-item,
  .btn,
  .btn-primary,
  .btn-secondary,
  .week-btn,
  .contact-btn,
  .download-link {
    transition: none !important;
    transform: none !important;
  }
}

/* ═══ KFT Skeleton Loading System ═══ */

@keyframes kft-shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position:  800px 0; }
}

.kft-skeleton {
  display: block;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--bg-neutral, #EAECF0) 25%,
    color-mix(in srgb, var(--bg-neutral, #EAECF0) 8%, var(--bg-white, #FFFFFF)) 50%,
    var(--bg-neutral, #EAECF0) 75%
  );
  background-size: 1600px 100%;
  animation: kft-shimmer 1.8s ease-in-out infinite;
}

/* Fixture skeleton list (bonus / defcon sections) */
.kft-skel-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

.kft-skel-fixture-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.kft-skel-fixture-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kft-skel-line-lg  { height: 18px; width: 62%; }
.kft-skel-line-sm  { height: 12px; width: 34%; }
.kft-skel-pill     { height: 28px; width: 58px; flex: 0 0 58px; border-radius: 999px !important; }

/* Price row skeleton (riser / faller sections) */
.kft-skel-price-list { padding: 8px 12px; gap: 8px; }

.kft-skel-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.kft-skel-price-row:last-child { border-bottom: none; }

.kft-skel-line-name  { height: 14px; width: 54%; }
.kft-skel-line-price { height: 14px; width: 22%; }

@media (prefers-reduced-motion: reduce) {
  .kft-skeleton { animation: none !important; }
}

/* ─── xGI / bracket / projection button micro-interactions ─── */
.xgi-pos-btn:active,
.brk-pos-btn:active,
.xgi-sort-btn:active,
.brk-sort-btn:active {
  transform: scale(0.97) !important;
}

.xgi-pos-btn:focus-visible,
.brk-pos-btn:focus-visible,
.xgi-sort-btn:focus-visible,
.brk-sort-btn:focus-visible {
  outline: 2px solid var(--kft-accent, var(--primary-orange, #FF5F1F)) !important;
  outline-offset: 2px !important;
}