:root {
  color-scheme: light;
  --bg: #eef2f5;
  --panel: #ffffff;
  --ink: #17212b;
  --muted: #657382;
  --line: #d8e1e8;
  --soft: #f7f9fb;
  --accent: #176b87;
  --accent-strong: #0f5368;
  --found-bg: #e7f5ef;
  --found: #1f7250;
  --missing-bg: #fff1df;
  --missing: #9a5b00;
  --danger-bg: #fdeeee;
  --danger: #ad2f2b;
  --warning-bg: #fff7df;
  --warning: #805a00;
  --shadow-sm: 0 10px 28px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 18px 40px rgba(15, 23, 42, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
}

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(15, 36, 51, 0.82), rgba(15, 116, 144, 0.72)),
    url("/static/assets/backgrounds/rke_splash_background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  visibility: visible;
  transition: opacity 650ms ease, visibility 650ms ease;
}

.splash-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18)),
    linear-gradient(135deg, rgba(8, 22, 32, 0.42), rgba(8, 74, 96, 0.34));
  z-index: 1;
}

.splash-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  padding: 32px;
  max-width: 860px;
  animation: splashFadeUp 850ms ease both;
}

.splash-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.splash-logo {
  width: min(280px, 54vw);
  height: auto;
  display: block;
  margin: 0 auto 24px auto;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.26));
}

.splash-logo-fallback {
  display: none;
  font-size: 78px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 22px;
}

.splash-logo-missing .splash-logo-fallback {
  display: block;
}

.splash-title {
  margin: 0;
  font-size: clamp(36px, 5.8vw, 68px);
  line-height: 1.02;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.splash-credit {
  margin: 14px 0 0 0;
  font-size: clamp(15px, 1.65vw, 20px);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.cinematic-text-main {
  animation:
    cinematicTitleIn 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both,
    cinematicTitleGlow 2.8s ease-in-out 1.15s 1;
  transform-origin: center;
  will-change: transform, opacity, text-shadow, letter-spacing, filter;
}

.cinematic-text-sub {
  animation:
    cinematicSubIn 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both,
    cinematicSubGlow 2.8s ease-in-out 1.45s 1;
  transform-origin: center;
  will-change: transform, opacity, text-shadow, letter-spacing, filter;
}

.splash-loading {
  margin-top: 24px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.78;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}

.loading-dots::after {
  content: "";
  display: inline-block;
  width: 1.6em;
  text-align: left;
  animation: loadingDots 1.2s steps(4, end) infinite;
}

@keyframes loadingDots {
  0% {
    content: "";
  }

  25% {
    content: ".";
  }

  50% {
    content: "..";
  }

  75%,
  100% {
    content: "...";
  }
}

@keyframes cinematicTitleIn {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.965);
    letter-spacing: 0.02em;
    filter: blur(3px);
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }

  55% {
    opacity: 1;
    transform: translateY(0) scale(1.035);
    letter-spacing: 0.075em;
    filter: blur(0);
    text-shadow:
      0 0 18px rgba(255, 255, 255, 0.40),
      0 0 34px rgba(125, 211, 252, 0.28),
      0 12px 34px rgba(0, 0, 0, 0.28);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    letter-spacing: 0.055em;
    filter: blur(0);
    text-shadow:
      0 0 10px rgba(255, 255, 255, 0.20),
      0 10px 28px rgba(0, 0, 0, 0.24);
  }
}

@keyframes cinematicTitleGlow {
  0% {
    transform: scale(1);
    text-shadow:
      0 0 10px rgba(255, 255, 255, 0.20),
      0 10px 28px rgba(0, 0, 0, 0.24);
  }

  38% {
    transform: scale(1.018);
    text-shadow:
      0 0 20px rgba(255, 255, 255, 0.58),
      0 0 46px rgba(125, 211, 252, 0.42),
      0 0 72px rgba(15, 116, 144, 0.28),
      0 12px 34px rgba(0, 0, 0, 0.30);
  }

  72% {
    transform: scale(1.006);
    text-shadow:
      0 0 15px rgba(255, 255, 255, 0.32),
      0 0 32px rgba(125, 211, 252, 0.24),
      0 10px 28px rgba(0, 0, 0, 0.26);
  }

  100% {
    transform: scale(1);
    text-shadow:
      0 0 10px rgba(255, 255, 255, 0.20),
      0 10px 28px rgba(0, 0, 0, 0.24);
  }
}

@keyframes cinematicSubIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    letter-spacing: 0.08em;
    filter: blur(2px);
  }

  65% {
    opacity: 1;
    transform: translateY(0) scale(1.018);
    letter-spacing: 0.155em;
    filter: blur(0);
    text-shadow:
      0 0 14px rgba(255, 255, 255, 0.32),
      0 0 28px rgba(125, 211, 252, 0.20);
  }

  100% {
    opacity: 0.92;
    transform: translateY(0) scale(1);
    letter-spacing: 0.14em;
    filter: blur(0);
    text-shadow:
      0 0 8px rgba(255, 255, 255, 0.18),
      0 8px 22px rgba(0, 0, 0, 0.22);
  }
}

@keyframes cinematicSubGlow {
  0% {
    transform: scale(1);
    text-shadow:
      0 0 8px rgba(255, 255, 255, 0.18),
      0 8px 22px rgba(0, 0, 0, 0.22);
  }

  45% {
    transform: scale(1.01);
    text-shadow:
      0 0 16px rgba(255, 255, 255, 0.42),
      0 0 34px rgba(125, 211, 252, 0.28),
      0 8px 24px rgba(0, 0, 0, 0.24);
  }

  100% {
    transform: scale(1);
    text-shadow:
      0 0 8px rgba(255, 255, 255, 0.18),
      0 8px 22px rgba(0, 0, 0, 0.22);
  }
}

@keyframes splashFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.shell {
  width: min(1440px, calc(100% - 32px));
  margin: 14px auto 32px;
}

.app-header,
.panel,
.video-panel,
.result-card,
.detail-panel,
.video-card,
.library-category,
.diagnostic-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(23, 33, 43, 0.06);
}

.app-header {
  background-color: #ffffff;
  background-image: url("/background/background.png");
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 18px;
  display: block;
  min-height: 118px;
  overflow: hidden;
  padding: 18px 24px;
  position: relative;
}

.app-header::before {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.90) 46%,
    rgba(255, 255, 255, 0.72) 100%
  );
  content: "";
  inset: 0;
  position: absolute;
  z-index: 0;
}

.app-header-content {
  position: relative;
  z-index: 1;
}

.header-brand {
  align-items: center;
  display: flex;
  gap: 18px;
  min-height: 82px;
}

.header-logo {
  display: block;
  flex-shrink: 0;
  height: auto;
  width: 64px;
}

.header-text {
  min-width: 0;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.app-title,
h1 {
  color: #0f2633;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.4px;
  line-height: 1.05;
  text-transform: uppercase;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 16px;
}

.app-header p,
.section-heading p,
.subline,
.description,
.result-meta,
.video-card p,
.library-topics button,
.detail-grid dd {
  color: var(--muted);
}

.app-header p,
.section-heading p {
  margin-top: 6px;
}

.app-subtitle,
.app-header p {
  color: #50606c;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}

.header-actions,
.tabs,
.result-actions,
.player-actions,
.detail-actions,
.result-meta,
.chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

button {
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  min-height: 38px;
  padding: 0 14px;
}

button:hover {
  background: var(--accent-strong);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.tabs {
  margin: 14px 0 16px;
}

.chips button {
  background: #dfe8ee;
  color: #263846;
}

.top-nav {
  align-items: center;
  display: flex;
  gap: 22px;
  padding: 6px 2px 12px;
}

.app-nav-row {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 14px 0 22px;
}

.app-nav-left {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.app-nav-user {
  align-items: center;
  color: #334155;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 14px;
  justify-content: flex-end;
  margin-left: auto;
}

.app-nav-user form {
  margin: 0;
}

.app-nav-user-name {
  color: #0f2433;
  font-weight: 800;
}

.app-nav-logout {
  background: #0f7490;
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  font-weight: 800;
  min-height: 34px;
  padding: 7px 12px;
}

.app-nav-logout:hover {
  background: #0f5368;
}

.account-menu-shell {
  position: relative;
}

.account-menu-trigger {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #506270;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  min-height: 0;
  padding: 0;
  position: relative;
}

.account-menu-trigger:hover {
  background: transparent;
  color: #0f7490;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.account-menu {
  background: #ffffff;
  border: 1px solid #d7e3e8;
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(15, 36, 51, 0.16);
  display: grid;
  gap: 2px;
  min-width: 170px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 90;
}

.account-menu[hidden] {
  display: none;
}

.account-menu button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #223843;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 9px;
  text-align: left;
  width: 100%;
}

.account-menu button:hover {
  background: #edf5f7;
}

.account-modal-backdrop {
  background: rgba(15, 36, 51, 0.36);
  inset: 0;
  position: fixed;
  z-index: 120;
}

.account-modal-backdrop[hidden],
.account-modal[hidden] {
  display: none;
}

.account-modal {
  background: #ffffff;
  border: 1px solid #d7e3e8;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(15, 36, 51, 0.22);
  left: 50%;
  max-width: min(420px, calc(100vw - 32px));
  padding: 16px;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 130;
}

.account-modal-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.account-modal-head h2 {
  color: #162d3a;
  font-size: 18px;
  margin: 0;
}

.account-modal-close {
  background: transparent;
  border: 0;
  color: #64748b;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.account-modal-form {
  display: grid;
  gap: 10px;
}

.account-modal-form label {
  color: #526b77;
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 4px;
}

.account-modal-form input {
  border: 1px solid #cbdde4;
  border-radius: 7px;
  min-height: 36px;
  padding: 7px 9px;
}

.account-modal-form button[type="submit"] {
  background: #0f7490;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  font-weight: 850;
  min-height: 36px;
}

.account-modal-status {
  color: #8a2f25;
  font-size: 12px;
  font-weight: 750;
  margin: 0;
  min-height: 16px;
}

.top-nav .tab {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #506270;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  min-height: 0;
  padding: 0;
  position: relative;
}

.top-nav .tab:hover {
  background: transparent;
  color: #0f7490;
}

.tab.active {
  background: transparent;
  color: #0f7490;
  font-weight: 600;
}

.top-nav .tab.active::after {
  background: #0f7490;
  border-radius: 999px;
  bottom: -7px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.message {
  background: var(--danger-bg);
  border: 1px solid #efc4c4;
  border-radius: 8px;
  color: var(--danger);
  margin-top: 14px;
  padding: 14px;
}

.admin-actions {
  align-items: center;
  background: #f7fbfa;
  border: 1px solid #d7e6df;
  border-radius: 8px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin: 14px 0 10px;
  padding: 12px;
}

.admin-actions p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.admin-actions button {
  min-height: 36px;
  white-space: nowrap;
}

.index-status {
  background: #eef2f0;
  border: 1px solid #d7dfda;
  border-radius: 8px;
  color: #52645c;
  font-size: 12px;
  margin: 0 0 14px;
  padding: 10px 12px;
}

.index-status.success {
  background: #edf7f0;
  border-color: #cde4d3;
  color: #315c3b;
}

.index-status.error {
  background: #fff2ef;
  border-color: #f0c9bf;
  color: #8a3a2b;
}

.search-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(640px, 2.1fr) minmax(360px, 1fr);
  gap: 22px;
  align-items: start;
}

.video-column {
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 4px;
  position: sticky;
  top: 14px;
}

.search-column {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  height: calc(100vh - 145px);
  overflow-y: auto;
  padding: 14px 8px 18px 14px;
  scrollbar-gutter: stable;
}

.search-controls {
  background: rgba(248, 251, 253, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(216, 225, 232, 0.8);
  margin: -14px -8px 14px -14px;
  padding: 14px 10px 12px 14px;
  position: sticky;
  top: -14px;
  z-index: 5;
}

.search-options {
  margin-bottom: 12px;
}

.search-column::-webkit-scrollbar,
.video-column::-webkit-scrollbar {
  width: 8px;
}

.search-column::-webkit-scrollbar-thumb,
.video-column::-webkit-scrollbar-thumb {
  background: #b8c7d1;
  border-radius: 999px;
}

.search-column::-webkit-scrollbar-track,
.video-column::-webkit-scrollbar-track {
  background: transparent;
}

.search-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 18px;
  align-items: start;
}

.search-main,
.video-panel,
.panel {
  padding: 22px;
}

.search-main {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.hero-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

input,
select {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  min-height: 40px;
  padding: 0 12px;
}

.hero-search input {
  font-size: 15px;
  min-height: 44px;
  padding: 0 12px;
}

.hero-search button {
  min-height: 44px;
  padding: 0 14px;
}

.chips {
  margin-top: 10px;
}

.chips button {
  border-radius: 8px;
  font-size: 12px;
  min-height: 30px;
  padding: 0 10px;
}

.suggestions-row {
  margin-top: 10px;
}

.suggestions-row > span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.advanced-filters {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 10px;
  padding: 0;
}

.advanced-filters summary {
  color: var(--accent-strong);
  cursor: pointer;
  font-weight: 800;
  padding: 10px 12px;
}

.filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0 14px 14px;
}

.search-column .filters {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.filters label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  text-transform: uppercase;
}

.checkbox-label {
  align-content: center;
  grid-template-columns: auto 1fr;
  min-height: 40px;
  text-transform: none;
}

.checkbox-label input {
  min-height: 0;
}

.search-mode {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
}

.search-scope {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
}

.search-scope > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.search-scope label {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.search-scope input {
  min-height: auto;
}

.active-video-filter {
  align-items: center;
  background: #eef8f5;
  border: 1px solid #b9ded5;
  border-radius: 8px;
  color: #17483f;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 10px;
  justify-content: space-between;
  margin-top: 10px;
  padding: 8px 10px;
}

.active-video-filter button {
  background: #ffffff;
  border-color: #8bc5b7;
  color: #17483f;
  min-height: 30px;
  padding: 5px 9px;
}

.auth-user-menu {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.auth-user-menu a,
.admin-header a {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.auth-user-menu form,
.admin-header form {
  margin: 0;
}

.auth-user-menu button,
.admin-header button {
  min-height: 30px;
  padding: 5px 10px;
}

.login-page {
  background: #f4f7f8;
  min-height: 100vh;
}

.login-shell {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.login-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  max-width: 420px;
  padding: 26px 28px;
  text-align: center;
  width: 100%;
}

.auth-card {
  overflow: hidden;
}

.auth-view {
  display: grid;
  gap: 0;
}

.auth-view[hidden] {
  display: none;
}

.login-logo {
  display: block;
  height: 66px;
  margin: 0 auto 14px;
  width: auto;
}

.login-card h1 {
  display: grid;
  font-size: 24px;
  gap: 1px;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0 0 6px;
  text-align: center;
}

.login-card h1 span {
  display: block;
}

.login-brand-subtitle {
  color: #506270;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 18px;
  text-align: center;
}

.login-form,
.admin-form {
  display: grid;
  gap: 12px;
}

.login-form label,
.admin-form label {
  display: grid;
  gap: 5px;
}

.login-form label {
  color: #526270;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

.login-error,
.admin-status.error {
  color: #b42318;
  font-weight: 800;
}

.login-link-button,
.login-text-link {
  background: transparent;
  border: 0;
  color: #0f7490;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  margin-top: 12px;
  padding: 0;
  text-decoration: none;
}

.login-link-button:hover,
.login-text-link:hover {
  color: #0f5368;
  text-decoration: underline;
}

.login-forgot-form {
  margin-top: 0;
}

.login-reset-title {
  color: #162d3a;
  font-size: 18px;
  letter-spacing: 0;
  margin: 0 0 18px;
  text-align: center;
}

.login-help {
  color: #526b77;
  font-size: 12px;
  font-weight: 700;
  margin: 0;
  min-height: 16px;
  text-align: center;
}

.admin-page {
  background:
    linear-gradient(135deg, #edf4f6 0%, #f7f9fb 48%, #e8f1f2 100%);
  min-height: 100vh;
}

.admin-shell {
  margin: 0 auto;
  max-width: 1440px;
  padding: 28px;
}

.admin-header {
  align-items: center;
  background: #ffffff;
  border: 1px solid #dce6eb;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 18px 20px;
}

.admin-title {
  color: #0f2633;
  font-size: 28px;
  letter-spacing: 0;
  margin: 0;
  text-transform: none;
}

.admin-subtitle {
  color: #60717c;
  font-size: 14px;
  margin-top: 5px;
}

.admin-header nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.admin-header a {
  background: #eef5f6;
  border: 1px solid #d5e3e7;
  border-radius: 8px;
  color: #174758;
  min-height: 36px;
  padding: 9px 12px;
}

.admin-header button {
  background: #22313b;
  border-radius: 8px;
  min-height: 36px;
}

.admin-metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

.admin-metric-card,
.admin-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dce6eb;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}

.admin-metric-card {
  padding: 16px;
}

.admin-metric-card span {
  color: #657683;
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-metric-card strong {
  color: #0f2633;
  display: block;
  font-size: 30px;
  margin-top: 6px;
}

.admin-grid {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
}

.admin-card {
  max-width: 100%;
  overflow: hidden;
  padding: 18px;
}

.admin-users-card {
  min-width: 0;
}

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

.admin-section-heading h2 {
  color: #122b38;
  font-size: 18px;
}

.admin-section-heading p,
.admin-muted {
  color: #657683;
  font-size: 12px;
}

.admin-status {
  color: #315c3b;
  font-size: 13px;
  font-weight: 800;
}

.admin-form {
  grid-template-columns: 1fr;
}

.admin-field-group,
.permission-group {
  background: #f8fbfc;
  border: 1px solid #dce6eb;
  border-radius: 8px;
  display: grid;
  gap: 11px;
  padding: 14px;
}

.admin-field-group h3,
.permission-group-title {
  color: #314652;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  margin: 0;
  text-transform: uppercase;
}

.permission-group.compact {
  background: #ffffff;
  gap: 7px;
  padding: 10px;
}

.permission-group-special {
  background: #f6fbfd;
  border-color: #bcdde7;
  box-shadow: inset 3px 0 0 #0f7490;
}

.permission-group-help,
.permission-group-note {
  color: #647682;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  margin: -3px 0 0;
}

.permission-group-note {
  background: #eef7fa;
  border: 1px solid #d1e9f0;
  border-radius: 6px;
  color: #23586a;
  padding: 7px 8px;
}

.permission-row {
  align-items: center;
  color: #263846;
  display: flex;
  flex-direction: row;
  font-size: 13px;
  font-weight: 700;
  gap: 10px;
  min-height: 31px;
}

.admin-page input[type="checkbox"],
.admin-panel input[type="checkbox"],
.admin-form input[type="checkbox"],
.permissions-grid input[type="checkbox"],
.permission-row input[type="checkbox"] {
  accent-color: #0f7490;
  cursor: pointer;
  height: 16px;
  min-height: 16px;
  min-width: 16px;
  padding: 0;
  width: 16px;
}

.admin-btn {
  border-radius: 8px;
  min-height: 36px;
  padding: 0 12px;
}

.admin-btn-primary {
  background: #0f7490;
}

.admin-btn-primary:hover {
  background: #0f5368;
}

.admin-btn-secondary {
  background: #e7eef2;
  color: #243542;
}

.admin-btn-secondary:hover {
  background: #d7e3e9;
}

.admin-table-wrap {
  max-width: 100%;
  overflow-x: hidden;
  width: 100%;
}

.admin-table {
  border: 1px solid #dce6eb;
  border-radius: 10px;
  border-collapse: collapse;
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}

.admin-table th {
  background: #f1f6f8;
  color: #506270;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 12px 10px;
  text-transform: uppercase;
}

.admin-table td {
  background: #ffffff;
  color: #243542;
  font-size: 13px;
  overflow-wrap: anywhere;
  padding: 12px 10px;
  vertical-align: top;
}

.admin-table tr:hover td {
  background: #fbfdfe;
}

.admin-table tr.is-selected td {
  background: #f0f8fa;
}

.admin-table .col-user {
  width: 22%;
}

.admin-table .col-display {
  width: 24%;
}

.admin-table .col-status {
  width: 14%;
}

.admin-table .col-permissions {
  width: 28%;
}

.admin-table .col-actions {
  width: 12%;
}

.admin-table strong,
.admin-table .admin-muted {
  display: block;
}

.admin-inline-field {
  color: #657683;
  display: grid;
  font-size: 11px;
  font-weight: 800;
  gap: 5px;
  min-width: 190px;
  text-transform: uppercase;
}

.admin-inline-field + .admin-inline-field {
  margin-top: 8px;
}

.admin-status-pill {
  background: #edf2f4;
  border: 1px solid #dce6eb;
  border-radius: 999px;
  color: #506270;
  display: inline-block;
  font-size: 11px;
  font-weight: 850;
  margin: 0 6px 6px 0;
  padding: 5px 8px;
}

.admin-status-active {
  background: #e8f6ee;
  border-color: #c7e5d3;
  color: #23613e;
}

.admin-status-inactive {
  background: #fff0ed;
  border-color: #f0c9bf;
  color: #8a3a2b;
}

.admin-status-admin {
  background: #e8f2ff;
  border-color: #bdd7f4;
  color: #185a96;
}

.admin-permission-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.permission-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.permission-pill {
  align-items: center;
  background: #e6f3f6;
  border-radius: 999px;
  color: #0f5f75;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  white-space: nowrap;
}

.permission-pill.muted {
  background: #eef2f4;
  color: #64748b;
}

.admin-permission-summary span {
  background: #eef5f6;
  border: 1px solid #d5e3e7;
  border-radius: 999px;
  color: #315363;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 7px;
}

.permissions-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(145px, 1fr));
}

.admin-row-actions,
.admin-form-actions,
.admin-page .admin-actions {
  background: transparent;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin: 10px 0 0;
  padding: 0;
}

.admin-row-actions {
  margin: 0;
}

.admin-row-actions .admin-btn {
  font-size: 12px;
  min-height: 32px;
  padding: 0 9px;
  width: 100%;
}

.admin-form-actions {
  margin-top: 4px;
}

.admin-form-actions .admin-btn {
  flex: 1 1 120px;
}

.admin-panel,
.admin-card,
.admin-table-wrap {
  max-width: 100%;
}

.search-mode > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.search-mode label {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.search-mode input {
  min-height: auto;
}

.results-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.results-heading p {
  color: var(--muted);
}

.results-list {
  display: grid;
  gap: 12px;
  margin-top: 0;
}

.intent-line {
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 800;
  margin-top: 8px;
}

.result-group > h3 {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.result-group-list {
  display: grid;
  gap: 10px;
}

.result-card {
  background: #ffffff;
  cursor: pointer;
  border: 1px solid #dbe5ec;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.035);
  padding: 14px 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.result-card:focus,
.result-card:hover {
  border-color: #7fb3c8;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

.result-card.active-result {
  border-color: #0f7490;
  background: #fbfdff;
  box-shadow: 0 0 0 3px rgba(15, 116, 144, 0.10), 0 12px 24px rgba(15, 23, 42, 0.07);
}

.result-card-main,
.video-card-top,
.detail-header,
.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.result-badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.result-card h3 {
  color: #0f4f64;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.25;
  margin-bottom: 4px;
}

.result-card:hover h3 {
  text-decoration: underline;
}

.result-card .subline {
  font-size: 13px;
  line-height: 1.3;
}

.subtle-badge {
  background: #eef2f0;
  border-color: #d7dfda;
  color: #52645c;
}

.pinned-badge {
  background: #eaf7ef;
  border-color: #c9e6d2;
  color: #166534;
  font-weight: 800;
}

.work-badge {
  background: #e8f2ff;
  border-color: #bdd7f4;
  color: #185a96;
  font-weight: 800;
}

.description {
  color: #334155;
  display: -webkit-box;
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.5;
  margin-top: 8px;
  overflow: hidden;
}

.result-meta {
  gap: 6px;
  margin-top: 10px;
}

.matched-fields {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  margin-top: 7px;
}

.related-summary {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
  margin-top: 8px;
}

.related-results {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
}

.related-item {
  background: var(--soft);
  color: var(--ink);
  justify-content: flex-start;
  min-height: 34px;
  text-align: left;
}

.result-controls {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.result-controls button {
  background: #e8eef2;
  color: #263846;
}

.result-meta span,
.soft-pill,
.badge,
.found,
.missing,
.valid,
.invalid,
.warning,
.muted-badge {
  border-radius: 999px;
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 8px;
}

.result-meta span,
.soft-pill,
.muted-badge {
  background: var(--soft);
  border: 1px solid var(--line);
  color: #425260;
}

.badge {
  background: #edf6fa;
  color: var(--accent-strong);
}

.found,
.valid {
  background: var(--found-bg);
  color: var(--found);
}

.missing {
  background: var(--missing-bg);
  color: var(--missing);
}

.invalid {
  background: var(--danger-bg);
  color: var(--danger);
}

.warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.result-actions,
.detail-actions,
.player-actions {
  margin-top: 10px;
}

.result-actions {
  gap: 8px;
}

.result-actions button {
  border-radius: 8px;
  font-size: 12px;
  min-height: 32px;
  padding: 0 10px;
}

.btn-primary-action {
  background: var(--accent);
  color: #ffffff;
}

.btn-secondary-action,
.detail-actions button:nth-child(2),
.player-actions button {
  background: #e8eef2;
  color: #263846;
}

.btn-secondary-action:hover,
.detail-actions button:nth-child(2):hover,
.player-actions button:hover {
  background: #dbe6ed;
}

.result-actions .btn-pin {
  background: transparent;
  border: 1px solid #cde4d3;
  color: #245538;
}

.result-actions .btn-pin:hover {
  background: #dff1e5;
}

.video-player-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.video-player-header {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.video-player-header p {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

.video-frame-wrap {
  background: #111827;
  border-radius: 14px;
  margin-top: 14px;
  width: 100%;
}

.video-frame-wrap video,
#video-player {
  aspect-ratio: 16 / 9;
  background: #111827;
  border-radius: 14px;
  display: block;
  height: auto;
  max-height: none;
  min-height: 0;
  object-fit: contain;
  width: 100%;
}

.video-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.video-controls button {
  border-radius: 10px;
  min-height: 42px;
}

.video-missing {
  background: var(--missing-bg);
  border: 1px solid #f1d4ad;
  border-radius: 8px;
  color: var(--missing);
  line-height: 1.45;
  margin-top: 12px;
  padding: 12px;
}

.subtitle-status {
  color: var(--muted);
  font-size: 12px;
  margin: -4px 0 0;
}

.subtitle-status.available {
  color: #315c3b;
}

.panel {
  margin-top: 16px;
}

.library-list,
.video-card-grid {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.library-category {
  padding: 0;
  overflow: hidden;
}

.library-category-title {
  align-items: center;
  background: var(--panel);
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 16px;
  width: 100%;
}

.library-category-title:hover {
  background: var(--soft);
}

.library-topics {
  border-top: 1px solid var(--line);
  display: grid;
}

.library-topics button {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 16px;
  text-align: left;
}

.video-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.video-card {
  padding: 18px;
}

.video-card dl,
.detail-grid {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 8px 12px;
  margin: 14px 0 0;
}

.video-card dt,
.detail-grid dt {
  color: var(--ink);
  font-weight: 800;
}

.video-card dd,
.detail-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
}

details {
  margin-top: 12px;
}

summary {
  color: var(--accent-strong);
  cursor: pointer;
  font-weight: 800;
}

.diagnostic-grid,
.path-grid,
.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.path-grid,
.breakdown-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.diagnostic-card,
.path-item,
.breakdown-card {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.diagnostic-card span,
.path-item span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.diagnostic-card strong {
  display: block;
  font-size: 26px;
  margin-top: 8px;
}

code {
  color: var(--accent-strong);
  display: block;
  font-family: Consolas, "Courier New", monospace;
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.breakdown-card p {
  color: var(--muted);
  line-height: 1.5;
  margin-top: 8px;
}

.diagnostics-table-wrap {
  margin-top: 14px;
  overflow-x: auto;
  width: 100%;
}

table {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  white-space: normal;
}

th {
  background: #f3f7f9;
  color: #354452;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

td {
  color: #26323d;
  font-size: 13px;
  line-height: 1.35;
}

.filename-cell {
  font-weight: 800;
}

.detail-backdrop {
  background: rgba(15, 23, 32, 0.35);
  inset: 0;
  position: fixed;
  z-index: 20;
}

.detail-panel {
  bottom: 0;
  max-width: min(620px, 100vw);
  overflow-y: auto;
  padding: 22px;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(105%);
  transition: transform 160ms ease;
  width: 620px;
  z-index: 21;
}

.detail-panel.open {
  transform: translateX(0);
}

.detail-content {
  margin-top: 18px;
}

.detail-description {
  color: var(--ink);
  line-height: 1.55;
}

.detail-content h3 {
  margin-top: 22px;
}

.secondary-ref {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.pin-panel {
  max-width: min(520px, 100vw);
  width: 520px;
}

.pin-form {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.pin-form label,
.pin-scope-group legend {
  color: #354452;
  font-size: 13px;
  font-weight: 800;
}

.pin-form label {
  display: grid;
  gap: 6px;
}

.pin-form input,
.pin-form select {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  padding: 10px 12px;
}

.pin-scope-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
}

.pin-scope-group label {
  align-items: center;
  color: #263846;
  display: flex;
  font-weight: 700;
  gap: 8px;
}

.pin-scope-group input {
  width: auto;
}

.pin-result {
  background: #f7fafb;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.pin-result span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.pin-result p {
  color: var(--muted);
  margin-top: 6px;
}

.pin-status {
  background: #eef2f0;
  border: 1px solid #d7dfda;
  border-radius: 8px;
  color: #52645c;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 12px;
}

.pin-status.success {
  background: #edf7f0;
  border-color: #cde4d3;
  color: #315c3b;
}

.pin-status.error {
  background: #fff2ef;
  border-color: #f0c9bf;
  color: #8a3a2b;
}

.memory-actions {
  display: flex;
  gap: 8px;
  min-width: 150px;
}

.memory-actions button {
  background: #eef2f0;
  color: #52645c;
}

.manual-mark-box {
  align-items: center;
  background: #f7fbfa;
  border: 1px solid #d7e6df;
  border-radius: 10px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 12px;
  padding: 12px;
}

.manual-mark-box p {
  color: var(--muted);
  font-size: 12px;
  margin: 2px 0 0;
}

.manual-mark-box button {
  background: #1f7a62;
  color: #fff;
  white-space: nowrap;
}

.manual-mark-box button:disabled {
  background: #d7dedb;
  color: #6d7c76;
  cursor: not-allowed;
}

.mark-badge {
  background: #fff4df;
  border-color: #edd098;
  color: #7a4d00;
  font-weight: 800;
}

.danger-action {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
}

.inline-check {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.inline-check input {
  width: auto;
}

.form-help {
  color: var(--muted);
  font-size: 12px;
  margin: -4px 0 0;
}

.hoist-shell {
  display: grid;
  gap: 18px;
}

.hoist-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hoist-actions #hoist-load-blank,
.hoist-result-actions button:nth-child(3) {
  background: #e8eef2;
  color: #263846;
}

.hoist-example-loader {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-top: 0;
}

.hoist-example-loader label {
  color: #4f5e69;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-transform: uppercase;
}

.hoist-example-loader select {
  min-width: 0;
  width: 210px;
  min-height: 36px;
}

.hoist-example-loader button {
  min-height: 36px;
}

.hoist-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
}

.hoist-form,
.hoist-report {
  display: grid;
  gap: 14px;
}

.hoist-section,
.hoist-report {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.hoist-section h3,
.hoist-report h3,
.hoist-result-block h4 {
  margin: 0;
}

.hoist-section-title {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
}

.hoist-section-title span,
.hoist-report-header span,
.hoist-result-grid span,
.hoist-breakdown span,
.hoist-override-row span {
  color: var(--muted);
  font-size: 12px;
}

.hoist-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
}

.hoist-grid label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  gap: 6px;
}

.hoist-notes-label {
  grid-column: span 2;
}

.hoist-grid input,
.hoist-grid select,
.hoist-quick-grid input,
.hoist-quick-grid select,
.hoist-override-row input,
.hoist-override-row select {
  width: 100%;
}

.hoist-quick-layout {
  align-items: stretch;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
}

.hoist-quick-card,
.hoist-auto-assumptions {
  background: #ffffff;
  border: 1px solid #dfe7ed;
  border-radius: 8px;
  padding: 16px;
}

.hoist-quick-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.hoist-quick-grid label {
  color: #263846;
  display: grid;
  font-size: 13px;
  font-weight: 800;
  gap: 6px;
}

.hoist-quick-grid label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.hoist-assumption-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.hoist-assumption-chips span {
  background: #f2f7f8;
  border: 1px solid #d9e8ec;
  border-radius: 8px;
  color: #294653;
  display: inline-grid;
  font-size: 12px;
  gap: 2px;
  line-height: 1.25;
  padding: 7px 9px;
}

.hoist-assumption-chips strong {
  color: #0f5368;
  font-size: 11px;
  text-transform: uppercase;
}

.hoist-auto-assumptions button,
.hoist-collapsible-section summary {
  cursor: pointer;
}

.hoist-collapsible-section {
  padding: 0;
}

.hoist-collapsible-section summary {
  color: #17212b;
  font-weight: 850;
  list-style-position: inside;
  padding: 16px;
}

.hoist-section-inner {
  border-top: 1px solid #e4ebf0;
  padding: 0 16px 16px;
}

.hoist-hidden-control {
  display: none;
}

.hoist-overrides {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.hoist-override-row {
  align-items: center;
  background: #f7f9fb;
  border: 1px solid #dfe7ed;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(160px, 1fr) 96px 120px;
  padding: 10px;
}

.hoist-override-row strong,
.hoist-override-row span {
  display: block;
}

.hoist-report {
  position: sticky;
  top: 14px;
}

.hoist-report-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
}

.hoist-report-header strong {
  color: #176b87;
  font-size: 32px;
}

.hoist-report-header p {
  color: var(--muted);
  margin: 4px 0 0;
}

.hoist-result-grid,
.hoist-breakdown {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hoist-tie-results {
  display: grid;
  gap: 10px;
}

.hoist-tie-card {
  background: #f7f9fb;
  border: 1px solid #dfe7ed;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 10px;
}

.hoist-tie-card h5 {
  grid-column: 1 / -1;
  margin: 0;
}

.hoist-tie-card div {
  display: grid;
  gap: 3px;
}

.hoist-tie-card span {
  color: var(--muted);
  font-size: 12px;
}

.hoist-result-grid div,
.hoist-breakdown div {
  background: #f7fbfa;
  border: 1px solid #dce9e7;
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.hoist-result-grid strong,
.hoist-breakdown strong {
  color: #17212b;
  font-size: 17px;
}

.hoist-result-block {
  display: grid;
  gap: 10px;
}

.index-status.is-error {
  background: var(--danger-bg);
  border-color: #f0c5c3;
  color: var(--danger);
}

.hoist-result-hero {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.hoist-result-hero h2 {
  font-size: 26px;
  letter-spacing: 0;
  margin: 0;
}

.hoist-result-hero p,
.hoist-inputs-toolbar p {
  color: var(--muted);
  margin: 6px 0 0;
}

.hoist-result-actions button {
  align-items: center;
  display: inline-flex;
  min-height: 40px;
  padding: 0 16px;
}

.hoist-result-actions button:nth-child(1),
.hoist-result-actions button:nth-child(2) {
  background: #ffffff;
  border: 1px solid var(--line);
  color: #263846;
}

.hoist-result-actions button:nth-child(3) {
  background: #0f7490;
  color: #ffffff;
}

.hoist-summary-cards {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.hoist-summary-cards article,
.hoist-dashboard-card {
  background: #ffffff;
  border: 1px solid #d7e0e7;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

.hoist-summary-cards article {
  align-items: center;
  display: flex;
  gap: 12px;
  min-height: 78px;
  padding: 14px;
}

.hoist-card-icon {
  align-items: center;
  background: #e8f3f6;
  border: 1px solid #c7dfe7;
  border-radius: 6px;
  color: #0f5368;
  display: inline-flex;
  flex: 0 0 34px;
  font-size: 11px;
  font-weight: 800;
  height: 34px;
  justify-content: center;
}

.hoist-card-icon svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 20px;
}

.hoist-card-icon.status {
  background: #e7f5ef;
  border-color: #bfe3d2;
  color: #13734c;
}

.hoist-summary-cards span:not(.hoist-card-icon) {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}

.hoist-summary-cards strong {
  color: #17212b;
  display: block;
  font-size: 18px;
  line-height: 1.15;
}

.hoist-result-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(280px, 0.32fr) minmax(0, 0.68fr);
}

.hoist-dashboard-card {
  padding: 16px;
}

.hoist-panel-title {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.hoist-panel-title h3 {
  color: #104e66;
  font-size: 16px;
  margin: 0;
}

.hoist-input-summary {
  display: grid;
}

.hoist-input-summary div {
  align-items: center;
  border-bottom: 1px solid #e4ebf0;
  display: flex;
  justify-content: space-between;
  min-height: 28px;
  gap: 12px;
}

.hoist-input-summary div:last-child {
  border-bottom: 0;
}

.hoist-input-summary span {
  color: #334155;
  font-size: 13px;
}

.hoist-input-summary strong {
  color: #17212b;
  font-size: 13px;
  text-align: right;
}

.hoist-mini-badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 5px 10px;
}

.hoist-mini-badge.on {
  background: #e7f5ef;
  border: 1px solid #bfe3d2;
  color: #13734c;
}

.hoist-mini-badge.off {
  background: #edf2f5;
  border: 1px solid #d1dce4;
  color: #51616e;
}

.hoist-result-diagram {
  background: #ffffff;
  border: 1px solid #e2e8ee;
  border-radius: 8px;
  overflow: hidden;
  padding: 14px;
}

.hoist-diagram-split {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.28fr) minmax(300px, 0.72fr);
  width: 100%;
}

.hoist-diagram-figure {
  display: grid;
  gap: 8px;
  margin: 0;
  min-width: 0;
}

.hoist-diagram-figure figcaption {
  color: #506575;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.hoist-diagram-image-frame {
  align-items: center;
  background: #ffffff;
  border: 1px solid #edf2f5;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  min-height: 420px;
  padding: 10px;
  position: relative;
}

.hoist-result-diagram img {
  display: block;
  object-fit: contain;
  width: 100%;
}

.hoist-main-diagram-frame {
  overflow: hidden;
}

.hoist-main-diagram img {
  max-height: 520px;
}

.hoist-diagram-overlay {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #c7d7e0;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  color: #17212b;
  position: absolute;
  z-index: 2;
}

.hoist-main-callout {
  display: grid;
  gap: 2px;
  height: 48px;
  box-sizing: border-box;
  width: 132px;
  padding: 8px 10px;
  text-align: left;
  transform: translateY(-24px);
}

.hoist-main-callout span {
  color: #506575;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
}

.hoist-main-callout strong {
  color: #17212b;
  font-size: 13px;
  line-height: 1.15;
}
.hoist-main-callout.tie-push-pull {
  right: 3.8%;
  top: 19%;
}

.hoist-main-callout.tie-shear {
  right: 3.8%;
  top: 31%;
}

.hoist-main-callout.governing-case {
  right: 3.8%;
  top: 66%;
}

.hoist-main-callout.base-mast-load {
  right: 3.8%;
  top: 78%;
}

.hoist-diagram-callouts {
  align-self: center;
  display: grid;
  gap: 10px;
  grid-column: 2;
  padding: 20px;
  z-index: 4;
}

.hoist-diagram-callouts div,
.hoist-tie-detail-values div {
  background: #ffffff;
  border: 1px solid #d7e0e7;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
  display: grid;
  gap: 3px;
  padding: 10px 12px;
}

.hoist-diagram-callouts span,
.hoist-tie-detail-values span {
  color: var(--muted);
  font-size: 12px;
}

.hoist-diagram-callouts strong,
.hoist-tie-detail-values strong {
  color: #17212b;
  font-size: 15px;
}

.hoist-diagram-note {
  color: var(--muted);
  font-size: 12px;
  margin: 10px 0 0;
  width: 100%;
}

.hoist-diagram-fallback {
  align-items: center;
  background: #f1f5f8;
  border: 1px dashed #bfd0dc;
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  justify-content: center;
  min-height: 320px;
  width: 100%;
}

.hoist-diagram-fallback[hidden] {
  display: none;
}

.hoist-diagram-legend {
  background: #f5f8fa;
  border: 1px solid #dce5ec;
  border-radius: 8px;
  color: #263846;
  font-size: 13px;
  font-weight: 700;
  margin: 12px 0 0;
  padding: 10px 12px;
}

.hoist-table-wrap {
  overflow-x: auto;
}

.hoist-tie-detail-panel {
  display: grid;
  gap: 12px;
}

.hoist-tie-detail-layout {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 0.62fr) minmax(240px, 0.38fr);
}

.hoist-tie-detail-image {
  align-items: center;
  background: #ffffff;
  border: 1px solid #edf2f5;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  min-height: 300px;
  padding: 12px;
  position: relative;
}

.hoist-tie-detail-image img {
  display: block;
  max-height: 330px;
  object-fit: contain;
  width: 100%;
}

.hoist-force-overlay {
  align-items: center;
  box-sizing: border-box;
  color: #0f5368;
  display: inline-flex;
  font-size: 13px;
  font-weight: 850;
  height: 30px;
  justify-content: center;
  line-height: 1;
  padding: 0 8px;
  white-space: nowrap;
  width: 66px;
}

.shear-horizontal {
  left: 50%;
  top: 31%;
  transform: translate(-50%, -50%);
}

.pushpull-vertical {
  top: 55%;
  transform-origin: center;
}

.pushpull-left {
  left: 29%;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.pushpull-right {
  left: 71%;
  right: auto;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.hoist-result-table {
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
}

.hoist-result-table th,
.hoist-result-table td {
  border: 1px solid #dce5ec;
  padding: 9px 12px;
  text-align: left;
}

.hoist-result-table th {
  background: #f5f8fa;
  color: #17212b;
  font-weight: 800;
}

.hoist-result-table td:nth-child(3),
.hoist-result-table td:nth-child(4),
.hoist-result-table td:nth-child(5),
.hoist-result-table td:nth-child(6) {
  text-align: center;
}

.hoist-result-table tr.is-final td {
  background: #eef8f5;
  color: #143f34;
  font-weight: 800;
}

.hoist-control-check {
  border: 1px solid #d9e8ec;
  border-radius: 8px;
  margin-top: 14px;
}

.hoist-control-check summary {
  color: #17212b;
  cursor: pointer;
  font-weight: 850;
  padding: 12px 14px;
}

.hoist-control-check-body {
  border-top: 1px solid #d9e8ec;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.hoist-control-header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.hoist-control-header span,
.hoist-control-grid span,
.hoist-control-grid small {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

.hoist-control-header strong,
.hoist-control-grid strong {
  color: #17212b;
}

.hoist-control-header mark {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  padding: 6px 10px;
}

.hoist-control-header mark.is-match {
  background: #e7f8ee;
  color: #146336;
}

.hoist-control-header mark.is-pending {
  background: #fff6dd;
  color: #725000;
}

.hoist-control-header mark.is-review {
  background: #fdecea;
  color: #8a241b;
}

.hoist-control-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hoist-control-grid div {
  background: #f7f9fb;
  border: 1px solid #e0e8ee;
  border-radius: 8px;
  padding: 10px;
}

.hoist-control-table-wrap {
  overflow-x: auto;
}

.hoist-control-table {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
}

.hoist-control-table th,
.hoist-control-table td {
  border: 1px solid #dce5ec;
  padding: 8px;
  text-align: left;
}

.hoist-control-notes {
  color: #4c5f6d;
  margin: 0;
  padding-left: 20px;
}

.hoist-notes-panel ul {
  display: grid;
  gap: 8px 48px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding-left: 22px;
}

.hoist-inputs-panel {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}

.hoist-inputs-toolbar {
  align-items: center;
  background: #ffffff;
  border: 1px solid #d7e0e7;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 14px;
}

.hoist-inputs-toolbar h3 {
  font-size: 16px;
  margin: 0;
}

.hoist-toolbar-copy {
  flex: 0 0 auto;
  min-width: 150px;
}

.hoist-toolbar-copy p {
  font-size: 12px;
}

.hoist-report-details {
  display: grid;
  gap: 14px;
}

@media print {
  body {
    background: #ffffff;
  }

  .splash-screen,
  .app-header,
  .app-nav-row,
  .message,
  .hoist-actions,
  .hoist-inputs-panel,
  .hoist-status,
  .hoist-form,
  .detail-panel,
  .detail-backdrop {
    display: none !important;
  }

  .shell {
    width: 100%;
  }

  .tab-panel {
    display: none !important;
  }

  #hoist-loads.tab-panel {
    display: block !important;
  }

  .hoist-result-layout {
    grid-template-columns: 0.34fr 0.66fr;
  }

  .hoist-summary-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .hoist-dashboard-card,
  .hoist-summary-cards article {
    border: 0;
    box-shadow: none;
    break-inside: avoid;
  }

  .hoist-result-diagram,
  .hoist-diagram-image-frame,
  .hoist-tie-detail-image,
  .hoist-tie-detail-image img {
    max-height: 360px;
    min-height: auto;
  }
}

@media (max-width: 1400px) {
  .search-dashboard-layout {
    grid-template-columns: minmax(580px, 1.65fr) minmax(360px, 1fr);
  }
}

@media (max-width: 1180px) {
  .hoist-summary-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hoist-result-layout {
    grid-template-columns: 1fr;
  }

  .hoist-diagram-split,
  .hoist-tie-detail-layout {
    grid-template-columns: 1fr;
  }

  .hoist-layout,
  .hoist-grid,
  .hoist-quick-layout,
  .hoist-quick-grid,
  .hoist-overrides {
    grid-template-columns: 1fr;
  }

  .hoist-report {
    position: static;
  }
}

@media (max-width: 640px) {
  .hoist-result-hero,
  .hoist-inputs-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .hoist-summary-cards {
    grid-template-columns: 1fr;
  }

  .hoist-actions button {
    width: 100%;
  }

  .hoist-example-loader {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .hoist-example-loader button,
  .hoist-example-loader select {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .hoist-override-row {
    grid-template-columns: 1fr;
  }

  .hoist-result-grid,
  .hoist-breakdown,
  .hoist-control-grid,
  .hoist-notes-panel ul,
  .hoist-tie-card {
    grid-template-columns: 1fr;
  }

  .hoist-result-diagram {
    padding: 10px;
  }

  .hoist-diagram-image-frame,
  .hoist-tie-detail-image {
    min-height: 220px;
  }

  .hoist-main-callout {
    min-width: 102px;
    padding: 6px 7px;
  }

  .hoist-main-callout span {
    font-size: 9px;
  }

  .hoist-main-callout strong,
  .hoist-force-overlay {
  align-items: center;
  box-sizing: border-box;
  color: #0f5368;
  display: inline-flex;
  font-size: 13px;
  font-weight: 850;
  height: 30px;
  justify-content: center;
  line-height: 1;
  padding: 0 8px;
  white-space: nowrap;
  width: 66px;
}

  .hoist-level-markers span {
    right: 14%;
  }
  .hoist-tie-detail-image img {
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash-content {
    animation: none;
  }

  .splash-screen {
    transition: none;
  }

  .loading-dots::after {
    animation: none;
    content: "...";
  }

  .cinematic-text-main,
  .cinematic-text-sub {
    animation: none;
    filter: none;
  }
}

@media (max-width: 1120px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .permissions-grid {
    grid-template-columns: repeat(2, minmax(145px, 1fr));
  }

  .search-dashboard-layout {
    grid-template-columns: 1fr;
  }

  .video-column {
    height: auto;
    overflow: visible;
    position: relative;
    top: auto;
  }

  .search-column {
    height: auto;
    overflow: visible;
  }

  .search-controls {
    top: 0;
  }

  .video-player-card {
    height: auto;
  }

  .search-layout {
    grid-template-columns: 1fr;
  }

  .video-panel {
    position: static;
  }
}

@media (max-width: 820px) {
  .app-nav-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-nav-user {
    justify-content: flex-start;
    margin-left: 0;
  }

  .admin-shell {
    padding: 16px;
  }

  .admin-header,
  .admin-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-metrics,
  .permissions-grid {
    grid-template-columns: 1fr;
  }

  .shell {
    width: min(100% - 20px, 1440px);
  }

  .header-actions,
  .result-card-main,
  .section-heading,
  .detail-header {
    align-items: stretch;
    flex-direction: column;
  }

  .header-brand {
    gap: 14px;
  }

  .header-logo {
    width: 64px;
  }

  .hero-search,
  .filters,
  .search-column .filters,
  .player-actions,
  .video-card-grid,
  .diagnostic-grid,
  .path-grid,
  .breakdown-grid,
  .video-card dl,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .app-title,
  h1 {
    font-size: 23px;
  }
}

/* Phase 4A.3: responsive/mobile polish for the online app. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
table {
  max-width: 100%;
}

@media (max-width: 1024px) {
  .shell {
    width: min(100% - 24px, 1440px);
    margin-top: 12px;
  }

  .search-dashboard-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .video-column {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    position: relative;
    top: auto;
  }

  .search-column {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .search-controls {
    top: 0;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .app-header {
    min-height: 104px;
    padding: 16px 18px;
  }

  .header-brand {
    min-height: 72px;
  }

  .header-logo {
    width: 56px;
  }

  .app-title,
  h1 {
    font-size: 24px;
  }

  .app-subtitle,
  .app-header p {
    font-size: 13px;
  }

  .video-player-card,
  .search-main,
  .video-panel,
  .panel {
    padding: 16px;
  }

  .admin-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .shell {
    width: min(100% - 18px, 1440px);
    margin-bottom: 22px;
  }

  .app-header {
    border-radius: 14px;
    min-height: 0;
    padding: 14px;
  }

  .header-brand {
    gap: 12px;
    min-height: 58px;
  }

  .header-logo {
    width: 50px;
  }

  .app-title,
  h1 {
    font-size: 22px;
    line-height: 1.08;
  }

  .app-subtitle,
  .app-header p {
    font-size: 12px;
  }

  .app-nav-row {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0 16px;
  }

  .app-nav-left {
    flex-wrap: nowrap;
    gap: 18px;
    margin: 0;
    overflow-x: auto;
    padding: 4px 2px 10px;
    scrollbar-width: thin;
    white-space: nowrap;
  }

  .app-nav-left .tab {
    flex: 0 0 auto;
  }

  .app-nav-user {
    background: rgba(15, 116, 144, 0.08);
    border: 1px solid rgba(15, 116, 144, 0.14);
    border-radius: 12px;
    justify-content: space-between;
    margin-left: 0;
    padding: 8px 10px;
    width: 100%;
  }

  .video-player-header,
  .result-card-main,
  .video-card-top,
  .detail-header,
  .section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .video-frame-wrap {
    border-radius: 12px;
    overflow: hidden;
  }

  .video-frame-wrap video,
  #video-player {
    max-height: 58vh;
    max-width: 100%;
    width: 100%;
  }

  .hero-search {
    grid-template-columns: 1fr;
  }

  .hero-search input,
  .hero-search button {
    width: 100%;
  }

  .search-scope,
  .search-mode,
  .chips,
  .result-badges,
  .result-meta,
  .result-actions {
    flex-wrap: wrap;
  }

  .filters,
  .search-column .filters,
  .video-controls,
  .video-card-grid,
  .diagnostic-grid,
  .path-grid,
  .breakdown-grid,
  .video-card dl,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-panel {
    bottom: 12px;
    left: 12px;
    max-height: calc(100vh - 24px);
    max-width: calc(100vw - 24px);
    overflow-y: auto;
    right: 12px;
    top: 12px;
    transform: translateX(110%);
    width: auto;
  }

  .detail-panel.open {
    transform: translateX(0);
  }

  .pin-panel {
    width: auto;
  }
}

@media (max-width: 700px) {
  .admin-shell {
    padding: 14px;
  }

  .admin-header {
    align-items: stretch;
    border-radius: 10px;
    flex-direction: column;
    padding: 14px;
  }

  .admin-header nav {
    justify-content: flex-start;
  }

  .admin-title {
    font-size: 24px;
  }

  .admin-card {
    padding: 14px;
  }

  .admin-table,
  .admin-table thead,
  .admin-table tbody,
  .admin-table tr,
  .admin-table td {
    display: block;
    width: 100%;
  }

  .admin-table {
    border: 0;
  }

  .admin-table thead {
    display: none;
  }

  .admin-table tr {
    background: #ffffff;
    border: 1px solid rgba(15, 36, 51, 0.12);
    border-radius: 14px;
    margin-bottom: 12px;
    padding: 12px;
  }

  .admin-table tr.is-selected {
    background: #f0f8fa;
    border-color: rgba(15, 116, 144, 0.28);
  }

  .admin-table tr:hover td,
  .admin-table tr.is-selected td,
  .admin-table td {
    background: transparent;
  }

  .admin-table td {
    border-bottom: 0;
    padding: 6px 0;
  }

  .admin-table td::before {
    color: #64748b;
    display: block;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
    text-transform: uppercase;
  }

  .admin-table td.col-user::before {
    content: "Username";
  }

  .admin-table td.col-display::before {
    content: "Display / Email";
  }

  .admin-table td.col-status::before {
    content: "Status";
  }

  .admin-table td.col-permissions::before {
    content: "Permissions";
  }

  .admin-table td.col-actions::before {
    content: "Actions";
  }

  .admin-row-actions .admin-btn,
  .admin-form-actions .admin-btn {
    flex: 1 1 130px;
    width: auto;
  }
}

@media (max-width: 600px) {
  .splash-content {
    padding: 22px;
  }

  .splash-logo {
    width: min(210px, 52vw);
  }

  .splash-title {
    font-size: clamp(30px, 10vw, 42px);
  }

  .video-controls,
  .player-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .video-controls button,
  .player-actions button,
  .manual-mark-box button {
    min-height: 42px;
    width: 100%;
  }

  .manual-mark-box {
    align-items: stretch;
    flex-direction: column;
  }

  .result-card {
    border-radius: 12px;
    padding: 12px;
  }

  .result-card h3 {
    font-size: 15px;
    line-height: 1.25;
  }

  .description {
    -webkit-line-clamp: 3;
  }

  .result-actions button {
    flex: 1 1 96px;
    min-width: 0;
  }

  .search-column {
    border-radius: 8px;
    padding: 12px;
  }

  .search-controls {
    margin: -12px -12px 12px;
    padding: 12px;
  }

  .login-shell {
    padding: 16px;
  }

  .login-card {
    padding: 22px;
  }

  .login-logo {
    height: 54px;
  }
}

@media (max-width: 480px) {
  .shell {
    width: min(100% - 14px, 1440px);
  }

  .header-logo {
    width: 44px;
  }

  .app-title,
  h1 {
    font-size: 20px;
  }

  .app-nav-user {
    align-items: stretch;
    flex-direction: column;
  }

  .app-nav-logout {
    width: 100%;
  }

  button,
  input,
  select {
    font-size: 14px;
  }

  .admin-form-actions,
  .admin-row-actions {
    flex-direction: column;
  }

  .admin-form-actions .admin-btn,
  .admin-row-actions .admin-btn {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .video-player-card,
  .panel,
  .admin-card {
    padding: 12px;
  }

  .result-actions button {
    flex-basis: 100%;
  }

  .permission-pills {
    gap: 5px;
  }
}

@media (max-width: 390px) {
  .app-title,
  h1 {
    font-size: 18px;
  }

  .header-brand {
    gap: 10px;
  }

  .result-meta span,
  .soft-pill,
  .badge,
  .found,
  .missing,
  .valid,
  .invalid,
  .warning,
  .muted-badge,
  .permission-pill {
    font-size: 10px;
  }
}


/* Phase 5C - Hoist input architecture V2. Scoped to lower input area only. */
.hoist-quick-group-grid {
  display: grid;
  gap: 14px;
}

.hoist-quick-group {
  background: #fbfcfd;
  border: 1px solid #dfe8ee;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.hoist-quick-group h4,
.hoist-calculation-input-group h4 {
  color: #1c2d38;
  font-size: 13px;
  letter-spacing: 0;
  margin: 0;
  text-transform: uppercase;
}

.hoist-quick-grid-v2 {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.hoist-review-section {
  border-color: #dfe8ee;
}

.hoist-review-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(190px, 1fr));
}

.hoist-review-card {
  background: #fbfcfd;
  border: 1px solid #dfe8ee;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.hoist-review-card.needs-review {
  border-color: #e6c875;
}

.hoist-review-card-head {
  align-items: start;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.hoist-review-card-head strong {
  color: #1c2d38;
  font-size: 12px;
  line-height: 1.25;
}

.hoist-review-value {
  color: #101820;
  font-size: 18px;
  font-weight: 800;
}

.hoist-review-card small {
  color: var(--muted);
  font-size: 11px;
}

.hoist-review-controls {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(90px, 1fr) auto;
}

.hoist-review-controls input[type="number"] {
  border: 1px solid #ccd8e0;
  border-radius: 8px;
  min-height: 34px;
  padding: 7px 9px;
  width: 100%;
}

.hoist-review-controls button {
  min-height: 34px;
  padding: 7px 10px;
}

.source-badge,
.hoist-assumption-chips em {
  background: #eef5f7;
  border: 1px solid #d7e5ea;
  border-radius: 999px;
  color: #3d5969;
  display: inline-flex;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  justify-self: start;
  margin-top: 4px;
  padding: 1px 6px;
  text-transform: uppercase;
}

.hoist-tie-levels,
.hoist-derived-grid,
.hoist-source-grid,
.hoist-qa-warnings {
  display: grid;
  gap: 10px;
}

.hoist-tie-level-row {
  align-items: end;
  background: #f7f9fb;
  border: 1px solid #dfe8ee;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(70px, .6fr) repeat(2, minmax(150px, 1fr)) minmax(130px, .8fr) auto;
  padding: 10px;
}

.hoist-tie-level-row label,
.hoist-inline-details label {
  color: #263846;
  display: grid;
  font-size: 12px;
  gap: 5px;
  font-weight: 700;
}

.hoist-tie-level-row input,
.hoist-tie-level-row select,
.hoist-inline-details input,
.hoist-inline-details select {
  border: 1px solid #ccd8e0;
  border-radius: 8px;
  min-height: 34px;
  padding: 7px 9px;
}

.hoist-tie-level-row input[readonly] {
  background: #eef3f6;
  color: #415463;
}

.hoist-tie-details {
  align-self: stretch;
  border: 1px dashed #c8d7df;
  border-radius: 8px;
  padding: 7px 9px;
}

.hoist-tie-details summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.hoist-tie-detail-fields {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.hoist-checkline {
  align-items: center;
  display: flex !important;
  gap: 8px !important;
}

.hoist-checkline input {
  min-height: auto;
  width: auto;
}

.hoist-derived-note {
  align-self: end;
  background: #f7f9fb;
  border: 1px solid #dfe8ee;
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 9px 10px;
}

.hoist-derived-note span {
  color: var(--muted);
  font-size: 11px;
}

.hoist-builder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}

.hoist-derived-grid,
.hoist-source-grid {
  grid-template-columns: repeat(3, minmax(140px, 1fr));
}

.hoist-derived-grid div,
.hoist-source-grid div,
.hoist-qa-warnings div {
  background: #f7f9fb;
  border: 1px solid #dfe8ee;
  border-radius: 8px;
  display: grid;
  gap: 3px;
  padding: 10px;
}

.hoist-derived-grid span,
.hoist-source-grid span,
.hoist-source-grid small {
  color: var(--muted);
  font-size: 11px;
}

.hoist-qa-panel {
  border-color: #dfe8ee;
}

.hoist-qa-warnings div {
  align-items: center;
  grid-template-columns: auto 1fr;
}

.hoist-qa-warnings .hoist-qa-group {
  align-items: start;
  grid-template-columns: 1fr;
}

.hoist-qa-warnings .hoist-qa-group > strong {
  color: #314150;
  font-size: 12px;
  letter-spacing: 0;
}

.hoist-qa-warnings .hoist-qa-group p {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto 1fr;
  margin: 4px 0 0;
}

.hoist-source-notes-panel {
  border-color: #dfe8ee;
}

.hoist-source-notes {
  padding-top: 10px;
}

.hoist-source-note-list {
  display: grid;
  gap: 8px;
}

.hoist-source-note-list p {
  background: #f7f9fb;
  border: 1px solid #dfe8ee;
  border-radius: 8px;
  color: #405261;
  font-size: 13px;
  margin: 0;
  padding: 9px 10px;
}

.hoist-qa-pill {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  text-transform: uppercase;
}

.hoist-qa-pill.info {
  background: #eaf4ff;
  color: #1d5f91;
}

.hoist-qa-pill.review {
  background: #fff6dd;
  color: #725000;
}

.hoist-qa-pill.critical {
  background: #fdecea;
  color: #8a241b;
}

.hoist-qa-pill.pass {
  background: #e8f6ef;
  color: #18633b;
}

.hoist-qa-pill.check {
  background: #fff6dd;
  color: #725000;
}

.hoist-qa-pill.fail {
  background: #fdecea;
  color: #8a241b;
}

#hoist-validation-status.is-error {
  color: #8a241b;
  font-weight: 800;
}

#hoist-validation-results small {
  color: var(--muted);
  display: block;
  font-size: 10px;
  margin-top: 3px;
}

.hoist-inline-details {
  border: 1px dashed #c8d7df;
  border-radius: 8px;
  padding: 10px;
}

.hoist-inline-details summary {
  cursor: pointer;
  font-weight: 800;
}

.hoist-calculation-input-group {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.hoist-excel-inputs-details {
  border-color: #cbd6df;
}

.hoist-lower-technical-panel {
  display: none;
}

.hoist-sheet-tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 10px;
}

.hoist-sheet-source-toggle {
  align-items: center;
  color: #31404b;
  display: inline-flex;
  font-size: 11px;
  gap: 6px;
  margin: 0 0 8px;
}

.hoist-excel-sheet,
.hoist-print-sheet-view {
  background: #f0f1f2;
  border: 1px solid #d5d8da;
  border-radius: 4px;
  overflow-x: auto;
  padding: 12px;
}

.excel-sheet-preview {
  display: block;
  min-width: min-content;
}

.excel-screen-pages,
.excel-print-pages {
  display: block;
}

.excel-page {
  background: #fdfdfd;
  border: 1px solid #cfcfcf;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(20, 25, 30, 0.08);
  color: #111;
  font-family: Arial, "Segoe UI", sans-serif;
  font-size: 8.2px;
  height: 1056px;
  line-height: 1.08;
  margin: 24px auto;
  max-width: 100%;
  overflow: hidden;
  padding: 34px 43px;
  width: 816px;
}

.excel-page h3 {
  color: #111;
  font-size: 12.5px;
  font-weight: 700;
  margin: 7px 0 9px;
  text-align: center;
  text-decoration: underline;
}

.excel-sheet-header {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: 154px 1fr;
  height: 58px;
  margin-bottom: 10px;
}

.excel-sheet-logo {
  border: 1px solid #111;
  color: #111;
  height: 50px;
  padding: 3px 5px;
  text-align: center;
}

.excel-sheet-logo img {
  display: block;
  height: 100%;
  margin: 0 auto;
  max-width: 100%;
  object-fit: contain;
}

.excel-project-grid {
  border-collapse: collapse;
  display: grid;
  grid-template-columns: 78px 334px;
  width: 412px;
}

.excel-project-grid .excel-cell {
  min-height: 14px;
  width: auto;
}

/* Phase 6A.6 - compact Hoist quick entry and single advanced overrides panel. */
.hoist-quick-section > .hoist-section-title {
  display: none;
}

.hoist-inputs-toolbar {
  flex-wrap: nowrap;
}

.hoist-inputs-toolbar .hoist-actions {
  flex: 0 0 auto;
  gap: 8px;
}

.hoist-inputs-toolbar .hoist-actions button,
.hoist-inputs-toolbar .hoist-example-loader button {
  min-height: 36px;
  padding: 8px 12px;
  white-space: nowrap;
}

.hoist-inputs-toolbar .hoist-example-loader {
  flex: 0 0 auto;
}

.hoist-quick-group-grid {
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hoist-quick-column {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.hoist-quick-group {
  align-content: start;
  gap: 10px;
  padding: 12px;
}

.hoist-quick-grid-v2 {
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.hoist-quick-grid label {
  gap: 5px;
}

.hoist-quick-grid input,
.hoist-quick-grid select {
  min-height: 34px;
}

.hoist-inline-details {
  margin-top: 0;
}

.hoist-advanced-inputs-panel {
  display: block;
}

.hoist-advanced-subtitle {
  margin-top: 16px;
}

.hoist-advanced-inputs-panel .hoist-review-grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.hoist-advanced-inputs-panel .hoist-overrides {
  grid-template-columns: repeat(2, minmax(280px, 1fr));
}

@media (max-width: 1180px) {
  .hoist-inputs-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .hoist-inputs-toolbar .hoist-example-loader {
    flex: 1 1 360px;
  }
}

@media (max-width: 900px) {
  .hoist-quick-group-grid,
  .hoist-quick-grid-v2,
  .hoist-advanced-inputs-panel .hoist-review-grid,
  .hoist-advanced-inputs-panel .hoist-overrides {
    grid-template-columns: 1fr;
  }
}

/* Phase 6A.8 - refined technical sheet presentation and optional diagram page. */
.excel-page {
  background: #fdfdfb;
  border-color: #c8ccd0;
  box-shadow: 0 5px 16px rgba(20, 25, 30, 0.08);
}

.excel-page h3 {
  color: #17232c;
  font-size: 13.4px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 8px 0 10px;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.excel-sheet-header {
  gap: 18px;
  grid-template-columns: 164px 1fr;
}

.excel-sheet-logo {
  background: #ffffff;
  border-color: #8f989f;
  height: 52px;
  padding: 2px 4px;
}

.excel-sheet-logo img {
  max-height: 100%;
  max-width: 98%;
}

.excel-project-grid {
  grid-template-columns: 82px 352px;
  width: 434px;
}

.excel-project-grid .excel-cell {
  min-height: 15px;
}

.excel-project-grid .excel-label {
  background: #eef1f2;
  color: #28333b;
  font-weight: 700;
  padding-left: 5px;
}

.excel-project-grid .excel-value {
  background: #f7f8f8;
  color: #17232c;
  font-weight: 700;
  padding-right: 7px;
  text-align: right;
}

.excel-cell,
.excel-field-row,
.excel-tie-load-grid > span {
  border-color: #dce0e2;
}

.excel-label,
.excel-unit {
  background: #f3f5f5;
  color: #24313a;
}

.excel-formula-cell {
  background: #eef1f2;
}

.excel-input-cell {
  background: #f5f0e2;
}

.excel-lookup-cell {
  background: #edf3f6;
}

.excel-section-title,
.excel-tie-load-table th,
.excel-kz-table th,
.excel-tie-load-grid .excel-grid-head {
  background: #e9edef;
  border-bottom-color: #9ca7ad;
  color: #1d2a33;
}

.excel-results-block .excel-result-cell,
.excel-results-block .is-result .excel-value,
.excel-total-tie-loads .excel-formula-cell,
.excel-page2-bottom .excel-results-block .excel-formula-cell,
.excel-page2-bottom .excel-results-block .excel-result-cell {
  background: #dfeee3;
  border-color: #99b8a2;
  color: #183b24;
  font-size: 9.2px;
  font-weight: 800;
}

.excel-results-block .excel-field-row .excel-label,
.excel-page2-bottom .excel-results-block .excel-field-row .excel-label {
  background: #edf6ef;
  font-weight: 700;
}

.excel-diagram-sheet-body {
  align-content: start;
  display: grid;
  gap: 18px;
  height: 850px;
  padding-top: 10px;
}

.excel-result-diagram-figure {
  align-items: center;
  display: grid;
  gap: 8px;
  justify-items: center;
  margin: 0;
}

.excel-result-diagram-frame {
  background: #f6f8f8;
  border: 1px solid #c8d0d4;
  box-sizing: border-box;
  max-width: 650px;
  padding: 14px;
  position: relative;
  width: 100%;
}

.excel-result-diagram-frame img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-height: 500px;
  max-width: 100%;
  object-fit: contain;
}

.excel-result-diagram-figure figcaption {
  color: #4c5961;
  font-size: 8.5px;
  text-align: center;
}

.excel-diagram-callout {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #9db2be;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  color: #1c2d38;
  display: grid;
  gap: 1px;
  min-width: 92px;
  padding: 5px 7px;
  position: absolute;
  text-align: left;
}

.excel-diagram-callout span {
  color: #52616a;
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
}

.excel-diagram-callout strong {
  color: #173625;
  font-size: 10px;
  line-height: 1.05;
}

.excel-diagram-callout.tie-push-pull { right: 8.5%; top: 18%; }
.excel-diagram-callout.tie-shear { right: 8.5%; top: 31%; }
.excel-diagram-callout.governing-case { right: 8.5%; top: 58%; }
.excel-diagram-callout.base-mast-load { right: 8.5%; top: 71%; }

.excel-diagram-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.excel-diagram-summary div {
  background: #dfeee3;
  border: 1px solid #a7bcae;
  display: grid;
  gap: 3px;
  min-height: 44px;
  padding: 8px;
  text-align: center;
}

.excel-diagram-summary span {
  color: #48575f;
  font-size: 7.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.excel-diagram-summary strong {
  color: #173625;
  font-size: 10.5px;
}

.excel-table {
  border-collapse: collapse;
  min-width: 0;
  table-layout: fixed;
  width: 100%;
}

.excel-cell {
  border: 1px solid #bcbcbc;
  overflow: hidden;
  padding: 0 2px;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.excel-label {
  background: #fff;
  font-weight: 400;
  text-align: left;
  width: 56%;
}

.excel-value {
  font-variant-numeric: tabular-nums;
  text-align: center;
  width: 30%;
}

.excel-unit {
  background: #fff;
  color: #333;
  max-width: 34px;
  min-width: 0;
  text-align: left;
  width: 34px;
}

.excel-source {
  border: 0;
  display: none !important;
  max-width: 0;
  padding: 0;
  width: 0;
}

.excel-sheet-preview.show-sources .excel-source {
  color: #58636b;
  display: table-cell !important;
  font-size: 8px;
  max-width: 86px;
  padding: 3px 5px;
  width: 86px;
}

.excel-input-cell {
  background: #f7eed4;
}

.excel-formula-cell {
  background: #e9e9e9;
}

.excel-lookup-cell {
  background: #e6edf2;
}

.excel-result-cell {
  background: #d3d3d3;
  border: 2px solid #111;
  font-weight: 700;
}

.excel-block {
  margin-bottom: 0;
  min-width: 0;
}

.excel-section-title {
  background: #f2f2f2;
  border-bottom: 1px solid #111;
  color: #111;
  font-size: 8.2px;
  font-weight: 700;
  margin: 0 0 2px;
  padding: 1px 3px;
  text-align: left;
}

.excel-fixed-body {
  min-height: 0;
}

.excel-page1-body {
  display: grid;
  grid-template-rows: 116px 158px 102px 64px 1fr;
  height: 850px;
}

.excel-row-zone {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}

.excel-page-base-loads .excel-results-block {
  width: 50%;
}

.excel-page1-results {
  min-height: 0;
}

.excel-page2-body {
  display: grid;
  gap: 4px;
  grid-template-rows: 315px 165px 170px 190px;
  height: 860px;
}

.excel-page2-zone,
.excel-stack {
  min-height: 0;
  min-width: 0;
}

.excel-page2-top {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1.08fr .58fr;
}

.excel-stack {
  display: grid;
  gap: 4px;
  grid-template-rows: auto auto auto;
}

.excel-page2-mid-a,
.excel-page2-mid-b {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.excel-page2-bottom {
  display: grid;
  gap: 6px;
  grid-template-columns: .76fr 1.24fr;
}

.excel-page2-bottom .excel-total-tie-loads {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.excel-page2-bottom .excel-results-block {
  grid-column: 1 / -1;
}

.excel-tie-load-table th {
  background: #f2f2f2;
  font-size: 8px;
  font-weight: 700;
}

.excel-kz-table th {
  background: #f2f2f2;
  font-size: 8px;
  font-weight: 700;
}

.excel-kz-table .excel-cell {
  padding: 0 3px;
}

.excel-source-traces {
  display: none;
  margin: 0 auto 20px;
  width: 816px;
}

.excel-sheet-preview.show-sources .excel-source-traces {
  display: block;
}

.excel-source-trace {
  margin-top: 12px;
}

.excel-source-trace summary {
  color: #4c5a64;
  cursor: pointer;
  font-size: 8px;
}

.excel-source-trace .excel-table {
  margin-top: 6px;
}

/* Phase 6A.4: lighter technical-sheet styling, fewer grid lines, balanced modules. */
.excel-page {
  box-shadow: 0 3px 10px rgba(20, 25, 30, 0.06);
  font-size: 8px;
  line-height: 1.05;
}

.excel-cell {
  border-color: #d8d8d8;
}

.excel-label {
  width: auto;
}

.excel-value {
  border: 1px solid #d0d0d0;
  font-variant-numeric: tabular-nums;
  min-height: 11px;
  padding: 0 3px;
  text-align: center;
  width: auto;
}

.excel-unit {
  max-width: 30px;
  overflow: hidden;
  padding-left: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: auto;
}

.excel-result-cell {
  border: 1.4px solid #111;
}

.sheet-block {
  align-self: start;
  min-width: 0;
}

.excel-section-title {
  background: transparent;
  border-bottom: 1px solid #5b5b5b;
  font-size: 8px;
  padding: 0 2px 1px;
}

.excel-field-list {
  display: grid;
  gap: 0;
}

.excel-field-row {
  align-items: center;
  border-bottom: 1px solid #e6e6e6;
  display: grid;
  gap: 3px;
  grid-template-columns: minmax(0, 1fr) 76px 28px;
  min-height: 13px;
}

.excel-field-row:last-child {
  border-bottom: 0;
}

.excel-field-row .excel-label {
  overflow: hidden;
  padding-left: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.excel-field-row .excel-value {
  display: block;
}

.excel-table .excel-value {
  display: table-cell;
}

.excel-page1-body {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
  height: 850px;
}

.excel-page1-column {
  display: grid;
  gap: 16px;
  grid-auto-rows: max-content;
  min-width: 0;
}

.excel-page1-left {
  grid-template-rows: 58px 120px 82px 58px;
}

.excel-page1-right {
  grid-template-rows: 92px 72px 48px 220px;
}

.excel-page-base-loads .excel-results-block {
  width: 88%;
}

.excel-sheet-graphic {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 6px 0 0;
  min-height: 0;
}

.excel-sheet-graphic img {
  display: block;
  max-height: 210px;
  max-width: 100%;
  object-fit: contain;
}

.excel-page2-body {
  display: grid;
  gap: 5px;
  grid-template-rows: 210px 110px 120px 140px 180px;
  height: 860px;
}

.excel-page2-top {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: 1.12fr 1fr .62fr;
}

.excel-page2-mid-top,
.excel-page2-mid-a,
.excel-page2-mid-b {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
}

.excel-page2-bottom {
  align-items: start;
  display: grid;
  gap: 6px;
  grid-template-columns: .72fr 1.28fr;
}

.excel-tie-load-grid {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1.2fr) .72fr .9fr;
}

.excel-tie-load-grid > span {
  border-bottom: 1px solid #e6e6e6;
  min-height: 12px;
  overflow: hidden;
  padding: 0 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.excel-tie-load-grid .excel-grid-head {
  border-bottom-color: #b8b8b8;
  font-size: 7.2px;
  font-weight: 700;
  text-transform: uppercase;
}

.excel-kz-table .excel-cell,
.excel-kz-table th {
  border-color: #dfdfdf;
  padding: 0 2px;
}

@media (max-width: 900px) {
  .hoist-quick-group-grid,
  .hoist-quick-grid-v2,
  .hoist-review-grid,
  .hoist-tie-level-row,
  .hoist-derived-grid,
  .hoist-source-grid {
    grid-template-columns: 1fr;
  }

  .excel-page {
    width: 816px;
  }
}

@media print {
  body.print-hoist-calculation-sheet * {
    visibility: hidden !important;
  }

  body.print-hoist-calculation-sheet #hoist-print-sheet-view,
  body.print-hoist-calculation-sheet #hoist-print-sheet-view * {
    visibility: visible !important;
  }

  body.print-hoist-calculation-sheet #hoist-print-sheet-view {
    background: #fff;
    border: 0;
    display: block !important;
    left: 0;
    overflow: visible;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  body.print-hoist-calculation-sheet .excel-print-pages {
    display: block;
    min-width: 0;
  }

  body.print-hoist-calculation-sheet .excel-page {
    border: 0;
    box-sizing: border-box;
    box-shadow: none;
    break-after: page;
    height: 11in;
    margin: 0;
    max-width: none;
    min-width: 0;
    padding: .35in .45in;
    page-break-after: always;
    width: 8.5in;
  }

  body.print-hoist-calculation-sheet .excel-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  body.print-hoist-calculation-sheet .excel-source,
  body.print-hoist-calculation-sheet .excel-source-trace {
    display: none;
  }
}

/* Phase 6A.9 - subtle presentation sheet refinements and reliable print output. */
.excel-page h3 {
  color: #14242f;
  font-size: 13.8px;
  font-weight: 800;
  margin: 7px 0 9px;
}

.excel-sheet-header {
  gap: 16px;
  grid-template-columns: 172px 1fr;
  height: 72px;
  margin-bottom: 8px;
}

.excel-sheet-logo {
  align-items: center;
  background: transparent;
  border: 0;
  display: flex;
  height: 56px;
  justify-content: flex-start;
  padding: 0;
}

.excel-sheet-logo img {
  height: 54px;
  margin: 0;
  max-width: 168px;
  object-fit: contain;
}

.excel-project-grid {
  grid-template-columns: 78px minmax(0, 376px);
  max-width: 454px;
  width: 454px;
}

.excel-project-grid .excel-cell {
  min-height: 16px;
}

.excel-project-grid .excel-label {
  background: #edf1f2;
  color: #1f303a;
  font-size: 8.2px;
  font-weight: 800;
  padding-left: 5px;
}

.excel-project-grid .excel-value {
  background: #f8f9f9;
  color: #10222e;
  font-size: 8.5px;
  font-weight: 800;
  padding-left: 7px;
  padding-right: 5px;
  text-align: left;
}

.excel-formula-note {
  background: #f7f9f7;
  border: 1px solid #d4ded6;
  color: #31424a;
  display: grid;
  font-size: 6.9px;
  font-weight: 700;
  gap: 1px;
  line-height: 1.15;
  margin: 1px 0 2px;
  padding: 2px 4px;
}

.excel-mast-car-note {
  grid-template-columns: minmax(0, 1fr);
}

.excel-total-tie-note {
  background: #eef6f0;
  border-color: #bdd0c2;
  color: #233b2d;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 2px;
}

.excel-total-tie-loads .excel-formula-cell,
.excel-page2-bottom .excel-results-block .excel-formula-cell,
.excel-page2-bottom .excel-results-block .excel-result-cell,
.excel-results-block .excel-result-cell,
.excel-results-block .is-result .excel-value {
  background: #e1f0e4;
  border-color: #9fbea8;
  color: #163a24;
}

@media print {
  @page {
    size: Letter portrait;
    margin: 0;
  }

  html,
  body.print-hoist-calculation-sheet {
    background: #ffffff !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body.print-hoist-calculation-sheet > *:not(#hoist-print-sheet-view) {
    display: none !important;
  }

  body.print-hoist-calculation-sheet #hoist-print-sheet-view,
  body.print-hoist-calculation-sheet #hoist-print-sheet-view[hidden] {
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    height: auto !important;
    left: auto !important;
    margin: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
    visibility: visible !important;
    width: auto !important;
  }

  body.print-hoist-calculation-sheet #hoist-print-sheet-view *,
  body.print-hoist-calculation-sheet .excel-print-pages,
  body.print-hoist-calculation-sheet .excel-print-pages * {
    visibility: visible !important;
  }

  body.print-hoist-calculation-sheet .excel-print-pages {
    display: block !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  body.print-hoist-calculation-sheet .excel-page {
    border: 0 !important;
    box-shadow: none !important;
    break-after: page;
    break-inside: avoid;
    height: 11in !important;
    margin: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    page-break-after: always;
    page-break-inside: avoid;
    padding: .35in .45in !important;
    width: 8.5in !important;
  }

  body.print-hoist-calculation-sheet .excel-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }
}

/* Phase 6A.9b - keep print ancestors in flow so the nested print view is not blank. */
@media print {
  body.print-hoist-calculation-sheet * {
    visibility: hidden !important;
  }

  body.print-hoist-calculation-sheet > *:not(#hoist-print-sheet-view) {
    display: block !important;
  }

  body.print-hoist-calculation-sheet #hoist-print-sheet-view,
  body.print-hoist-calculation-sheet #hoist-print-sheet-view *,
  body.print-hoist-calculation-sheet .excel-print-pages,
  body.print-hoist-calculation-sheet .excel-print-pages * {
    visibility: visible !important;
  }

  body.print-hoist-calculation-sheet #hoist-print-sheet-view,
  body.print-hoist-calculation-sheet #hoist-print-sheet-view[hidden] {
    display: block !important;
    left: 0 !important;
    position: absolute !important;
    top: 0 !important;
    width: 8.5in !important;
    z-index: 9999 !important;
  }
}

/* Phase 6A.10 - button/input polish and lightweight formula annotations. */
.excel-formula-note,
.excel-mast-car-note,
.excel-total-tie-note {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #38454d;
  padding: 1px 2px;
}

.excel-total-tie-note {
  margin-bottom: 5px;
  padding-bottom: 3px;
}


.hoist-length-helper,
.hoist-average-suggestion-helper {
  color: #58707b;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: -2px;
}

.hoist-length-helper[hidden],
.hoist-average-suggestion-helper[hidden] {
  display: none;
}

#hoist-height-served-ft::placeholder,
#hoist-roof-cantilever::placeholder {
  color: rgba(70, 90, 110, 0.45);
  font-weight: 400;
}

.my-projects-menu-shell {
  position: relative;
}

.my-projects-trigger {
  white-space: nowrap;
}

.my-projects-trigger span {
  color: #fff7ed;
  font-size: 11px;
  margin-left: 4px;
}

.my-projects-popover {
  background: #ffffff;
  border: 1px solid #d7e3e8;
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(15, 36, 51, 0.18);
  display: grid;
  gap: 10px;
  min-width: 330px;
  padding: 12px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
}

.my-projects-popover[hidden] {
  display: none;
}

.my-projects-popover-head,
.my-projects-row,
.my-projects-actions {
  align-items: center;
  display: flex;
  gap: 7px;
}

.my-projects-popover-head {
  justify-content: space-between;
}

.my-projects-popover-head strong {
  color: #162d3a;
  font-size: 13px;
}

.my-projects-section {
  display: grid;
  gap: 6px;
}

.my-projects-section label {
  color: #526b77;
  display: grid;
  font-size: 10px;
  font-weight: 850;
  gap: 3px;
  margin: 0;
  text-transform: uppercase;
}

.my-projects-section select {
  font-size: 12px;
  min-height: 30px;
  padding: 4px 8px;
}

.my-projects-small-button {
  background: #e8f0f3;
  border: 1px solid #cbdde4;
  border-radius: 7px;
  color: #223843;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  min-height: 28px;
  padding: 4px 9px;
}

.my-projects-small-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.my-projects-small-button.primary {
  background: #0f7490;
  border-color: #0f7490;
  color: #ffffff;
}

.my-projects-small-button.danger {
  background: #fff1f0;
  border-color: #f2c6c0;
  color: #8a2f25;
}

.my-projects-more-menu {
  position: relative;
}

.my-projects-more-menu summary {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  list-style: none;
  min-width: 34px;
}

.my-projects-more-menu summary::-webkit-details-marker {
  display: none;
}

.my-projects-more-panel {
  background: #ffffff;
  border: 1px solid #d7e3e8;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15, 36, 51, 0.16);
  display: grid;
  gap: 6px;
  min-width: 190px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
}

.my-projects-more-panel .my-projects-small-button {
  justify-content: flex-start;
  text-align: left;
  width: 100%;
}

.my-projects-status {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #9a3412;
  font-size: 11px;
  font-weight: 850;
  padding: 4px 7px;
}

.my-projects-status[hidden] {
  display: none;
}

.my-projects-saved-under {
  color: #60727d;
  flex: 1;
  font-size: 11px;
  font-weight: 750;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invalid-length {
  border-color: #c2410c !important;
  box-shadow: 0 0 0 2px rgba(194, 65, 12, 0.14) !important;
}

.fix-flip-badge {
  background: #edf7f4;
  border-color: #b8d8cf;
  color: #176354;
}

.fix-flip-manual-shell {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: none;
  min-height: calc(100vh - 145px);
}

.fix-flip-heading {
  margin-bottom: 14px;
}

.fix-flip-heading h2 {
  color: #0f172a;
  font-size: 25px;
  font-weight: 650;
  letter-spacing: 0;
}

.fix-flip-heading p {
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.fix-flip-manual-layout {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(300px, 320px) minmax(0, 1fr);
}

.fix-flip-sidebar {
  background: #f8fafc;
  border: 1px solid #e8edf3;
  border-radius: 8px;
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  padding: 12px 10px;
  position: sticky;
  top: 14px;
}

.fix-flip-manual-search {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.fix-flip-manual-search span {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fix-flip-manual-search input {
  background: #ffffff;
  border-color: #e2e8f0;
  border-radius: 7px;
  font-size: 13px;
  padding: 8px 10px;
}

.fix-flip-manual-tree details {
  border-top: 0;
  padding: 4px 0;
}

.fix-flip-manual-tree details:first-child {
  border-top: 0;
}

.fix-flip-manual-tree summary {
  border-radius: 7px;
  color: #0f172a;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.28;
  list-style-position: outside;
  padding: 6px 8px;
  white-space: normal;
}

.fix-flip-manual-tree summary:hover {
  background: rgba(15, 23, 42, 0.03);
}

.fix-flip-subtopic {
  display: grid;
  gap: 2px;
  margin-top: 3px;
  padding-left: 14px;
}

.fix-flip-subtopic button {
  background: transparent;
  border: 0;
  border-radius: 7px;
  box-shadow: none;
  color: #334155;
  cursor: pointer;
  display: block;
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  padding: 6px 10px;
  text-align: left;
  white-space: normal;
  width: 100%;
}

.fix-flip-subtopic button.fix-flip-sidebar-subtopic {
  color: #475569;
  font-weight: 500;
  margin-top: 1px;
}

.fix-flip-subtopic button:not(.fix-flip-sidebar-subtopic) {
  padding-left: 18px;
}

.fix-flip-subtopic button:hover {
  background: rgba(15, 23, 42, 0.035);
  color: #0f172a;
}

.fix-flip-subtopic button.active {
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  font-weight: 500;
}

.fix-flip-reader-column {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.fix-flip-manual-player {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
  overflow: hidden;
  position: sticky;
  top: 14px;
  z-index: 3;
}

.fix-flip-player-header {
  align-items: center;
  color: #f8fafc;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 9px 12px;
}

.fix-flip-player-header div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.fix-flip-player-header strong {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fix-flip-player-header span {
  color: #cbd5e1;
  font-size: 12px;
}

.fix-flip-player-header button {
  background: transparent;
  border: 0;
  color: #cbd5e1;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 5px 6px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.fix-flip-player-header button:hover {
  color: #ffffff;
}

.fix-flip-manual-player video {
  background: #000;
  display: block;
  max-height: 42vh;
  width: 100%;
}

.fix-flip-manual-content {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: none;
  color: #0f172a;
  max-height: calc(100vh - 170px);
  min-height: 620px;
  overflow-y: auto;
  padding: 28px 36px 34px;
}

.fix-flip-manual-content h3 {
  color: #0f172a;
  font-size: 25px;
  font-weight: 650;
  line-height: 1.22;
  margin: 0 0 5px;
}

.fix-flip-manual-content h4 {
  color: #111827;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  margin: 24px 0 8px;
}

.manual-section-header {
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 20px;
  padding-bottom: 14px;
}

.manual-reader-topbar {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 14px;
}


.manual-heading-links {
  align-items: center;
  color: #cbd5e1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 6px;
}

.manual-heading-links .manual-text-link + .manual-text-link::before {
  color: #94a3b8;
  content: "·";
  margin-right: 7px;
  text-decoration: none;
}

.manual-breadcrumbs {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
}

.manual-reading {
  color: #1f2937;
  font-size: 14.5px;
  line-height: 1.68;
  max-width: 980px;
}

.manual-reading p {
  margin: 0 0 14px;
}

.manual-block {
  background: #f8fafc;
  border: 0;
  border-left: 3px solid #cbd5e1;
  border-radius: 0 7px 7px 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.58;
  margin: 14px 0 16px;
  padding: 12px 14px;
}

.manual-block-warning {
  background: #fffaf0;
  border-left-color: #f2c94c;
}

.manual-block-formula {
  background: #f8fafc;
  border-left-color: #64748b;
  font-family: inherit;
}

.manual-block-example,
.manual-block-benchmark {
  background: #f8fbff;
  border-left-color: #93c5fd;
}

.manual-list {
  margin: 0 0 14px 20px;
  padding: 0;
}

.manual-list li {
  margin-bottom: 5px;
  padding-left: 2px;
}

.manual-asset {
  margin: 18px auto 20px;
  max-width: 860px;
}

.manual-asset img {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: block;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  width: 100%;
}

.manual-asset figcaption {
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
  padding: 7px 2px 0;
  text-align: center;
}

.fixflip-video-link,
.manual-text-link,
.manual-inline-link,
.manual-video-link,
.manual-anchor-inline,
.manual-related-toggle {
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: #2563eb;
  cursor: pointer;
  font: inherit;
  font-weight: 400;
  padding: 0;
  box-shadow: none;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.fixflip-video-link:hover,
.manual-text-link:hover,
.manual-inline-link:hover,
.manual-video-link:hover,
.manual-anchor-inline:hover,
.manual-related-toggle:hover {
  background: transparent;
  box-shadow: none;
  color: #1d4ed8;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.manual-text-link:disabled,
.manual-inline-link:disabled,
.manual-video-link:disabled,
.manual-anchor-inline:disabled {
  color: #94a3b8;
  cursor: not-allowed;
  text-decoration: none;
}

.manual-inline-link {
  display: inline;
  line-height: inherit;
}


.fix-flip-manual-content button.manual-text-link:active,
.fix-flip-manual-content button.manual-inline-link:active,
.fix-flip-manual-content button.manual-video-link:active,
.fix-flip-manual-content button.manual-anchor-inline:active,
.fix-flip-manual-content button.manual-related-moment:active,
.fix-flip-manual-content button.manual-related-toggle:active,
.fix-flip-manual-content button.manual-text-link:focus,
.fix-flip-manual-content button.manual-inline-link:focus,
.fix-flip-manual-content button.manual-video-link:focus,
.fix-flip-manual-content button.manual-anchor-inline:focus,
.fix-flip-manual-content button.manual-related-moment:focus,
.fix-flip-manual-content button.manual-related-toggle:focus {
  background: transparent;
  box-shadow: none;
}

.manual-related-moments[hidden] {
  display: none;
}

.manual-related-moments {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #334155;
  display: grid;
  gap: 6px;
  margin-top: 16px;
  max-width: 760px;
  padding: 12px 14px;
}

.manual-related-moments strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.manual-related-moment,
.manual-related-toggle {
  background: transparent;
  border: 0;
  color: #2563eb;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  padding: 2px 0;
  text-align: left;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.manual-related-moment:hover,
.manual-related-toggle:hover {
  background: transparent;
  color: #1d4ed8;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.manual-related-moment:disabled {
  color: #94a3b8;
  cursor: not-allowed;
  text-decoration: none;
}

.manual-section-nav {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

.manual-section-nav button {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: #2563eb;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 0;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.manual-section-nav button:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.manual-section-nav button:disabled {
  color: #94a3b8;
  cursor: not-allowed;
  text-decoration: none;
}

.manual-video-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

@media (max-width: 900px) {
  .fix-flip-manual-layout {
    gap: 14px;
    grid-template-columns: 1fr;
  }

  .fix-flip-sidebar {
    max-height: 38vh;
    position: static;
  }

  .fix-flip-manual-content {
    max-height: none;
    min-height: 0;
    padding: 22px 18px;
  }

  .fix-flip-manual-content h3 {
    font-size: 22px;
  }

  .manual-reading {
    font-size: 14px;
  }

  .manual-reader-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }


  .manual-section-nav button,
  .fix-flip-subtopic button {
    min-height: 34px;
  }
}