/* Client Portal — virtual file host (Explorer + WinCan-style inspection) */

.cp-host {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: transparent;
  color: var(--cp-text);
}

.cp-host-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
  padding: 0 18px 28px;
}

.cp-host-inner--workspace {
  max-width: none;
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 10px;
}

/* Wraps workspace chrome content. */
.cp-host-chrome {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Pipe Share intro: full-viewport splash → persistent corner mark (mountFileHost). */
.cp-pipe-share-splash {
  position: fixed;
  inset: 0;
  z-index: 100000;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.2vh, 22px);
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  background: rgba(4, 5, 8, 0.97);
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.18, 0.82, 0.22, 1);
  pointer-events: auto;
  overscroll-behavior: contain;
}

.cp-pipe-share-splash--in {
  opacity: 1;
}

.cp-pipe-share-splash--out {
  opacity: 0;
  transition: opacity 0.78s ease-in;
}

.cp-pipe-share-splash__title,
.cp-pipe-share-splash__by {
  margin: 0;
  font-family: 'Poppins', var(--cp-font);
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  text-align: center;
  max-width: min(94vw, 42rem);
  color: var(--cp-orange);
  line-height: 1.08;
  -webkit-font-smoothing: antialiased;
}

/* Bolder on-screen type: extruded + soft orange glow (readable on dark splash). */
.cp-pipe-share-splash__title {
  font-size: clamp(1.5rem, 6.5vw, 3.15rem);
  letter-spacing: 0.16em;
  text-shadow:
    0 1px 0 rgba(255, 210, 175, 0.55),
    0 2px 0 rgba(255, 160, 110, 0.35),
    1px 3px 0 rgba(140, 48, 18, 0.65),
    2px 5px 0 rgba(90, 32, 12, 0.5),
    3px 7px 10px rgba(0, 0, 0, 0.55),
    0 0 24px var(--cp-orange-glow),
    0 0 52px rgba(232, 93, 44, 0.28),
    0 0 80px rgba(255, 120, 70, 0.12);
}

.cp-pipe-share-splash__by {
  font-size: clamp(1.15rem, 4.8vw, 2.35rem);
  letter-spacing: 0.2em;
  text-shadow:
    0 1px 0 rgba(255, 200, 160, 0.45),
    1px 2px 0 rgba(110, 40, 14, 0.55),
    2px 4px 8px rgba(0, 0, 0, 0.5),
    0 0 20px var(--cp-orange-glow),
    0 0 40px rgba(232, 93, 44, 0.22);
}

.cp-pipe-share-splash__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* PIPESHARE wordmark: PIPE (white) + SHARE (orange), Poppins to match splash / portal chrome */
.cp-pipe-share-wordmark {
  display: inline-flex;
  align-items: baseline;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-family: 'Poppins', var(--cp-font);
  font-style: normal;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}

/* Subtle rolling sheen (diagonal band, soft-light blend) */
.cp-pipe-share-wordmark::after {
  content: '';
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: 0;
  width: 48%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    102deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0.08) 44%,
    rgba(255, 255, 255, 0.26) 50%,
    rgba(255, 255, 255, 0.08) 56%,
    rgba(255, 255, 255, 0) 66%,
    rgba(255, 255, 255, 0) 100%
  );
  mix-blend-mode: soft-light;
  transform: translateX(-125%) skewX(-15deg);
  animation: cp-pipe-share-wordmark-sheen 5.6s cubic-bezier(0.42, 0.03, 0.58, 0.97) infinite;
  animation-delay: 0.35s;
}

.cp-pipe-share-wordmark--corner::after {
  animation-duration: 6.8s;
  animation-delay: 0.6s;
}

.cp-pipe-share-wordmark--header {
  font-weight: 800;
  font-size: clamp(1.28rem, 2.8vw, 1.72rem);
  letter-spacing: 0.05em;
}

.cp-pipe-share-wordmark--header-mobile {
  font-size: clamp(1.12rem, 4.8vw, 1.48rem);
  letter-spacing: 0.045em;
}

.cp-pipe-share-wordmark--header::after {
  animation-duration: 7.2s;
  animation-delay: 0.8s;
}

.cp-pipe-share-wordmark--splash::after {
  animation-duration: 4.9s;
  animation-delay: 0.2s;
}

.cp-pipe-share-wordmark__pipe,
.cp-pipe-share-wordmark__share {
  position: relative;
  z-index: 1;
}

.cp-pipe-share-wordmark__pipe {
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.cp-pipe-share-wordmark__share {
  color: var(--cp-orange);
  text-shadow:
    0 1px 0 rgba(255, 210, 175, 0.4),
    0 0 22px var(--cp-orange-glow),
    0 0 48px rgba(232, 93, 44, 0.2);
}

.cp-pipe-share-wordmark--splash {
  font-weight: 900;
  font-size: clamp(3.7rem, 16.4vw, 7.2rem);
  letter-spacing: 0.08em;
  filter: drop-shadow(0 6px 28px rgba(232, 93, 44, 0.22));
}

@keyframes cp-pipe-share-wordmark-sheen {
  0%,
  8% {
    transform: translateX(-125%) skewX(-15deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  46% {
    transform: translateX(235%) skewX(-15deg);
    opacity: 1;
  }
  52%,
  100% {
    transform: translateX(235%) skewX(-15deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-pipe-share-wordmark::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* Splash shows PIPESHARE wordmark only (no secondary hero image). */
.cp-pipe-share-splash--logo-only .cp-pipe-share-wordmark--splash {
  max-width: min(96vw, 48rem);
}

.cp-pipe-share-splash__mark {
  display: block;
  width: auto;
  height: auto;
  max-width: min(75vw, 100%);
  max-height: 75vh;
  object-fit: contain;
}

.cp-hidden-input {
  position: fixed;
  left: -9999px;
  width: 0;
  height: 0;
  opacity: 0;
}

.cp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cp-header {
  padding: 22px 0 8px;
  border-bottom: 1px solid var(--cp-border);
  margin-bottom: 14px;
  background: var(--cp-glass);
  backdrop-filter: var(--cp-blur);
  -webkit-backdrop-filter: var(--cp-blur);
  border-radius: 0 0 var(--cp-radius) var(--cp-radius);
  padding-left: 16px;
  padding-right: 16px;
  margin-left: -4px;
  margin-right: -4px;
  border-left: 1px solid var(--cp-border);
  border-right: 1px solid var(--cp-border);
  border-bottom: 1px solid var(--cp-border-strong);
}

.cp-header__brand {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.cp-header__mark {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--cp-accent);
  margin-top: 8px;
  box-shadow: 0 0 0 5px var(--cp-accent-soft);
  flex-shrink: 0;
}

.cp-header__title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--cp-orange);
}

.cp-header__sub {
  margin: 6px 0 0;
  color: var(--cp-muted);
  font-size: 0.92rem;
}

.cp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cp-border);
  background: var(--cp-glass);
  backdrop-filter: var(--cp-blur);
  -webkit-backdrop-filter: var(--cp-blur);
  border-radius: var(--cp-radius);
  margin-bottom: 8px;
  border: 1px solid var(--cp-border);
}

.cp-toolbar--layouts {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding-top: 4px;
}

.cp-toolbar--banner {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-top: 4px;
  border-radius: 10px;
  border: 1px solid var(--cp-border);
}

.cp-toolbar--banner-warn {
  background: rgba(255, 193, 7, 0.08);
  border-color: rgba(255, 193, 7, 0.25);
}

.cp-toolbar--banner-err {
  background: rgba(232, 93, 76, 0.1);
  border-color: rgba(232, 93, 76, 0.35);
}

.cp-banner-msg {
  margin: 0;
  font-size: 0.85rem;
  color: var(--cp-text);
  line-height: 1.45;
}

.cp-toolbar--banner-err .cp-banner-msg {
  color: #e85d4c;
}

.cp-empty--err {
  color: #e85d4c;
}

.cp-tb-btn--primary {
  background: linear-gradient(135deg, var(--cp-orange), #ff9054);
  border-color: rgba(255, 107, 53, 0.45);
  color: #111;
  box-shadow: 0 6px 18px var(--cp-orange-glow);
}

/* —— Transfers workspace panel (upload progress) —— */
.cp-transfers-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.cp-transfers-panel__dest {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cp-muted);
  line-height: 1.35;
  word-break: break-word;
}

.cp-transfers-panel__idle-speed {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: var(--cp-muted, #6b7280);
}

.cp-transfers-panel__idle {
  margin: 0;
  font-size: 0.86rem;
  color: var(--cp-muted);
  line-height: 1.45;
}

.cp-upload-card--transfers {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  opacity: 1;
  transition: opacity 1.25s ease;
}

.cp-upload-card--transfers.cp-transfer-card--exit {
  opacity: 0;
}

.cp-transfer-parent-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.cp-transfer-toggle {
  border: 1px solid var(--cp-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--cp-text);
  border-radius: 8px;
  min-width: 26px;
  height: 26px;
  cursor: pointer;
}

.cp-transfer-status {
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cp-muted);
}

.cp-transfer-controls {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.cp-transfer-files {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--cp-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}

.cp-transfer-queue {
  margin-top: 12px;
  border-top: 1px solid var(--cp-border);
  padding-top: 10px;
}

.cp-transfer-queue__title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cp-muted);
}

.cp-transfer-queue__list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cp-transfer-queue__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--cp-border);
  border-radius: 8px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.02);
}

.cp-transfer-queue__name {
  font-size: 0.8rem;
  color: var(--cp-text);
}

.cp-transfer-queue__meta {
  font-size: 0.72rem;
  color: var(--cp-muted);
}

.cp-transfer-file {
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
}

.cp-transfer-file__title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.cp-transfer-file__name {
  font-size: 0.82rem;
  color: var(--cp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-transfer-file__state {
  font-size: 0.74rem;
  color: var(--cp-muted);
  white-space: nowrap;
}

.cp-upload-bar--file {
  height: 7px;
  margin: 0;
}

.cp-pick-row.is-selected {
  border-radius: 8px;
  background: var(--cp-orange-soft);
  outline: 1px solid rgba(232, 93, 44, 0.35);
}

.cp-pick-breadcrumb {
  margin: 0 0 10px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--cp-muted);
}

/* —— Upload progress (Wasabi) —— */
.cp-upload-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.28);
  pointer-events: auto;
}

.cp-upload-card {
  width: min(440px, 100%);
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--cp-bg);
  border: 1px solid var(--cp-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.cp-upload-card__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cp-text);
  word-break: break-word;
}

.cp-upload-card__batch {
  font-weight: 500;
  color: var(--cp-muted);
}

.cp-upload-card__detail {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--cp-muted);
  line-height: 1.35;
}

.cp-upload-bar {
  height: 9px;
  border-radius: 999px;
  background: var(--cp-border);
  overflow: hidden;
  margin: 12px 0 10px;
}

.cp-upload-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--cp-accent, #3b82f6);
  transition: width 0.1s ease-out;
}

/* Transfers panel: uploads stay orange; Folder 1↔8 move jobs use blue. */
.cp-upload-card--transfers:not(.cp-upload-card--move) .cp-upload-bar__fill {
  background: linear-gradient(135deg, var(--cp-orange), #ff9054);
}

.cp-upload-card--transfers.cp-upload-card--move .cp-upload-bar__fill,
.cp-upload-bar--move .cp-upload-bar__fill {
  background: linear-gradient(135deg, #1d4ed8, #7dd3fc);
  box-shadow: 0 0 14px rgba(37, 99, 235, 0.28);
}

.cp-upload-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--cp-muted);
}

.cp-upload-card__meta span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--cp-text);
  font-weight: 600;
}

.cp-toolbar__label {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cp-muted);
}

.cp-layout-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-layout-btn {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--cp-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--cp-text);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}

.cp-layout-btn:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.cp-layout-btn.is-active {
  border-color: rgba(255, 107, 53, 0.45);
  background: var(--cp-accent-soft);
  color: #ffd7c7;
}

.cp-toolbar__hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--cp-muted);
  line-height: 1.45;
  max-width: 920px;
}

.cp-toolbar__hint--solo {
  margin: 0 0 4px;
  padding: 10px 14px;
  max-width: none;
  border-radius: var(--cp-radius);
  border: 1px solid var(--cp-border);
  background: var(--cp-glass);
  backdrop-filter: var(--cp-blur);
  -webkit-backdrop-filter: var(--cp-blur);
}

.cp-tb-btn {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--cp-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--cp-text);
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
}

.cp-tb-btn:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.18);
}

.cp-tb-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cp-tb-btn.is-active {
  border-color: var(--cp-orange);
  background: var(--cp-accent-soft);
  color: #ffd7c7;
}

.cp-tb-btn--accent {
  background: linear-gradient(135deg, var(--cp-orange), #ff9054);
  border-color: rgba(255, 107, 53, 0.45);
  color: #111;
  box-shadow: 0 8px 22px var(--cp-orange-glow);
}

.cp-tb-sep {
  width: 1px;
  height: 22px;
  background: var(--cp-border);
  margin: 0 4px;
}

.cp-tb-clip {
  font-size: 0.82rem;
  color: var(--cp-muted);
  margin-left: auto;
}

.cp-main {
  flex: 1;
  padding-top: 14px;
}

.cp-portal-tool.is-active {
  border-color: rgba(232, 93, 44, 0.58);
  background: rgba(232, 93, 44, 0.2);
  color: #ffe7da;
}

.cp-host-inner--tutorials {
  padding-bottom: 26px;
}

.cp-main--tutorials {
  flex: 1;
  padding-top: 10px;
}

.cp-tutorials-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cp-tutorials-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 18px;
  border: 1px solid var(--cp-border-strong);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--cp-panel);
  box-shadow: var(--cp-shadow);
}

.cp-tutorials-page__eyebrow {
  margin: 0 0 4px;
  color: rgba(255, 182, 148, 0.94);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  font-weight: 800;
  text-transform: uppercase;
}

.cp-tutorials-page__header h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.cp-tutorials-page__subtitle {
  margin: 8px 0 0;
  color: var(--cp-muted);
  max-width: 64ch;
}

.cp-tutorials-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cp-tutorials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.cp-tutorial-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 210px;
  border-radius: 14px;
  border: 1px solid var(--cp-border-strong);
  background: linear-gradient(165deg, rgba(20, 24, 34, 0.95), rgba(10, 12, 19, 0.99));
  padding: 14px 14px 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.cp-tutorial-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cp-tutorial-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffd8c5;
  border: 1px solid rgba(232, 93, 44, 0.4);
  background: rgba(232, 93, 44, 0.16);
}

.cp-tutorial-time {
  color: var(--cp-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.cp-tutorial-card__title {
  margin: 0;
  font-size: 1rem;
}

.cp-tutorial-card__summary {
  margin: 0;
  color: var(--cp-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.cp-tutorial-card__foot {
  margin-top: auto;
  display: flex;
  justify-content: flex-start;
}

.cp-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px 16px 14px;
  border-top: 1px solid var(--cp-border);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.35));
  text-align: center;
}

/* Tagline: one-time fade-in on first paint, then slow horizontal glowing-orange pass (footer DOM is preserved in JS). */
.cp-footer__tagline-wrap {
  --cp-footer-fade-dur: 0.9s;
  --cp-footer-sheen-delay: 0.9s;
  --cp-footer-sheen-loop: 7.5s;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: min(720px, 100%);
  min-height: 4.25rem;
  margin: 0 auto;
  padding: 22px 20px 10px;
}

.cp-footer__tagline {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0;
  max-width: 100%;
  text-align: center;
}

.cp-footer__tagline-stack {
  position: relative;
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  font-family: 'Poppins', var(--cp-font);
  font-weight: 900;
  font-style: normal;
  font-size: clamp(0.82rem, 2.05vw, 1.18rem);
  letter-spacing: 0.08em;
  line-height: 1.22;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.4rem);
  animation: cp-footer-tagline-fade-in var(--cp-footer-fade-dur) cubic-bezier(0.18, 0.82, 0.22, 1) forwards;
}

.cp-footer__tagline-fill {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.cp-footer__tagline-fill--body {
  position: relative;
  z-index: 1;
  display: block;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

/* Horizontal glowing band clipped to glyphs; scrolls left → right, loops after intro */
.cp-footer__tagline-fill--sheen {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 32%,
    rgba(255, 160, 100, 0.2) 40%,
    rgba(255, 130, 70, 0.75) 46%,
    #ff8a4a 49%,
    #e85d2c 50%,
    #ff8a4a 51%,
    rgba(255, 130, 70, 0.75) 54%,
    rgba(255, 180, 130, 0.25) 60%,
    transparent 68%,
    transparent 100%
  );
  background-size: 240% 100%;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 5px rgba(232, 93, 44, 0.45)) drop-shadow(0 0 14px rgba(255, 120, 70, 0.35));
  animation: cp-footer-sheen-x-scroll var(--cp-footer-sheen-loop) var(--cp-footer-sheen-delay) linear infinite;
}

@keyframes cp-footer-tagline-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cp-footer-sheen-x-scroll {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: -100% 50%;
  }
}

@supports not (background-clip: text) {
  .cp-footer__tagline-stack {
    animation: cp-footer-tagline-fade-in-solid var(--cp-footer-fade-dur) cubic-bezier(0.18, 0.82, 0.22, 1) forwards;
  }

  .cp-footer__tagline-fill--body {
    color: #ffffff;
  }

  .cp-footer__tagline-fill--sheen {
    display: none;
  }
}

@keyframes cp-footer-tagline-fade-in-solid {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }
  to {
    opacity: 1;
    transform: none;
    color: var(--cp-orange);
  }
}

.cp-footer__meta {
  max-width: min(56rem, 100%);
  font-size: 0.8rem;
  color: var(--cp-muted);
  text-align: center;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .cp-footer__tagline-stack {
    animation: none;
    transform: none;
    opacity: 1;
  }

  .cp-footer__tagline-fill--body {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
  }

  .cp-footer__tagline-fill--sheen {
    display: none;
  }
}

.cp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 2px;
  margin-bottom: 12px;
}

.cp-crumb {
  border: none;
  background: transparent;
  color: var(--cp-orange);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}

.cp-crumb:hover {
  background: rgba(255, 255, 255, 0.06);
}

.cp-crumb.is-current {
  color: var(--cp-text);
  cursor: default;
}

.cp-crumb-sep {
  color: var(--cp-muted);
  font-size: 0.85rem;
  user-select: none;
}

.cp-explorer {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.55fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 960px) {
  .cp-explorer {
    grid-template-columns: 1fr;
  }
}

.cp-table-wrap {
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  overflow: auto;
  max-height: min(62vh, 720px);
  background: rgba(0, 0, 0, 0.2);
  overflow-anchor: none;
}

/* Extra hit area below file rows — right-click to add folders (~3in at 96dpi) */
.cp-table-wrap[data-explorer-list] {
  min-height: 200px;
  padding-bottom: 288px;
}

.cp-table-wrap[data-explorer-list].cp-explorer-drop-active {
  outline: 2px dashed rgba(232, 93, 44, 0.72);
  outline-offset: -3px;
  background: rgba(232, 93, 44, 0.08);
}

.cp-explorer-empty-hint {
  padding: 22px 20px 12px;
  text-align: center;
  color: var(--cp-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.cp-explorer-loading {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cp-explorer-refresh-hint {
  padding: 6px 12px;
  font-size: 0.78rem;
  color: var(--cp-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

.cp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.cp-table th,
.cp-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cp-table th {
  position: sticky;
  top: 0;
  background: rgba(20, 24, 32, 0.96);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cp-muted);
  z-index: 2;
}

.cp-table--explorer .cp-explorer-col-th {
  position: sticky;
  top: 0;
  padding: 0;
  vertical-align: bottom;
}

.cp-explorer-col-header {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 36px;
  padding: 6px 8px 6px 12px;
}

.cp-explorer-col-label {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  padding: 4px 2px;
  border-radius: 4px;
  cursor: pointer;
}

.cp-explorer-col-label:hover,
.cp-explorer-col-label.is-filter-open {
  color: var(--hp-btn-accent, var(--cp-orange));
  background: color-mix(in srgb, var(--hp-btn-accent, var(--cp-orange)) 10%, transparent);
}

.cp-explorer-col-label.is-filter-active {
  color: var(--hp-btn-accent, var(--cp-orange));
}

.cp-explorer-col-label.is-filter-active::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--hp-btn-accent, var(--cp-orange));
  vertical-align: middle;
  transform: translateY(-1px);
}

.cp-explorer-col-label--static {
  cursor: default;
  padding: 4px 2px;
}

.cp-explorer-col-sort {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 22px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}

.cp-explorer-col-sort:hover {
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.06);
}

.cp-explorer-col-sort.is-active {
  color: var(--hp-btn-accent, var(--cp-orange));
}

.cp-explorer-col-sort__up,
.cp-explorer-col-sort__down {
  display: block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.cp-explorer-col-sort__up {
  border-bottom: 5px solid currentColor;
  margin-bottom: 1px;
  opacity: 0.35;
}

.cp-explorer-col-sort__down {
  border-top: 5px solid currentColor;
  opacity: 0.35;
}

.cp-explorer-col-sort.is-active.is-asc .cp-explorer-col-sort__up {
  opacity: 1;
}

.cp-explorer-col-sort.is-active.is-desc .cp-explorer-col-sort__down {
  opacity: 1;
}

.cp-explorer-col-th {
  position: relative;
}

.cp-explorer-col-th.is-filter-open {
  z-index: 12;
}

.cp-explorer-filter-popover {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  z-index: 40;
  min-width: 196px;
  max-width: min(280px, 72vw);
  padding: 10px 0 8px;
  border: 1px solid color-mix(in srgb, var(--hp-btn-accent, var(--cp-orange)) 22%, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: rgba(16, 20, 28, 0.98);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.25);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
}

.cp-explorer-filter__section {
  padding: 0 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
}

.cp-explorer-filter__section:last-of-type {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.cp-explorer-filter__heading {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cp-muted);
  margin-bottom: 6px;
}

.cp-explorer-filter__radio,
.cp-explorer-filter__check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-radius: 4px;
  cursor: pointer;
}

.cp-explorer-filter__radio:hover,
.cp-explorer-filter__check:hover {
  background: rgba(255, 255, 255, 0.05);
}

.cp-explorer-filter__radio input,
.cp-explorer-filter__check input {
  accent-color: var(--hp-btn-accent, var(--cp-orange));
  margin: 0;
}

.cp-explorer-filter__checks {
  max-height: 180px;
  overflow: auto;
}

.cp-explorer-filter__actions {
  padding: 8px 12px 0;
}

.cp-explorer-filter__clear {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8rem;
  padding: 6px 10px;
  cursor: pointer;
}

.cp-explorer-filter__clear:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--hp-btn-accent, var(--cp-orange)) 35%, transparent);
  color: var(--hp-btn-accent, var(--cp-orange));
}

.cp-explorer-filter__clear:disabled {
  opacity: 0.4;
  cursor: default;
}

.cp-explorer-table-shell {
  position: relative;
}

.cp-row {
  cursor: pointer;
}

.cp-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.cp-row.is-selected {
  background: var(--cp-orange-soft);
  outline: 1px solid rgba(255, 107, 53, 0.35);
}

.cp-name {
  font-weight: 600;
}

.cp-ico {
  margin-right: 6px;
}

.cp-empty {
  padding: 28px;
  text-align: center;
  color: var(--cp-muted);
  border: 1px dashed var(--cp-border);
  border-radius: 12px;
}

.cp-preview {
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  padding: 14px;
  background: var(--cp-panel);
  min-height: 280px;
  box-shadow: var(--cp-shadow);
}

.cp-preview__title {
  margin: 0 0 12px;
  font-size: 0.95rem;
}

.cp-preview__body {
  min-height: 220px;
}

.cp-muted {
  color: var(--cp-muted);
  font-size: 0.9rem;
  margin: 0 0 8px;
}

/* PDF */
.cp-pdf__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.cp-pdf__title {
  font-weight: 800;
  font-size: 0.88rem;
}

.cp-pdf__actions {
  display: flex;
  gap: 8px;
}

.cp-pdf__btn {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--cp-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--cp-text);
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}

.cp-pdf__frame-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--cp-border);
  background: #111;
  min-height: 360px;
}

.cp-pdf__frame {
  width: 100%;
  height: min(58vh, 560px);
  border: none;
}

.cp-pdf__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* Video */
.cp-video {
  display: grid;
  gap: 10px;
}

.cp-video__frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--cp-border-strong);
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.cp-video__buffer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(232, 93, 44, 0.12) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
}

.cp-video--buffering .cp-video__buffer {
  opacity: 1;
  animation: cp-video-buffer-sweep 1.1s ease-in-out infinite;
}

@keyframes cp-video-buffer-sweep {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.cp-video__el {
  width: 100%;
  max-height: min(52vh, 520px);
  display: block;
}

.cp-video__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.cp-video__btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--cp-border);
  background: rgba(255, 255, 255, 0.08);
  color: var(--cp-text);
  font-size: 1.1rem;
  cursor: pointer;
}

.cp-video__time {
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cp-muted);
}

.cp-video__scrub {
  flex: 1 1 180px;
  min-width: 120px;
  accent-color: var(--cp-accent);
}

.cp-video__rate-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cp-muted);
}

.cp-video__rate-select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--cp-border);
  background: rgba(10, 12, 18, 0.9);
  color: var(--cp-text);
}

.cp-video__custom-rate {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cp-video__rate-input {
  width: 88px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--cp-border);
  background: rgba(10, 12, 18, 0.9);
  color: var(--cp-text);
}

.cp-video__rate-apply {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--cp-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--cp-text);
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}

/* Fullscreen: whole custom player (video + controls) */
.cp-video:fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 14px;
  background: #000;
}

.cp-video:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 14px;
  background: #000;
}

.cp-video:fullscreen .cp-video__frame,
.cp-video:-webkit-full-screen .cp-video__frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(255, 255, 255, 0.12);
}

.cp-video:fullscreen .cp-video__el,
.cp-video:-webkit-full-screen .cp-video__el {
  max-height: none;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.cp-video:fullscreen .cp-video__controls,
.cp-video:-webkit-full-screen .cp-video__controls {
  flex-shrink: 0;
}

/* WinCan-style layout — pipe schematic left; compact video + observation list stacked on the right */
.cp-wincan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.95fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 1024px) {
  .cp-wincan {
    grid-template-columns: 1fr;
  }
}

.cp-wincan__right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  min-width: 0;
}

.cp-wincan-video-mount {
  border-radius: 14px;
  border: 1px solid var(--cp-border);
  padding: 12px;
  background: var(--cp-panel);
  box-shadow: var(--cp-shadow);
}

.cp-wincan-video-mount .cp-video {
  gap: 10px;
}

.cp-wincan-video-mount .cp-video__el {
  max-height: min(52vh, 520px);
}

.cp-wincan__h {
  margin: 0 0 8px;
  font-size: 1rem;
}

.cp-wincan__h--table {
  margin-top: 6px;
  margin-bottom: 4px;
}

.cp-obs-table-wrap--wincan-side {
  max-height: min(42vh, 440px);
}

.cp-schematic {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--cp-border);
  background: linear-gradient(180deg, rgba(30, 36, 48, 0.9), rgba(14, 16, 22, 0.95));
  overflow: hidden;
  margin: 12px 0;
}

.cp-schematic__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
}

.cp-schematic__markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cp-schematic__marker {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #ff6b35;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.cp-schematic__marker.is-active {
  background: var(--cp-orange);
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--cp-orange-glow), 0 2px 12px rgba(0, 0, 0, 0.5);
  transform: scale(1.2);
}

/* Vertical WinCan-style pipe run (Horizon orange / black) */
.cp-pipe-run {
  display: grid;
  /** Third track = observation labels — must not collapse to 0 (`minmax(0,1fr)` caused a clipped single column). */
  grid-template-columns: minmax(104px, 168px) minmax(120px, 160px) minmax(200px, 1fr);
  gap: 10px 14px;
  align-items: stretch;
  margin: 14px 0 18px;
  padding: 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 107, 53, 0.22);
  background: linear-gradient(145deg, rgba(18, 14, 12, 0.96), rgba(8, 8, 10, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 40px rgba(0, 0, 0, 0.35);
}

.cp-pipe-run--empty {
  padding: 20px 16px;
}

.cp-inspection-bar--pipe {
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.cp-pipe-run--loading {
  padding: 24px 16px;
}

.cp-pipe-run__flow-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
}

.cp-pipe-run__flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 28px;
  padding-bottom: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

.cp-pipe-run__survey-caption {
  width: 100%;
  max-width: 168px;
  text-align: center;
  padding: 0 2px 10px;
  line-height: 1.35;
}

.cp-pipe-run__survey-caption__pair {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--cp-text);
  letter-spacing: 0.02em;
}

.cp-pipe-run__survey-caption__len {
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--cp-muted);
}

.cp-pipe-run__survey-caption__dir {
  margin-top: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--cp-muted);
  text-align: center;
}

.cp-pipe-run__survey-caption__db {
  margin-top: 4px;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--cp-muted);
  opacity: 0.92;
  word-break: break-word;
}

.cp-pipe-run__flow-svg {
  width: 28px;
  flex: 1 1 auto;
  min-height: 120px;
  height: min(78vh, 920px, max(128px, calc(var(--cp-pipe-track-min-px, 280px) * 0.9)));
  max-height: min(78vh, 920px);
  filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.35));
  transform-origin: center center;
  transition: transform 0.35s ease;
}

/* Downstream / camera toward bottom of run — flip so the wavy arrow points with flow */
.cp-pipe-run__flow-svg--flip {
  transform: scaleY(-1);
}

.cp-pipe-run__flow-cap {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cp-muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* Pipe + labels share subgrid rows so % chainage matches; fan SVG spans shaft + label track. */
.cp-pipe-run__pipe-label-block {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto minmax(var(--cp-pipe-track-min-px, 280px), 1fr) auto;
  min-width: 0;
}

.cp-pipe-run__pipe-label-block > .cp-pipe-run__node--top {
  grid-column: 1;
}

.cp-pipe-run__pipe-label-block > .cp-pipe-run__node--bottom {
  grid-column: 1;
}

/* Cap aligns with 56px shaft; label text can span wider so names do not stack letter-by-letter. */
.cp-pipe-run__pipe-label-block > .cp-pipe-run__node {
  justify-self: center;
  width: auto;
  min-width: 56px;
  max-width: 140px;
  box-sizing: border-box;
}

.cp-pipe-run__node-spacer {
  grid-column: 2;
  min-width: 0;
  pointer-events: none;
}

.cp-pipe-run__track-slot {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 1fr;
  min-height: min(var(--cp-pipe-track-min-px, 280px), 920px);
  max-height: min(78vh, 920px);
  position: relative;
  align-items: stretch;
}

.cp-pipe-run__track-slot .cp-pipe-run__shaft-outer {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  width: 100%;
  min-height: 0;
}

.cp-pipe-run__track-slot .cp-pipe-run__shaft {
  flex: 1 1 auto;
  align-self: center;
  width: 56px;
  min-height: min(var(--cp-pipe-track-min-px, 280px), 920px);
  max-height: min(78vh, 920px);
  max-width: 100%;
}

.cp-pipe-run__label-inner {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  padding-left: 10px;
}

.cp-pipe-run__fan-wires {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  align-self: stretch;
  justify-self: stretch;
}

.cp-pipe-run__playhead-float {
  grid-column: 1;
  grid-row: 1;
  pointer-events: none;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
  z-index: 2;
}

.cp-pipe-run__playhead-float .cp-pipe-run__playhead {
  left: 50%;
  right: auto;
  width: 52px;
  margin-left: -26px;
  transform: translateY(-50%);
}

.cp-pipe-run__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 140px;
}

.cp-pipe-run__node-cap {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /* Highlight centered on X so spheres line up with the shaft (was 35% 30%, which read as off-center). */
  background: radial-gradient(
    circle at 50% 36%,
    #6d7580 0%,
    #4a525c 38%,
    #2f343c 58%,
    #1a1e24 88%
  );
  border: 2px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cp-pipe-run__node-text {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cp-text);
  text-align: center;
  line-height: 1.25;
  max-width: 140px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.cp-pipe-run__shaft-outer {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 0;
}

.cp-pipe-run__shaft {
  position: relative;
  flex: 1 1 auto;
  width: 56px;
  min-height: 200px;
  cursor: ns-resize;
  border-radius: 10px;
  touch-action: none;
}

.cp-pipe-run__pipe-body {
  position: absolute;
  inset: 0 5px;
  border-radius: 8px;
  background: linear-gradient(90deg, #1e2229 0%, #3a3540 45%, #2a2830 55%, #14161c 100%);
  border: 1px solid rgba(255, 107, 53, 0.35);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
  z-index: 0;
}

.cp-pipe-run__marks-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.cp-pipe-run__mark {
  position: absolute;
  left: 50%;
  width: 48px;
  height: 3px;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 2px;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cp-pipe-run__mark--defect {
  background: linear-gradient(90deg, transparent, #ff3b2f, #ff6b35, transparent);
}

.cp-pipe-run__mark--structure {
  background: linear-gradient(90deg, transparent, #3d9fff, #5cb3ff, transparent);
}

.cp-pipe-run__mark--lat-r::after,
.cp-pipe-run__mark--lat-l::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  transform: translateY(-50%);
}

.cp-pipe-run__mark--lat-r::after {
  right: -10px;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.35);
}

.cp-pipe-run__mark--lat-l::after {
  left: -10px;
  border-width: 5px 9px 5px 0;
  border-color: transparent rgba(255, 255, 255, 0.35) transparent transparent;
}

.cp-pipe-run__mark.is-active {
  height: 5px;
  box-shadow: 0 0 0 2px #fff, 0 0 18px var(--cp-orange);
  z-index: 3;
}

.cp-pipe-run__playhead {
  position: absolute;
  left: -2px;
  right: -2px;
  height: 4px;
  transform: translateY(-50%);
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), var(--cp-orange), rgba(255, 255, 255, 0.95), transparent);
  box-shadow: 0 0 14px rgba(255, 107, 53, 0.85);
  border-radius: 2px;
}

/* Legacy: label column was standalone; observations now live in `.cp-pipe-run__label-inner`. */
.cp-pipe-run__label-col {
  position: relative;
  min-height: 280px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  padding-left: 10px;
}

.cp-pipe-run__label-row {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cp-pipe-run__label-row--fan {
  z-index: 1;
  padding-left: 0;
}

/* Landing dot where diagonal leader meets the row; X position is read at runtime (measurePipeFanWireEnds). */
.cp-pipe-run__wire-dot {
  flex: 0 0 12%;
  max-width: 12%;
  min-width: 0;
  height: 8px;
  position: relative;
  pointer-events: none;
}

.cp-pipe-run__wire-dot::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(40%, -50%);
  background: rgba(255, 140, 90, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.cp-pipe-run__label-row--fan .cp-pipe-run__label-btn {
  flex: 1;
  min-width: 0;
}

.cp-pipe-run__leader {
  flex: 0 0 20px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 107, 53, 0.5), rgba(255, 255, 255, 0.2));
}

.cp-pipe-run__label-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 10px 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
  color: var(--cp-text);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  max-width: 100%;
}

.cp-pipe-run__label-btn--defect {
  border-color: rgba(255, 80, 60, 0.35);
  color: #ffc9be;
}

.cp-pipe-run__label-btn--structure {
  border-color: rgba(80, 160, 255, 0.35);
  color: #c8e4ff;
}

.cp-pipe-run__label-btn.is-active {
  outline: 2px solid var(--cp-orange);
  outline-offset: 1px;
  background: var(--cp-orange-soft);
}

.cp-pipe-run__label-dist {
  font-variant-numeric: tabular-nums;
  opacity: 0.92;
}

.cp-pipe-run__label-code {
  font-weight: 800;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .cp-pipe-run {
    grid-template-columns: minmax(92px, 42%) minmax(200px, 1fr);
    grid-template-rows: auto auto;
  }

  .cp-pipe-run__survey-caption {
    max-width: none;
    padding-bottom: 6px;
  }

  .cp-pipe-run__pipe-label-block {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(96px, 40%) minmax(180px, 1fr);
    grid-template-rows: auto minmax(min(var(--cp-pipe-track-min-px, 220px), 62vh), auto) auto;
  }

  .cp-pipe-run__pipe-label-block > .cp-pipe-run__node--top {
    grid-column: 1 / -1;
  }

  .cp-pipe-run__pipe-label-block > .cp-pipe-run__node--bottom {
    grid-column: 1 / -1;
  }

  .cp-pipe-run__node-spacer {
    display: none;
  }

  .cp-pipe-run__track-slot {
    grid-column: 1 / -1;
    max-height: min(70vh, 720px);
  }

  .cp-pipe-run__fan-wires {
    display: none;
  }

  .cp-pipe-run__label-inner {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-left: 0;
    padding-top: 10px;
    min-height: 120px;
  }

  .cp-pipe-run__label-col {
    grid-column: 1 / -1;
    min-height: 120px;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-left: 0;
    padding-top: 10px;
  }

  .cp-float-panel--pipe .cp-pipe-run__pipe-label-block {
    grid-template-rows: auto minmax(var(--cp-pipe-track-min-px, 140px), 1fr) auto;
  }

  .cp-float-panel--pipe .cp-pipe-run__track-slot {
    max-height: none;
  }
}

.cp-obs-toolbar {
  margin: 10px 0 12px;
}

.cp-obs-table-wrap {
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  overflow: auto;
  max-height: min(48vh, 520px);
  overflow-anchor: none;
}

.cp-obs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.cp-obs-table th,
.cp-obs-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cp-obs-table th {
  background: rgba(0, 0, 0, 0.25);
  color: var(--cp-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.cp-obs-row {
  cursor: pointer;
}

.cp-obs-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.cp-obs-row.is-active {
  background: var(--cp-orange-soft);
  outline: 1px solid rgba(255, 107, 53, 0.28);
}

.cp-table tr.cp-row[draggable='true'] {
  cursor: grab;
}

.cp-table tr.cp-row[draggable='true']:active {
  cursor: grabbing;
}

.cp-table tr.cp-row[data-drop-folder='1'] {
  outline: 1px dashed transparent;
}

.cp-table tr.cp-row[data-drop-folder='1']:hover {
  outline-color: rgba(255, 107, 53, 0.35);
}

.cp-mini-exp {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--cp-border);
}

.cp-mini-exp__h {
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.cp-mini-exp__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow: auto;
  overflow-anchor: none;
}

.cp-mini-exp__empty-hint {
  padding: 16px 10px;
  text-align: center;
  color: var(--cp-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.cp-mini-row {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  color: var(--cp-text);
  font-size: 0.88rem;
  cursor: pointer;
}

.cp-mini-row.is-selected {
  border-color: rgba(255, 107, 53, 0.4);
  background: var(--cp-orange-soft);
}

#cp-wincan-video,
.cp-wincan-video-mount {
  min-height: 200px;
}

/* Inspection / DB3 sync */
.cp-inspection-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid var(--cp-border);
  background: rgba(0, 0, 0, 0.22);
}

.cp-inspection-bar__text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--cp-muted);
  flex: 1 1 220px;
  line-height: 1.45;
}

.cp-inspection-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}

.cp-inspection-bar__sync {
  font-size: 0.8rem;
  padding: 8px 14px;
}

.cp-inspection-bar__meta {
  flex-shrink: 0;
}

.cp-inspection-src {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--cp-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--cp-muted);
}

.cp-inspection-src--db3 {
  border-color: rgba(255, 107, 53, 0.35);
  background: var(--cp-orange-soft);
  color: #ffd7c7;
}

.cp-inspection-src--demo {
  border-color: rgba(255, 216, 77, 0.35);
  background: rgba(255, 216, 77, 0.12);
  color: #fff4c2;
}

.cp-inspection-src--db3-empty,
.cp-inspection-src--empty {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--cp-muted);
}

.cp-jobsite-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 107, 53, 0.28);
  background: rgba(255, 107, 53, 0.08);
}

.cp-jobsite-strip__badge {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ffd7c7;
}

.cp-jobsite-strip__name {
  font-weight: 700;
  color: var(--cp-text);
}

.cp-jobsite-strip__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cp-muted);
}

.cp-jobsite-strip__select {
  min-width: min(100%, 240px);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--cp-border);
  background: rgba(10, 12, 18, 0.92);
  color: var(--cp-text);
}

.cp-pipesync-db3-picker-banner {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(232, 160, 70, 0.35);
  background: rgba(232, 160, 70, 0.1);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--cp-text);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cp-pipesync-db3-picker-banner strong {
  font-weight: 800;
}

.cp-remote-db3-strip {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(64, 196, 255, 0.28);
  background: rgba(64, 196, 255, 0.07);
}

.cp-remote-db3-strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.cp-remote-db3-strip__row--head {
  align-items: baseline;
}

.cp-remote-db3-strip__row--controls {
  align-items: flex-end;
}

.cp-remote-db3-strip__row--tail {
  justify-content: flex-start;
}

.cp-remote-db3-strip__ctl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 200px;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cp-muted);
}

.cp-remote-db3-strip__ctl-label {
  line-height: 1.25;
}

.cp-remote-db3-strip__select {
  width: 100%;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--cp-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--cp-text);
  font-size: 0.84rem;
}

.cp-remote-db3-strip__mini {
  flex-shrink: 0;
  align-self: flex-end;
}

.cp-remote-db3-strip__effective {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--cp-text);
}

.cp-remote-db3-strip__badge {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b8ecff;
}

.cp-remote-db3-strip__path {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--cp-text);
  max-width: min(100%, 220px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-remote-db3-strip__db {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cp-muted);
  flex: 1 1 140px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-remote-db3-strip__link {
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .cp-remote-db3-strip__row--controls {
    flex-direction: column;
    align-items: stretch;
  }
  .cp-remote-db3-strip__mini {
    align-self: flex-start;
  }
}

/* —— Ubuntu-style translucent “window” shells (folder / DB3 pickers) —— */
.cp-glass-window {
  position: relative;
  margin: 0 0 10px;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--cp-border-strong) 40%, transparent);
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--cp-panel) 78%, transparent) 0%,
    color-mix(in srgb, var(--cp-glass-deep) 65%, transparent) 48%,
    color-mix(in srgb, var(--cp-bg-2) 55%, transparent) 100%
  );
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  backdrop-filter: var(--cp-blur, blur(20px)) saturate(1.45);
  -webkit-backdrop-filter: var(--cp-blur, blur(20px)) saturate(1.45);
}

@supports not (background: color-mix(in srgb, red, blue)) {
  .cp-glass-window {
    border: 1px solid var(--cp-border-strong);
    background: linear-gradient(155deg, var(--cp-panel), var(--cp-glass-deep));
  }
}

.cp-glass-window--compact {
  margin-bottom: 8px;
}

.cp-glass-window__titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 9px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cp-muted);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 55%, rgba(0, 0, 0, 0.12) 100%);
  border-bottom: 1px solid var(--cp-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cp-glass-window__traffic {
  width: 44px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 6px;
  opacity: 0.92;
  /* Brand orange trio (decorative only — not macOS controls) */
  background:
    radial-gradient(circle at 6px 50%, var(--cp-orange) 0, var(--cp-orange) 3.5px, transparent 4px),
    radial-gradient(circle at 21px 50%, var(--cp-orange-mid) 0, var(--cp-orange-mid) 3.5px, transparent 4px),
    radial-gradient(circle at 36px 50%, var(--cp-orange) 0, var(--cp-orange) 3.5px, transparent 4px);
}

.cp-glass-window__title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--cp-text);
}

.cp-glass-window__body {
  padding: 10px 12px 12px;
}

.cp-glass-window .cp-explorer-folder-system {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  gap: 8px;
}

.cp-glass-window .cp-remote-db3-strip {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  gap: 8px;
}

.cp-glass-window .cp-jobsite-strip {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  gap: 8px 12px;
}

.cp-glass-window .cp-db3-pick {
  margin: 0;
  padding: 0;
  border: none;
}

/* Native <select> / <option>: fix white unreadable lists (Windows / Chrome) */
.cp-glass-select {
  color-scheme: dark;
  appearance: none !important;
  -webkit-appearance: none !important;
  color: var(--cp-text);
  border: 1px solid var(--cp-border-strong);
  border-radius: 10px;
  padding: 8px 34px 8px 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  background-color: color-mix(in srgb, var(--cp-bg-2) 85%, #000);
  background-repeat: no-repeat, no-repeat;
  background-position: right 10px center, 0 0;
  background-size: 12px 8px, 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c8cad4' d='M1 1.5L6 6l5-4.5'/%3E%3C/svg%3E"),
    linear-gradient(180deg, color-mix(in srgb, var(--cp-surface) 90%, transparent), var(--cp-glass-deep));
}

@supports not (background: color-mix(in srgb, red, blue)) {
  .cp-glass-select {
    background-color: rgba(18, 20, 28, 0.94);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c8cad4' d='M1 1.5L6 6l5-4.5'/%3E%3C/svg%3E"),
      linear-gradient(180deg, rgba(40, 44, 56, 0.92), rgba(16, 18, 26, 0.96));
  }
}

.cp-glass-select:hover {
  border-color: color-mix(in srgb, var(--cp-orange) 45%, var(--cp-border-strong));
}

.cp-glass-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--cp-orange-soft), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border-color: var(--cp-orange);
}

.cp-glass-select option,
.cp-glass-select optgroup {
  background-color: var(--cp-glass-deep, #16161c) !important;
  color: var(--cp-text) !important;
}

.cp-glass-select option:checked,
.cp-glass-select option:hover {
  background-color: color-mix(in srgb, var(--cp-orange) 22%, var(--cp-glass-deep)) !important;
  color: var(--cp-text) !important;
}

.cp-db3-pick {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cp-border);
}

.cp-db3-pick__scope {
  margin: 0;
  font-size: 0.84rem;
  color: var(--cp-muted);
  line-height: 1.45;
}

.cp-db3-pick__scope strong {
  color: var(--cp-text);
}

.cp-db3-pick__label {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--cp-muted);
}

.cp-db3-pick__select {
  min-width: min(100%, 280px);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--cp-border);
  background: rgba(10, 12, 18, 0.92);
  color: var(--cp-text);
}

/* Windows 11–style workspace layout tabs (saved panel sets) */
.cp-ws-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 4px 0;
  margin: 2px 0 0;
  border-bottom: 1px solid var(--cp-border);
  overflow-x: visible;
}

.cp-ws-tab-wrap {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  border-radius: 10px 10px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  margin-bottom: -1px;
  background: transparent;
}

.cp-ws-tab-wrap.is-active {
  border-color: var(--cp-border);
  background: var(--cp-glass);
  backdrop-filter: var(--cp-blur);
  -webkit-backdrop-filter: var(--cp-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.cp-ws-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--cp-muted);
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 8px 14px 10px;
  cursor: pointer;
  border-radius: 10px 0 0 0;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-ws-tab-wrap.is-active .cp-ws-tab {
  color: var(--cp-text);
}

.cp-ws-tab:hover {
  color: var(--cp-text);
}

.cp-ws-tab__close {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--cp-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 8px 4px;
  cursor: pointer;
  border-radius: 0 10px 0 0;
}

.cp-ws-tab__close:hover {
  color: #f66;
}

.cp-ws-tab--new {
  flex-shrink: 0;
  width: 36px;
  min-width: 36px;
  padding: 8px 0 10px;
  margin-left: 2px;
  border-radius: 10px 10px 0 0;
  border: 1px dashed var(--cp-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--cp-text);
  font-weight: 800;
  font-size: 1.1rem;
  cursor: pointer;
}

.cp-ws-tab--new:hover {
  border-style: solid;
  background: rgba(255, 255, 255, 0.06);
}

/* —— Freeform workspace (floating panels) —— */
.cp-main--workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 6px;
}

.cp-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

/* During panel drag/resize, block document touch-scroll so gestures don’t fight the workspace. */
html.cp-ws-panel-gesture,
html.cp-ws-panel-gesture body {
  touch-action: none;
  overscroll-behavior: none;
}

tr.cp-row.cp-explorer-drop-hover {
  outline: 2px solid rgba(232, 93, 44, 0.85);
  outline-offset: -2px;
  background: rgba(232, 93, 44, 0.12);
}

.cp-workspace-canvas {
  position: relative;
  flex: 1;
  min-height: 220px;
  border-radius: var(--cp-radius);
  background: var(--cp-glass);
  backdrop-filter: var(--cp-blur);
  -webkit-backdrop-filter: var(--cp-blur);
  border: 1px solid var(--cp-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.cp-ws-snap-preview {
  position: absolute;
  border-radius: 14px;
  border: 1px solid rgba(255, 165, 110, 0.72);
  background: linear-gradient(180deg, rgba(255, 124, 70, 0.2), rgba(255, 124, 70, 0.08));
  box-shadow: 0 0 0 1px rgba(255, 124, 70, 0.25) inset, 0 0 24px rgba(255, 124, 70, 0.25);
  pointer-events: none;
  z-index: 2000;
}

.cp-ws-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cp-float-panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  min-height: 100px;
  background: var(--cp-panel);
  backdrop-filter: var(--cp-blur);
  -webkit-backdrop-filter: var(--cp-blur);
  border: 1px solid var(--cp-border-strong);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.cp-float-panel.is-locked .cp-float-panel__header {
  cursor: default;
}

.cp-float-panel.is-locked .cp-float-panel__resize-wrap {
  display: none;
}

.cp-float-panel__header {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  padding: 8px 12px;
  background: var(--cp-glass-deep);
  border-bottom: 1px solid var(--cp-border);
  cursor: grab;
  display: flex;
  align-items: center;
  user-select: none;
}

.cp-float-panel__header[data-ws-drag] {
  touch-action: none;
}

.cp-float-panel__header:active {
  cursor: grabbing;
}

.cp-float-panel__title {
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.cp-float-panel__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px;
}

/* Pipe chart: grow to panel height and scale the run — avoid vh-based inner scroll */
.cp-float-panel--pipe .cp-float-panel__body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cp-float-panel--pipe .cp-pipe-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cp-float-panel--pipe .cp-pipe-panel__fit {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: min(100%, 960px);
  margin: 0 auto;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cp-float-panel--pipe .cp-pipe-run {
  flex: 0 1 auto;
  min-height: 0;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: auto;
}

.cp-float-panel--pipe .cp-pipe-run__pipe-label-block {
  grid-template-rows: auto minmax(var(--cp-pipe-track-min-px, 160px), 1fr) auto;
  min-height: 0;
}

.cp-float-panel--pipe .cp-pipe-run__track-slot {
  min-height: 0;
  max-height: none;
  height: 100%;
}

.cp-float-panel--pipe .cp-pipe-run__track-slot .cp-pipe-run__shaft {
  min-height: 0;
  max-height: none;
}

.cp-float-panel--pipe .cp-pipe-run__flow-col {
  min-height: 0;
  align-self: stretch;
}

.cp-float-panel--pipe .cp-pipe-run__flow {
  flex: 1 1 auto;
  min-height: 0;
}

.cp-float-panel--pipe .cp-pipe-run__flow-svg {
  flex: 1 1 auto;
  min-height: 72px;
  height: auto;
  max-height: none;
}

.cp-float-panel--pipe .cp-pipe-run__label-inner {
  min-height: 0;
  overflow: visible;
}

/* Live media: grow video/PDF to panel body — avoid empty gap below preview */
.cp-float-panel--media .cp-float-panel__body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cp-float-panel--media .cp-media-panel-inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cp-float-panel--media .cp-media-panel-inner .cp-video,
.cp-float-panel--media .cp-media-panel-inner .cp-pdf {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cp-float-panel--media .cp-media-panel-inner .cp-video__frame,
.cp-float-panel--media .cp-media-panel-inner .cp-pdf__frame {
  flex: 1 1 auto;
  min-height: 0;
}

.cp-float-panel--media .cp-media-panel-inner .cp-video__el {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  width: 100%;
  object-fit: contain;
}

.cp-float-panel--media .cp-media-panel-inner .cp-pdf__frame {
  height: auto;
  max-height: none;
}

.cp-float-panel__resize-wrap {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.cp-float-panel__resize-grip {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.cp-float-panel:hover .cp-float-panel__resize-grip,
.cp-float-panel__resize-grip:hover,
.cp-float-panel__resize-grip:active {
  opacity: 1;
}

.cp-float-panel__resize-grip--nw {
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.45), transparent 58%);
  border-radius: 10px 0 0 0;
}

.cp-float-panel__resize-grip--ne {
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: nesw-resize;
  background: linear-gradient(225deg, rgba(255, 107, 53, 0.45), transparent 58%);
  border-radius: 0 10px 0 0;
}

.cp-float-panel__resize-grip--sw {
  bottom: 0;
  left: 0;
  width: 16px;
  height: 16px;
  cursor: nesw-resize;
  background: linear-gradient(45deg, rgba(255, 107, 53, 0.45), transparent 58%);
  border-radius: 0 0 0 10px;
}

.cp-float-panel__resize-grip--se {
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 42%,
    rgba(255, 107, 53, 0.4) 42%,
    rgba(255, 107, 53, 0.4) 100%
  );
  border-radius: 0 0 10px 0;
}

.cp-float-panel__resize-grip--n {
  top: 0;
  left: 22%;
  right: 22%;
  height: 10px;
  cursor: ns-resize;
}

.cp-float-panel__resize-grip--s {
  bottom: 0;
  left: 22%;
  right: 22%;
  height: 10px;
  cursor: ns-resize;
}

.cp-float-panel__resize-grip--e {
  top: 28%;
  bottom: 28%;
  right: 0;
  width: 10px;
  cursor: ew-resize;
}

.cp-float-panel__resize-grip--w {
  top: 28%;
  bottom: 28%;
  left: 0;
  width: 10px;
  cursor: ew-resize;
}

@media (hover: none) {
  .cp-float-panel__resize-grip {
    opacity: 0.4;
  }
}

.cp-explorer-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.cp-explorer-folder-system {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 0 2px;
  border-radius: 10px;
  border: 1px solid var(--cp-border);
  background: rgba(255, 255, 255, 0.04);
}

.cp-explorer-folder-system__label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cp-muted);
}

.cp-explorer-folder-system__title {
  flex: 0 0 auto;
  white-space: nowrap;
}

.cp-explorer-folder-system__select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--cp-border);
  background: var(--cp-surface, #1a1d24);
  color: var(--cp-text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.cp-float-panel .cp-explorer-panel-inner .cp-table-wrap[data-explorer-list] {
  max-height: none;
  flex: 1 1 auto;
  min-height: 140px;
}

.cp-pacp-panel .cp-db3-pick {
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.cp-obs-table-wrap--panel {
  max-height: none;
  flex: 1 1 auto;
  min-height: 120px;
}

.cp-pipe-panel__fit {
  display: block;
  min-width: 0;
}

.cp-pipe-panel__hint {
  margin: 0;
  padding: 12px 4px;
}

.cp-media-panel-inner {
  min-height: 200px;
}

.cp-media-panel-inner .cp-video__el {
  max-height: none;
}

.cp-media-panel-inner .cp-pdf__frame {
  height: min(50vh, 480px);
}

.cp-sync-panel {
  display: grid;
  gap: 10px;
  min-height: 100%;
  grid-template-rows: auto 68px 1fr;
}

.cp-sync-panel__status {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.8rem;
}

.cp-sync-panel__status.is-connected {
  border-color: rgba(61, 184, 111, 0.42);
}

.cp-sync-panel__status.is-disconnected {
  border-color: rgba(255, 128, 128, 0.42);
}

.cp-sync-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff6b53;
  box-shadow: 0 0 10px rgba(255, 107, 83, 0.7);
}

.cp-sync-panel__status.is-connected .cp-sync-status-dot {
  background: #46cf87;
  box-shadow: 0 0 10px rgba(70, 207, 135, 0.7);
}

.cp-sync-panel__err {
  color: #ffb8a7;
  margin-left: auto;
  font-weight: 700;
}

.cp-sync-graph {
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.24);
}

.cp-sync-graph__plot {
  height: 100%;
  display: block;
  position: relative;
}

.cp-sync-graph__svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cp-sync-graph__line {
  fill: none;
  stroke: rgba(255, 138, 74, 0.96);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 128, 61, 0.45));
}

.cp-sync-graph__empty {
  width: 100%;
  text-align: center;
  align-self: center;
  color: var(--cp-muted);
  font-weight: 800;
  letter-spacing: 0.03em;
}

.cp-sync-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) 1fr;
  gap: 10px;
  min-height: 0;
}

.cp-sync-tree,
.cp-sync-log {
  min-height: 0;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: rgba(7, 10, 16, 0.72);
  display: flex;
  flex-direction: column;
}

.cp-sync-tree__head {
  padding: 8px 10px;
  border-bottom: 1px solid var(--cp-border);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--cp-orange-mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cp-sync-tree__list,
.cp-sync-log__list {
  overflow: auto;
  min-height: 0;
  padding: 6px;
}

.cp-sync-tree__row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 7px 8px;
  background: transparent;
  color: var(--cp-text);
  cursor: pointer;
  text-align: left;
}

.cp-sync-tree__row:hover,
.cp-sync-tree__row.is-active {
  background: rgba(255, 143, 82, 0.12);
  border-color: rgba(255, 143, 82, 0.45);
}

.cp-sync-tree__meta {
  font-size: 0.72rem;
  color: var(--cp-muted);
}

.cp-sync-log__row {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 0.74rem;
  line-height: 1.42;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  padding: 5px 2px;
  color: #eef3ff;
}

.cp-sync-tree__empty {
  color: var(--cp-muted);
  padding: 10px;
  font-size: 0.8rem;
}

/* Panels modal */
.cp-modal-root {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
}

/* Root disables hit-testing so only backdrop + dialog layer capture events; without this, `.cp-modal`
   (non-`--ws`) inherits pointer-events:none and all clicks pass through — buttons feel dead. */
.cp-modal-root > .cp-modal {
  pointer-events: auto;
}

.cp-modal-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  pointer-events: auto;
}

.cp-modal--ws {
  position: relative;
  pointer-events: auto;
  width: min(440px, 100%);
  max-height: min(88vh, 640px);
  overflow: auto;
  padding: 22px 24px;
  border-radius: var(--cp-radius);
  background: var(--cp-glass-deep);
  backdrop-filter: var(--cp-blur);
  -webkit-backdrop-filter: var(--cp-blur);
  border: 1px solid var(--cp-border-strong);
  box-shadow: var(--cp-shadow);
}

.cp-modal__title {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 900;
}

.cp-modal__lede {
  margin: 0 0 16px;
  font-size: 0.88rem;
  color: var(--cp-muted);
  line-height: 1.45;
}

.cp-ws-modal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.cp-ws-modal-section {
  margin: 0 0 20px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cp-ws-modal-section__title {
  margin: 0 0 8px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--cp-muted);
}

.cp-ws-modal-section__lede {
  margin: 0 0 12px;
  font-size: 0.8rem;
  color: var(--cp-muted);
  line-height: 1.45;
}

.cp-ws-modal-row--indented {
  padding-left: 14px;
}

.cp-ws-modal-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.35;
}

.cp-ws-modal-row input {
  margin-top: 3px;
  accent-color: var(--cp-orange);
}

.cp-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cp-remote-db3-picker-modal {
  width: min(720px, 96vw);
  max-height: min(88vh, 680px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 18px;
}

.cp-remote-db3-picker-modal__header {
  margin: 0 0 2px;
  padding: 0 2px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cp-remote-db3-picker-modal .cp-modal__title {
  margin-bottom: 6px;
  color: var(--cp-orange);
}

.cp-remote-db3-picker-modal .cp-modal__lede {
  margin: 0;
  font-size: 0.84rem;
}

.cp-remote-db3-picker-modal .cp-db3-pick__label {
  gap: 7px;
  padding: 0 2px;
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cp-remote-db3-picker__filter {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--cp-border);
  background: rgba(10, 12, 18, 0.9);
  color: var(--cp-text);
  font-size: 0.88rem;
  font-weight: 600;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.cp-remote-db3-picker__filter::placeholder {
  color: var(--cp-muted);
}

.cp-remote-db3-picker__filter:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.cp-remote-db3-picker__filter:focus-visible {
  outline: none;
  border-color: var(--cp-orange);
  box-shadow: 0 0 0 3px var(--cp-orange-soft);
}

.cp-remote-db3-picker__list-wrap {
  flex: 1 1 auto;
  min-height: 180px;
  max-height: min(48vh, 420px);
  overflow: hidden;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: rgba(8, 11, 18, 0.55);
}

.cp-remote-db3-picker__list {
  max-height: min(48vh, 420px);
  overflow: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cp-remote-db3-picker__row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-radius: 12px;
  border: 1px solid var(--cp-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--cp-text);
  padding: 11px 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.cp-remote-db3-picker__row:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.cp-remote-db3-picker__row:focus-visible {
  outline: none;
  border-color: var(--cp-orange);
  box-shadow: 0 0 0 3px var(--cp-orange-soft);
}

.cp-remote-db3-picker__row.is-selected {
  border-color: rgba(255, 107, 53, 0.52);
  background: var(--cp-orange-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 107, 53, 0.3);
}

.cp-remote-db3-picker__name-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.cp-remote-db3-picker__name {
  min-width: 0;
  max-width: 100%;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--cp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-remote-db3-picker__meta {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 210, 190, 0.9);
}

.cp-remote-db3-picker__path {
  max-width: 100%;
  font-size: 0.78rem;
  color: var(--cp-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-remote-db3-picker__empty {
  margin: 0;
  padding: 26px 12px;
  text-align: center;
  color: var(--cp-muted);
  font-size: 0.86rem;
  line-height: 1.45;
  border-radius: 10px;
  border: 1px dashed var(--cp-border);
  background: rgba(255, 255, 255, 0.02);
}

.cp-remote-db3-picker-modal .cp-modal__actions {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cp-remote-db3-picker-modal .cp-modal__actions .cp-tb-btn {
  min-width: 132px;
  min-height: 38px;
}

.cp-remote-db3-picker-modal .cp-modal__actions .cp-tb-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cp-orange-soft);
}

.cp-remote-db3-picker-modal .cp-modal__actions .cp-tb-btn:disabled {
  opacity: 0.45;
  border-color: var(--cp-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--cp-muted);
}

@media (max-width: 640px) {
  .cp-remote-db3-picker-modal {
    padding: 16px 14px 14px;
    gap: 10px;
  }

  .cp-remote-db3-picker-modal .cp-modal__actions {
    justify-content: stretch;
  }

  .cp-remote-db3-picker-modal .cp-modal__actions .cp-tb-btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

.cp-modal--hub {
  width: min(480px, 100%);
}

.cp-upload-spot-modal {
  width: min(520px, 100%);
}

.cp-upload-spot-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

/* Data & sharing modal: groups hub sections for clearer vertical rhythm. */
.cp-hub-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cp-hub-stack .cp-hub-section {
  margin-bottom: 0;
}

.cp-hub-section {
  margin-bottom: 20px;
}

.cp-hub-section__title {
  margin: 0 0 10px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 800;
  color: var(--cp-muted);
}

.cp-hub-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cp-hub-action {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--cp-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--cp-text);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  line-height: 1.3;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cp-hub-action:hover:not(:disabled) {
  border-color: rgba(255, 107, 53, 0.4);
  background: var(--cp-orange-soft);
}

.cp-hub-action:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.cp-hub-meta {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cp-muted);
  background: rgba(0, 0, 0, 0.22);
  line-height: 1.4;
}

.cp-layout-modal-lock {
  margin: 4px 0 18px;
  padding-top: 14px;
  border-top: 1px solid var(--cp-border);
}

.cp-layout-modal-lock__hint {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cp-muted);
}

/* Folder permissions modal (Ubuntu glass, wide tree) */
.cp-perm-modal-root {
  z-index: 1650;
}

.cp-perm-modal {
  position: relative;
  pointer-events: auto;
  width: min(720px, 100%);
  max-height: min(88vh, 720px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  border-radius: var(--cp-radius);
  background: var(--cp-glass-deep);
  backdrop-filter: var(--cp-blur);
  -webkit-backdrop-filter: var(--cp-blur);
  border: 1px solid var(--cp-border-strong);
  box-shadow: var(--cp-shadow);
}

.cp-perm-modal__title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 900;
}

.cp-perm-modal__lede {
  margin: 0 0 14px;
  font-size: 0.86rem;
  color: var(--cp-muted);
  line-height: 1.45;
}

.cp-perm-modal__das-row,
.cp-perm-modal__das-hide-wrap {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--cp-muted);
}

.cp-perm-modal__das-hide-hint {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cp-muted);
}

.cp-perm-modal__das-hide-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.cp-perm-modal__das-hide-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cp-text);
}

.cp-perm-modal__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 20px;
  margin-bottom: 12px;
}

.cp-perm-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cp-muted);
}

/* User picker: PSR login-style typeahead (input + floating suggestions on body) */
.cp-perm-user-combo {
  position: relative;
  z-index: 2;
  min-width: 220px;
}

.cp-perm-user-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--cp-border-strong);
  background: rgba(18, 20, 28, 0.85);
  color: var(--cp-text);
  font-size: 0.88rem;
  font-weight: 700;
}

.cp-perm-user-input::placeholder {
  color: var(--cp-muted);
  font-weight: 600;
}

.cp-perm-user-input:focus {
  outline: 2px solid var(--cp-orange);
  outline-offset: 2px;
  border-color: rgba(255, 107, 53, 0.4);
}

.cp-perm-user-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cp-perm-user-hint {
  margin: 6px 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cp-muted);
  line-height: 1.35;
  max-width: 28rem;
}

.cp-perm-user-suggest {
  position: fixed;
  z-index: 20020;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(240px, 42vh);
  overflow: auto;
  padding: 8px;
  border-radius: var(--cp-radius);
  border: 1px solid var(--cp-border-strong);
  background: rgba(16, 16, 20, 0.96);
  backdrop-filter: var(--cp-blur);
  -webkit-backdrop-filter: var(--cp-blur);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 107, 53, 0.12);
}

.cp-perm-user-suggest.hidden {
  display: none !important;
}

.cp-perm-suggest-empty {
  padding: 12px 10px;
  font-size: 0.84rem;
  color: var(--cp-muted);
  text-align: center;
}

.cp-perm-suggest {
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.86rem;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: var(--cp-text);
  text-align: left;
  width: 100%;
}

.cp-perm-suggest span:last-child {
  color: var(--cp-muted);
  font-weight: 600;
}

.cp-perm-suggest:hover,
.cp-perm-suggest:focus-visible,
.cp-perm-suggest.is-highlight {
  border-color: rgba(232, 93, 44, 0.35);
  background: var(--cp-orange-soft);
  color: #ffd7c7;
  outline: none;
}

.cp-perm-suggest.is-highlight span:last-child,
.cp-perm-suggest:hover span:last-child,
.cp-perm-suggest:focus-visible span:last-child {
  color: rgba(255, 230, 220, 0.75);
}

.cp-perm-suggest.is-selected:not(.is-highlight) {
  border-color: rgba(255, 107, 53, 0.28);
  background: rgba(255, 107, 53, 0.08);
}

.cp-perm-modal__full {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.86rem;
  line-height: 1.35;
  user-select: none;
}

.cp-perm-modal__tree-wrap {
  flex: 1;
  min-height: 200px;
  max-height: min(48vh, 420px);
  overflow: auto;
  padding: 10px 12px;
  border-radius: var(--cp-radius);
  border: 1px solid var(--cp-border);
  background: rgba(0, 0, 0, 0.28);
}

.cp-perm-modal__loading {
  font-size: 0.9rem;
  color: var(--cp-muted);
  padding: 8px 0;
}

.cp-perm-modal__err {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: #f88;
}

.cp-perm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--cp-border);
}

.cp-add-person-modal-root {
  z-index: 1660;
}

.cp-add-person-modal {
  width: min(560px, 100%);
  max-height: min(86vh, 640px);
}

.cp-add-person-list {
  margin-top: 8px;
  max-height: min(44vh, 360px);
  overflow: auto;
  border: 1px solid var(--cp-border);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.24);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cp-add-person-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 10px;
  border: 1px solid var(--cp-border);
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
}

.cp-add-person-user {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-add-person-user__name {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--cp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-add-person-user__username {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--cp-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-add-person-row-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.cp-add-person-row-perm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cp-muted);
  padding: 2px 0;
}

.cp-add-person-row-perm input[type='checkbox'] {
  width: 13px;
  height: 13px;
  accent-color: var(--cp-orange);
}

.cp-add-person-switch {
  width: 54px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--cp-border);
  background: rgba(255, 255, 255, 0.08);
  position: relative;
  padding: 2px;
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease;
}

.cp-add-person-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform 120ms ease;
}

.cp-add-person-switch.is-on {
  border-color: rgba(255, 140, 90, 0.92);
  background: linear-gradient(135deg, var(--cp-orange), #ff9054);
  box-shadow: 0 0 0 1px rgba(255, 153, 116, 0.36), 0 0 18px rgba(255, 107, 53, 0.42);
}

.cp-add-person-switch.is-on .cp-add-person-switch__thumb {
  transform: translateX(24px);
  background: #fff3eb;
}

.cp-add-person-switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cp-orange-soft);
}

.cp-add-person-empty {
  margin: 0;
  padding: 16px 10px;
  text-align: center;
  font-size: 0.84rem;
  color: var(--cp-muted);
}

.cp-add-person-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.cp-add-person-perm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--cp-border);
  background: rgba(0, 0, 0, 0.16);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--cp-muted);
}

.cp-perm-tree__list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 0;
}

.cp-perm-tree__list--root {
  padding-left: 0;
}

.cp-perm-tree__list--collapsed {
  display: none;
}

.cp-perm-tree__item {
  margin: 0;
  padding: 0;
}

.cp-perm-tree__row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  font-size: 0.86rem;
}

.cp-perm-tree__twisty {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
}

.cp-perm-tree__twisty:disabled {
  opacity: 0.25;
  cursor: default;
}

.cp-perm-tree__twisty:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}

.cp-perm-tree__spacer {
  flex: 0 0 28px;
  width: 28px;
}

.cp-perm-tree__label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.cp-perm-tree__label--switches {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.cp-perm-tree__cb {
  flex-shrink: 0;
  accent-color: var(--cp-orange);
}

.cp-perm-tree__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-perm-tree__kind {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cp-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cp-perm-switch {
  display: inline-flex;
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.cp-perm-switch__btn {
  border: none;
  border-right: 1px solid var(--cp-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--cp-muted);
  padding: 5px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.cp-perm-switch__btn:last-child {
  border-right: none;
}

.cp-perm-switch__btn.is-on {
  background: linear-gradient(135deg, var(--cp-orange), #ff9054);
  color: #1a130e;
}

.cp-perm-switch__btn:hover:not(.is-on):not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}

.cp-perm-switch__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cp-perm-tree__list .cp-perm-tree__list {
  padding-left: 18px;
}

.cp-perm-tree__empty {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  font-size: 0.88rem;
  color: var(--cp-muted);
}

/* Share modal (Unity-inspired glass) */
.cp-share-modal-root .cp-share-modal {
  max-width: min(560px, 96vw);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--cp-border-strong);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.cp-share-modal__glass {
  padding: 22px 22px 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(20, 20, 24, 0.92) 100%);
}

.cp-share-modal__title {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--cp-orange);
}

.cp-share-modal__lede {
  margin: 0 0 14px;
  font-size: 0.86rem;
  color: var(--cp-muted);
  line-height: 1.45;
}

.cp-share-modal__tree-wrap {
  max-height: min(52vh, 420px);
  overflow: auto;
  padding: 10px 12px;
  border-radius: var(--cp-radius);
  border: 1px solid var(--cp-border);
  background: rgba(0, 0, 0, 0.25);
  margin-bottom: 14px;
}

.cp-share-tree__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cp-share-tree__list--root > .cp-share-tree__item {
  margin-bottom: 4px;
}

.cp-share-tree__row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-height: 28px;
}

.cp-share-tree__twisty {
  flex-shrink: 0;
  width: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--cp-muted);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.2;
}

.cp-share-tree__label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  font-size: 0.86rem;
}

.cp-share-tree__kind {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--cp-muted);
  text-transform: uppercase;
}

.cp-share-tree__list--collapsed {
  display: none;
}

.cp-share-modal__pick {
  margin: 0 0 12px;
  font-size: 0.9rem;
  font-weight: 600;
}

.cp-share-modal__pick-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.cp-share-pick {
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--cp-radius);
  border: 1px solid var(--cp-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--cp-fg);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cp-share-pick:hover {
  border-color: var(--cp-orange-mid);
  background: rgba(233, 84, 32, 0.08);
}

.cp-share-pick--signin {
  border-color: rgba(120, 160, 255, 0.35);
}

.cp-share-pick--signin:hover {
  border-color: rgba(120, 160, 255, 0.55);
  background: rgba(80, 120, 255, 0.08);
}

.cp-share-pick__title {
  display: block;
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.cp-share-pick__sub {
  display: block;
  font-size: 0.8rem;
  color: var(--cp-muted);
  line-height: 1.4;
}

.cp-share-modal__url-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--cp-muted);
}

.cp-share-modal__url {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: var(--cp-radius);
  border: 1px solid var(--cp-border);
  background: rgba(0, 0, 0, 0.35);
  color: var(--cp-fg);
  font-size: 0.82rem;
  margin-bottom: 10px;
  resize: vertical;
}

.cp-share-modal__hint {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: var(--cp-muted);
}

/* ~60% viewport; flex column so the table scrolls inside the panel */
.cp-modal.cp-share-access-modal {
  /* Prefer ~60% of the viewport; floor width slightly on very narrow screens */
  width: min(96vw, max(60vw, 280px));
  height: min(92dvh, max(60vh, 240px));
  max-height: min(92dvh, max(60vh, 240px));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 0;
  padding: 18px 20px 16px;
}

.cp-share-access-modal__header {
  flex: 0 0 auto;
  min-width: 0;
}

.cp-share-access-modal__body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  margin: 8px 0 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.cp-share-access-modal__loading,
.cp-share-access-modal__empty,
.cp-share-access-modal__err {
  margin: 0;
  font-size: 0.88rem;
  color: var(--cp-muted);
  line-height: 1.5;
}

.cp-share-access-modal__err {
  color: #ffb4b4;
}

.cp-share-access-modal__actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--cp-border);
}

.cp-share-access-table-wrap {
  min-width: 0;
  max-width: 100%;
}

.cp-share-access-modal__title {
  margin: 0 0 6px;
  font-size: 1.12rem;
  font-weight: 900;
  color: var(--cp-orange, #e95d20);
}

.cp-share-access-modal__lede {
  margin: 0;
  font-size: 0.84rem;
  color: var(--cp-muted);
  line-height: 1.45;
}

.cp-share-access-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  table-layout: auto;
}

.cp-share-access-table th,
.cp-share-access-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--cp-border);
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  min-width: 0;
  max-width: min(40vw, 360px);
}

.cp-share-access-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cp-muted);
}

.cp-modal.cp-account-settings-modal {
  width: min(560px, 96vw);
  max-height: min(90vh, 860px);
  display: flex;
  flex-direction: column;
}

.cp-account-settings-modal__header {
  padding: 20px 22px 0;
}

.cp-account-settings-modal__body {
  padding: 16px 22px 22px;
  overflow: auto;
}

.cp-account-settings-modal__title {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.cp-account-settings-modal__lede {
  margin: 0;
  color: var(--cp-muted);
  font-size: 0.92rem;
}

.cp-account-settings-modal__loading,
.cp-account-settings-modal__err {
  margin: 0;
  color: var(--cp-muted);
}

.cp-account-settings-modal__err {
  color: #ffb4c0;
}

.cp-account-settings-section + .cp-account-settings-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--cp-border, #2a2a32);
}

.cp-account-settings-section__title {
  margin: 0 0 10px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cp-muted);
}

.cp-account-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cp-account-settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.cp-account-settings-field__label {
  font-size: 0.82rem;
  color: var(--cp-muted);
}

.cp-account-settings-field__input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid var(--cp-border, #2a2a32);
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  padding: 9px 11px;
}

.cp-account-settings-field__hint {
  font-size: 0.78rem;
  color: var(--cp-muted);
}

.cp-account-settings-form__status {
  margin: 8px 0 0;
  font-size: 0.88rem;
}

.cp-account-settings-form__status--ok {
  color: #8fdcb0;
}

.cp-account-settings-form__status--err {
  color: #ffb4c0;
}

.cp-account-settings-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

@media (max-width: 560px) {
  .cp-account-settings-grid {
    grid-template-columns: 1fr;
  }
}

/* Guest share page */
.cp-guest-entry {
  min-height: 100vh;
  margin: 0;
  background: var(--cp-bg, #0e0e12);
  color: var(--cp-fg, #f2f2f5);
}

#guest-root {
  max-width: min(1120px, 96vw);
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.cp-guest-wrap {
  padding: 20px;
  border-radius: var(--cp-radius, 12px);
  border: 1px solid var(--cp-border, #2a2a32);
  background: var(--cp-glass, rgba(24, 24, 28, 0.85));
}

.cp-guest-landing {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px;
}

.cp-guest-landing__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 6px;
}

.cp-guest-viewer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.cp-guest-viewer__layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 14px;
  margin-top: 12px;
}

.cp-guest-viewer__list {
  max-height: 68vh;
  overflow: auto;
  border: 1px solid var(--cp-border, #2a2a32);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  padding: 8px;
}

.cp-guest-viewer__file {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  padding: 9px 10px;
  cursor: pointer;
  margin-bottom: 6px;
  font-size: 0.84rem;
}

.cp-guest-viewer__file[data-active='1'] {
  border-color: rgba(233, 84, 32, 0.5);
  background: rgba(233, 84, 32, 0.14);
}

.cp-guest-viewer__frame-wrap {
  min-height: 68vh;
  border: 1px solid var(--cp-border, #2a2a32);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  overflow: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px;
}

.cp-guest-plan-stage {
  position: relative;
  width: min(100%, calc(68vh * (var(--cp-guest-page-w, 1) / var(--cp-guest-page-h, 1))));
  max-width: 100%;
  aspect-ratio: var(--cp-guest-page-w, 1) / var(--cp-guest-page-h, 1);
  --cp-guest-page-w: 1;
  --cp-guest-page-h: 1;
}

.cp-guest-plan-overlay-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.cp-guest-plan-overlay {
  display: block;
  width: 100%;
  height: 100%;
}

.cp-guest-viewer__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cp-guest-title {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--cp-orange, #e95420);
}

.cp-guest-meta,
.cp-guest-count {
  font-size: 0.85rem;
  color: var(--cp-muted, #9a9aa3);
  margin: 0 0 12px;
}

.cp-guest-form label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.86rem;
}

.cp-guest-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--cp-border, #2a2a32);
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
}

.cp-guest-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.cp-guest-table th,
.cp-guest-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--cp-border, #2a2a32);
}

.cp-guest-actions a {
  color: var(--cp-orange, #e95420);
  margin-right: 12px;
  font-weight: 600;
}

.cp-guest-err {
  color: #f88;
  margin-top: 10px;
}

.cp-guest-hint {
  font-size: 0.82rem;
  color: var(--cp-muted, #9a9aa3);
  margin-top: 12px;
}

.cp-guest-hint--tight {
  margin-top: 8px;
  font-size: 0.78rem;
}

.cp-guest-signin-banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(232, 93, 44, 0.12);
  border: 1px solid rgba(232, 93, 44, 0.28);
  color: var(--cp-fg, #f2f2f5);
  font-size: 0.88rem;
  line-height: 1.45;
}

.cp-guest-signin-actions {
  margin-top: 6px;
}

.cp-guest-link-btn {
  border: none;
  background: none;
  color: var(--cp-orange, #e95420);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.cp-guest-link-btn:hover {
  filter: brightness(1.08);
}

.cp-guest-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  background: rgba(120, 160, 255, 0.15);
  border: 1px solid rgba(120, 160, 255, 0.35);
  color: #aac4ff;
  vertical-align: middle;
}

.cp-guest-bc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--cp-radius, 12px);
  border: 1px solid var(--cp-border, #2a2a32);
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.82rem;
}

.cp-guest-bc__btn {
  border: none;
  background: transparent;
  color: var(--cp-orange, #e95420);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}

.cp-guest-bc__btn:hover {
  background: rgba(233, 84, 32, 0.12);
}

.cp-guest-bc__sep {
  color: var(--cp-muted, #9a9aa3);
  user-select: none;
}

.cp-guest-explorer-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--cp-radius, 12px);
  border: 1px solid var(--cp-border, #2a2a32);
}

.cp-guest-explorer-table {
  margin: 0;
}

.cp-guest-row--folder {
  cursor: pointer;
}

.cp-guest-row--folder:hover {
  background: rgba(255, 255, 255, 0.04);
}

.cp-guest-name {
  font-weight: 600;
}

.cp-guest-muted {
  font-size: 0.8rem;
  color: var(--cp-muted, #9a9aa3);
}

.cp-guest-empty-cell {
  text-align: center;
  padding: 20px 12px;
  color: var(--cp-muted, #9a9aa3);
}

@media (max-width: 900px) {
  .cp-guest-viewer__layout {
    grid-template-columns: 1fr;
  }
  .cp-guest-viewer__list {
    max-height: 220px;
  }
}

.hp-simple-grant-modal {
  width: min(720px, calc(100vw - 24px));
  max-height: min(88vh, 820px);
}

.hp-simple-grant-search {
  margin-bottom: 12px;
}

.hp-simple-grant-status {
  margin: 0 0 10px;
  font-size: 0.86rem;
}

.hp-simple-grant-rows {
  display: grid;
  gap: 10px;
  flex: 1;
  min-height: 0;
  max-height: min(52vh, 520px);
  overflow: auto;
  padding-right: 4px;
}

.hp-simple-grant-row {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
}

.hp-simple-grant-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.hp-simple-grant-row__name {
  font-weight: 700;
}

.hp-simple-grant-row__username {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 2px;
}

.hp-simple-grant-row__checks,
.hp-simple-grant-perm {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 0.88rem;
}

.hp-simple-grant-empty {
  margin: 0;
  padding: 8px 2px;
}

.hp-simple-grant-add-user {
  margin-bottom: 12px;
}

.hp-admin-module-modal .hp-admin-module-create {
  margin: 0 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
}

.hp-admin-module-create__summary {
  cursor: pointer;
  font-weight: 600;
}

.hp-admin-module-create__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.hp-admin-module-create__grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.88rem;
}

.hp-admin-module-pending {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 180, 80, 0.25);
  background: rgba(255, 180, 80, 0.06);
}

.hp-admin-module-pending__title {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.hp-admin-module-pending__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
}

.hp-admin-module-pending__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hp-admin-module-row__tag {
  margin-left: 8px;
  font-size: 0.78rem;
}

/* PipeShare portal toasts (user access actions). */
.hp-portal-toast-wrap {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2600;
  display: grid;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.hp-portal-toast {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
  color: #eef4ff;
  background: rgba(18, 20, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.hp-portal-toast--error {
  border-color: rgba(255, 120, 120, 0.45);
  color: #ffc8c8;
}

.hp-portal-toast--success {
  border-color: rgba(120, 255, 160, 0.35);
  color: #c8ffd8;
}

/* ===== Horizon unified pill button system (toolbar) ===== */
.cp-tb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hp-btn-dot-gap);
  border-radius: 999px !important;
  border: 1px solid var(--hp-btn-pill-border) !important;
  background: var(--hp-btn-pill-bg) !important;
  color: var(--cp-text) !important;
  font-weight: 900 !important;
  text-decoration: none;
  box-shadow: var(--hp-btn-pill-glow-soft) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.cp-tb-btn::before {
  content: "";
  flex-shrink: 0;
  width: var(--hp-btn-dot-size);
  height: var(--hp-btn-dot-size);
  border-radius: 999px;
  background: var(--hp-btn-accent, var(--cp-orange));
  opacity: 0;
  box-shadow: 0 0 8px color-mix(in srgb, var(--hp-btn-accent, var(--cp-orange)) 42%, transparent);
  transition: opacity 0.18s ease;
}

.cp-tb-btn:not(.is-active):not(.cp-tb-btn--primary):not(.cp-tb-btn--accent) {
  color: var(--cp-muted) !important;
  font-weight: 800 !important;
}

.cp-tb-btn:hover:not(:disabled) {
  background: var(--hp-btn-pill-bg-hover) !important;
  border-color: var(--hp-btn-pill-border-strong) !important;
  transform: translateY(-1px);
}

.cp-tb-btn:hover:not(:disabled)::before,
.cp-tb-btn:focus-visible:not(:disabled)::before {
  opacity: 0.55;
}

.cp-tb-btn.is-active,
.cp-tb-btn--primary,
.cp-tb-btn--accent {
  color: #fff !important;
  font-weight: 900 !important;
  border-color: var(--hp-btn-pill-border-strong) !important;
  background: var(--hp-btn-pill-bg) !important;
  box-shadow: var(--hp-btn-pill-glow) !important;
  text-decoration: underline;
  text-decoration-color: var(--hp-btn-accent, var(--cp-orange));
  text-decoration-thickness: var(--hp-btn-underline-thickness);
  text-underline-offset: var(--hp-btn-underline-offset);
}

.cp-tb-btn.is-active::before,
.cp-tb-btn--primary::before,
.cp-tb-btn--accent::before {
  opacity: 1;
}