/* Sickos Clipz — charcoal / slate / scarlet */
:root {
  --bg: #121212;
  --bg-raised: #18181b;
  --panel: #1e1e24;
  --panel-2: #27272a;
  --line: rgba(237, 237, 237, .10);
  --line-strong: rgba(237, 237, 237, .18);
  --text: #ededed;
  --muted: #a1a1aa;
  --muted-2: #71717a;
  --acid: #e50914;
  --orange: #e50914;
  --green: #68d9aa;
  --red: #ff5a6d;
  --cream: #ededed;
  --ink: #121212;
  --ruby: #e50914;
  --ruby-bright: #ff2400;
  --ruby-deep: #98000d;
  --ice: #a1a1aa;
}

html { background: var(--bg); }

body {
  background:
    radial-gradient(circle at 86% -18%, rgba(229, 9, 20, .10), transparent 30rem),
    var(--bg) !important;
}

body::before {
  opacity: .16;
  background: repeating-linear-gradient(90deg, transparent 0 95px, rgba(208, 221, 234, .018) 96px);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color: var(--ice) !important;
}

::selection { color: #fff; background: var(--ruby); }
::-webkit-scrollbar-track { background: #090b0f; }
::-webkit-scrollbar-thumb { background: #2c333d; border-color: #090b0f; }
::-webkit-scrollbar-thumb:hover { background: #3c4653; }

.topbar {
  grid-template-columns: auto auto minmax(280px, 1fr) auto auto auto;
  border-bottom-color: rgba(235, 241, 247, .08) !important;
  background: rgba(8, 9, 12, .9) !important;
  box-shadow: 0 14px 42px rgba(0, 0, 0, .3);
}

.brand { min-width: 48px; gap: 0; }
.brandLogo { border: 0 !important; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
.brandLogo img { object-fit: contain !important; }

.topnav { background: #0e1116 !important; }
.topnav button:hover { background: rgba(255, 255, 255, .045) !important; }
.topnav button.active {
  color: #fff !important;
  background: var(--ruby) !important;
  box-shadow: 0 6px 22px rgba(226, 29, 63, .22);
}

.searchWrap {
  gap: 9px;
  border-color: rgba(235, 241, 247, .11) !important;
  background: rgba(17, 20, 26, .94) !important;
}
.searchWrap:focus-within {
  border-color: rgba(158, 215, 255, .52) !important;
  background: #131821 !important;
  box-shadow: 0 0 0 4px rgba(158, 215, 255, .07);
}
.searchWordmark {
  display: block;
  width: 132px;
  height: 34px;
  flex: 0 0 132px;
  object-fit: cover;
  object-position: center;
}
.searchDivider {
  width: 1px;
  height: 22px;
  flex: 0 0 1px;
  background: var(--line);
}
.searchWrap input::placeholder { color: #717d8a !important; }
.searchWrap kbd { color: #74808e; background: #0a0d11; }

.quietIcon,
.syncPill { background: #10141a !important; }
.quietIcon:hover,
.syncPill:hover { background: #171c24 !important; }
.syncDot { background: var(--ruby-bright) !important; box-shadow: 0 0 0 4px rgba(255, 51, 79, .1); }

.eyebrow { color: var(--ice) !important; }
.eyebrow::before { background: var(--ruby) !important; }
.button.primary {
  color: #fff !important;
  background: var(--ruby) !important;
  box-shadow: 0 8px 24px rgba(226, 29, 63, .17) !important;
}
.button.primary:hover:not(:disabled) { background: var(--ruby-bright) !important; }
.button:not(.primary),
.squareButton,
.rowButton { background: #171b23 !important; }
.textBack { color: var(--ice) !important; }

.sidebar {
  border-right-color: rgba(235, 241, 247, .08) !important;
  background: rgba(12, 15, 20, .94) !important;
}
.sideHeading { color: var(--text) !important; }
.sideSectionLabel { color: #687482 !important; }
.libraryRoot:hover,
.monthOpen:hover,
.shootTreeButton:hover { background: rgba(255, 255, 255, .035) !important; }
.libraryRoot.active,
.monthOpen.active,
.shootTreeButton.active {
  border-color: rgba(226, 29, 63, .2) !important;
  color: #fff !important;
  background: rgba(226, 29, 63, .10) !important;
}
.rootIcon { color: var(--ruby-bright) !important; background: rgba(226, 29, 63, .10) !important; }

.pageHeaderCopy h1,
.episodeHeader h1 {
  font-size: clamp(38px, 5vw, 64px) !important;
  letter-spacing: -.065em !important;
}
.pageHeaderCopy p,
.episodeHeader p { color: var(--muted) !important; }
.episodeHeader > div > p:empty { display: none; }
.addModeBanner { border-color: rgba(158, 215, 255, .2) !important; background: rgba(158, 215, 255, .045) !important; }

.monthCard,
.shootCard,
.episodeCard,
.newEpisodeCard,
.roughWorkspaceCard,
.newRoughCutCard {
  --accent: var(--ruby) !important;
  border-color: rgba(235, 241, 247, .10) !important;
  background: linear-gradient(145deg, rgba(20, 24, 31, .98), rgba(11, 14, 19, .98)) !important;
}
.monthCard::after,
.shootCard::after,
.episodeCard::after,
.roughWorkspaceCard::after { background: linear-gradient(90deg, var(--ruby), var(--ice), transparent 78%); }
.monthCard:hover,
.shootCard:hover,
.episodeCard:hover,
.roughWorkspaceCard:hover,
.newEpisodeCard:hover,
.newRoughCutCard:hover { border-color: rgba(255, 51, 79, .34) !important; }
.monthCard > p { display: none !important; }
.monthCount,
.episodeBadge { border-color: rgba(226, 29, 63, .18) !important; color: #ff7c8e !important; background: rgba(226, 29, 63, .08) !important; }
.folderGlyph,
.playGlyph,
.roughIcon,
.roughNewIcon,
.formatIcon { border-color: rgba(226, 29, 63, .16) !important; color: #ff6a7e !important; background: rgba(226, 29, 63, .08) !important; }
.openArrow,
.cardArrow { color: var(--ruby-bright) !important; }
.shootSelect,
.clipSelect { accent-color: var(--ruby); }
.shootCard.selected,
.clipRow.selected { border-color: rgba(255, 51, 79, .58) !important; background: rgba(226, 29, 63, .07) !important; }

.clipBrowser,
.panel { background: rgba(16, 20, 27, .9) !important; }
.clipToolbar,
.clipColumns { background: #12161d !important; }
.clipToolbar > .clipToolbarStats { display: none !important; }
.clipThumb { background: #07090c !important; }
.emptyPanel,
.loadingState { background: rgba(13, 16, 22, .7) !important; }
.loadingOrb { border-color: rgba(226, 29, 63, .15) !important; border-top-color: var(--ruby-bright) !important; }

.notesPanel textarea,
.formControl,
.modal input,
.modal textarea,
.modal select,
.cloudModal select { background: #0b0e13 !important; }
.notesPanel textarea:focus,
.formControl:focus,
.modal input:focus,
.modal textarea:focus,
.modal select:focus { border-color: rgba(158, 215, 255, .5) !important; }
.statPanel strong { color: var(--ruby-bright) !important; }
.roughMatch.warn b { color: var(--ice) !important; }
.roughWorkspaceMeta span { background: #0a0d12 !important; }
.cloudProgress i { background: linear-gradient(90deg, var(--ruby-deep), var(--ruby-bright)) !important; box-shadow: 0 0 18px rgba(226, 29, 63, .25); }
.cloudProcessingNote { border-color: rgba(158, 215, 255, .17) !important; color: #b9d9ed !important; background: rgba(158, 215, 255, .05) !important; }
.roughOutputStage { background: #05070a !important; }
.roughOutputIcon { border-color: rgba(226, 29, 63, .18) !important; color: var(--ruby-bright) !important; background: rgba(226, 29, 63, .08) !important; }
.roughBuildOption { background: #0d1117 !important; }
.roughBuildOption:hover:not(:disabled) { border-color: rgba(255, 51, 79, .34) !important; background: #151a22 !important; }
.roughBuildBadge { color: #fff !important; background: var(--ruby) !important; }
.roughBuildOption.raw .roughBuildBadge { background: #621023 !important; }

.modalBackdrop,
.quickLook,
.roughRenderOverlay,
.cloudModalBackdrop { background: rgba(4, 6, 9, .84) !important; }
.modal,
.quickWindow,
.roughRenderWindow,
.cloudModal { background: linear-gradient(150deg, #171c24, #0a0d12) !important; }
.modalClose,
.cloudClose,
.roughRenderClose { background: #131820 !important; }
#modalSub { display: none !important; }
.quickChrome,
.quickFooter { background: #10141a !important; }
.quickInfo { background: #0e1218 !important; }
.traffic i:first-child { background: var(--ruby-bright) !important; }
.traffic i:nth-child(2) { background: var(--ice) !important; }
.traffic i:nth-child(3) { background: var(--green) !important; }

.loginOverlay {
  background:
    linear-gradient(135deg, rgba(226, 29, 63, .13), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(158, 215, 255, .06), transparent 40%),
    #07080b !important;
}
.loginOverlay::before { display: none; }
.loginCard {
  width: min(500px, 100%) !important;
  border-color: rgba(235, 241, 247, .16) !important;
  background: rgba(15, 18, 24, .96) !important;
  box-shadow: 0 42px 120px rgba(0, 0, 0, .62), inset 3px 0 0 var(--ruby) !important;
}
.loginLockup {
  display: block;
  width: 100%;
  height: auto;
  margin: -8px 0 28px;
}
.loginCard input { background: #090c11 !important; }
.loginCard input:focus { border-color: rgba(158, 215, 255, .5) !important; box-shadow: 0 0 0 4px rgba(158, 215, 255, .07); }
.toast { color: #fff !important; background: var(--ruby) !important; }

.siteFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 112px;
  padding: 28px clamp(18px, 3.4vw, 54px);
  border-top: 1px solid rgba(235, 241, 247, .08);
  color: var(--muted-2);
  background: rgba(7, 9, 12, .78);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.siteFooter > img { display: block; width: 166px; height: 48px; object-fit: cover; object-position: center; }
.siteFooter > div { display: flex; align-items: center; gap: 10px; }
.siteFooter > div span:nth-child(2) { color: var(--ruby); }

@media (max-width: 1180px) {
  .topbar { grid-template-columns: auto auto minmax(220px, 1fr) auto auto; }
  .searchWordmark { width: 116px; flex-basis: 116px; }
}

@media (max-width: 860px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto auto auto !important; }
  .sidebar { background: rgba(10, 13, 18, .985) !important; }
  .topnav { background: rgba(13, 17, 22, .97) !important; }
  .searchWordmark { width: 116px; flex-basis: 116px; }
  .pageHeaderCopy h1, .episodeHeader h1 { font-size: clamp(34px, 9.5vw, 46px) !important; }
  .siteFooter {
    min-height: 136px;
    margin-bottom: calc(74px + env(safe-area-inset-bottom));
    padding: 28px 18px;
  }
  .siteFooter > img { width: 146px; height: 44px; }
}

/* Final Sickos identity system */
.clipzLockup,
.scMobileBrand,
.guestBrand,
.loginPanelMark {
  font-family: "Arial Black", Impact, Haettenschweiler, sans-serif !important;
  font-style: italic;
  letter-spacing: -.075em;
  text-transform: uppercase;
}
.clipzLockup > img,
.scMobileBrand > img,
.guestBrand > img,
.loginPanelMark > img {
  display: block;
  flex: 0 0 auto;
  object-fit: contain !important;
  object-position: center;
  transform: none !important;
}
.clipzLockup > span,
.scMobileBrand > span,
.guestBrand > span,
.loginPanelMark > span { display: grid; gap: 3px; line-height: .74; }
.clipzLockup b,
.scMobileBrand b,
.guestBrand b,
.loginPanelMark b { display: block; margin: 0 !important; color: #111 !important; font-weight: 950 !important; }
.clipzLockup b:last-child,
.scMobileBrand b:last-child,
.guestBrand b:last-child,
.loginPanelMark b:last-child { color: #e81717 !important; }

.brand { min-width: 156px !important; overflow: visible !important; }
.topbarLockup { gap: 9px !important; min-width: 145px; }
.topbarLockup > img { width: 42px !important; height: 42px !important; }
.topbarLockup b { font-size: 15px !important; line-height: .72 !important; }
.footerLockup { gap: 11px !important; }
.footerLockup > img { width: 45px !important; height: 45px !important; }
.footerLockup b { font-size: 19px !important; line-height: .72 !important; }
.searchWrap { align-items: center !important; }
html.dcDesktopV2 .searchWordmark {
  display: grid !important;
  width: 31px !important;
  min-width: 31px !important;
  height: 31px !important;
  flex-basis: 31px !important;
  overflow: visible !important;
}
html.dcDesktopV2 .searchWordmark > img { width: 29px !important; height: 29px !important; }
html.dcDesktopV2 .searchDivider {
  display: block !important;
  width: 1px !important;
  height: 22px !important;
  flex: 0 0 1px !important;
  margin: 0 2px !important;
  background: #e5e5e7 !important;
}

/* Cinematic internal login */
.loginOverlay {
  z-index: 40000 !important;
  display: none !important;
  overflow: auto;
  place-items: stretch !important;
  padding: 18px !important;
  color: #111 !important;
  background: #ececee !important;
}
.loginOverlay.show { display: grid !important; }
.loginOverlay::before { display: none !important; }
.loginExperience {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(420px, .78fr);
  width: min(1500px, 100%);
  min-height: calc(100dvh - 36px);
  margin: auto;
  overflow: hidden;
  border: 1px solid #d8d8dc;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(17,17,17,.13);
}
.loginIdentity {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  padding: clamp(24px,3vw,48px);
  color: #fff;
  background:
    linear-gradient(rgba(255,255,255,.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.042) 1px, transparent 1px),
    radial-gradient(circle at 48% 45%, rgba(232,23,23,.18), transparent 35%),
    #111214;
  background-size: 54px 54px,54px 54px,auto,auto;
}
.loginIdentity::before,
.loginIdentity::after {
  content: "+";
  position: absolute;
  color: rgba(255,255,255,.28);
  font: 13px/1 monospace;
}
.loginIdentity::before { top: 22%; left: 8%; }
.loginIdentity::after { right: 8%; bottom: 22%; }
.loginIdentityTop,
.loginIdentityBottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9da0a6;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .18em;
}
.loginIdentityTop { align-self: start; }
.loginIdentityTop i,
.loginPanelFoot i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #e81717; box-shadow: 0 0 0 4px rgba(232,23,23,.12); }
.loginIdentityBottom { align-self: end; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.loginHeroMark {
  position: relative;
  z-index: 1;
  align-self: center;
  display: grid;
  place-items: center;
  min-height: 520px;
}
.loginHorseFrame {
  position: absolute;
  display: grid;
  place-items: center;
  width: min(52vw,620px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
}
.loginHorseFrame::before,
.loginHorseFrame::after { content: ""; position: absolute; inset: 10%; border: 1px solid rgba(255,255,255,.055); border-radius: 50%; }
.loginHorseFrame::after { inset: 24%; }
.loginHorseFrame img {
  width: 58%;
  height: 58%;
  object-fit: contain;
  filter: drop-shadow(0 24px 60px rgba(232,23,23,.2));
  animation: loginHorseFloat 6s ease-in-out infinite;
}
.loginHeroType {
  position: absolute;
  right: clamp(8px,2vw,32px);
  bottom: clamp(24px,5vh,70px);
  z-index: 2;
  display: grid;
  text-align: right;
  font-family: "Arial Black", Impact, sans-serif;
  font-style: italic;
  line-height: .72;
  letter-spacing: -.085em;
}
.loginHeroType strong { color: #fff; font-size: clamp(70px,9vw,146px); }
.loginHeroType strong:last-child { color: #e81717; }
.loginScan { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; overflow: hidden; background: rgba(255,255,255,.06); }
.loginScan i { display: block; width: 24%; height: 100%; background: #e81717; animation: loginScan 3.4s ease-in-out infinite; }

.loginCard {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(42px,6vw,92px) clamp(36px,6vw,86px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #111 !important;
  background: #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.loginPanelMark { display: none; align-items: center; gap: 8px; margin-bottom: 38px; }
.loginPanelMark img { width: 42px; height: 42px; }
.loginPanelMark b { font-size: 13px; }
.loginPanelHead > span { color: #e81717; font-size: 9px; font-weight: 950; letter-spacing: .2em; }
.loginPanelHead h1 {
  max-width: 440px;
  margin: 18px 0 12px !important;
  color: #111 !important;
  font-size: clamp(48px,5.2vw,78px) !important;
  font-weight: 850 !important;
  line-height: .9 !important;
  letter-spacing: -.072em !important;
}
.loginPanelHead p { margin: 0 0 clamp(38px,5vh,58px) !important; color: #71767c !important; font-size: 12px; }
.loginCard label { color: #555b62 !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .15em !important; }
.loginCard label > span { display: block; }
.loginCard input {
  width: 100%;
  min-height: 62px !important;
  margin-top: 10px !important;
  padding: 0 18px !important;
  border: 1px solid #dfe0e3 !important;
  border-radius: 15px !important;
  color: #111 !important;
  background: #f7f7f8 !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02) !important;
  font-size: 16px !important;
  letter-spacing: .03em;
}
.loginCard input::placeholder { color: #a2a6ab; }
.loginCard input:focus { border-color: rgba(232,23,23,.55) !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(232,23,23,.075) !important; }
.loginCard .button {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 60px !important;
  margin-top: 14px !important;
  padding: 0 18px !important;
  border-radius: 15px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}
.loginCard .button i { font-size: 17px; font-style: normal; transition: transform .2s ease; }
.loginCard .button:hover i { transform: translateX(3px); }
.loginOwnerButton { border-color: #e81717 !important; color: #fff !important; background: #e81717 !important; box-shadow: 0 12px 32px rgba(232,23,23,.2) !important; }
.loginOwnerButton:hover { background: #cf1111 !important; }
.loginOr { margin: 22px 0 2px !important; color: #999da2 !important; }
.loginOr::before,.loginOr::after { background: #e3e4e6 !important; }
.loginCard .guestButton { border-color: #dfe0e3 !important; color: #111 !important; background: #f5f5f7 !important; box-shadow: none !important; }
.loginCard .guestButton:hover { border-color: rgba(232,23,23,.26) !important; color: #e81717 !important; background: #fff7f7 !important; }
.loginError { min-height: 22px; padding-top: 12px; color: #e81717 !important; font-size: 10px; font-weight: 750; }
.loginPanelFoot { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 18px; border-top: 1px solid #ececef; color: #9a9ea3; font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.loginPanelFoot span:last-child { color: #686d73; }
.loginPanelFoot i { width: 5px; height: 5px; margin-right: 6px; background: #27a65b; box-shadow: 0 0 0 4px rgba(39,166,91,.09); }

@keyframes loginHorseFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
@keyframes loginScan { 0% { transform: translateX(-110%); } 55%,100% { transform: translateX(520%); } }

@media (max-width: 900px) {
  .loginOverlay { padding: 0 !important; background: #fff !important; }
  .loginExperience { grid-template-columns: 1fr; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .loginIdentity { min-height: 42dvh; padding: calc(20px + env(safe-area-inset-top)) 22px 20px; }
  .loginIdentityBottom { display: none; }
  .loginHeroMark { min-height: 30dvh; }
  .loginHorseFrame { width: min(76vw,370px); }
  .loginHeroType { right: 20px; bottom: 8px; }
  .loginHeroType strong { font-size: clamp(54px,18vw,86px); }
  .loginCard { justify-content: flex-start; padding: 34px 22px calc(28px + env(safe-area-inset-bottom)) !important; }
  .loginPanelMark { display: none; }
  .loginPanelHead > span { display: none; }
  .loginPanelHead h1 { margin-top: 0 !important; font-size: clamp(40px,12vw,58px) !important; }
  .loginPanelHead p { margin-bottom: 28px !important; }
  .loginCard input { min-height: 58px !important; }
  .loginCard .button { min-height: 56px !important; }
  .loginPanelFoot { margin-top: 24px; }
}
@media (max-width: 560px) {
  .loginIdentity { min-height: 38dvh; }
  .loginIdentityTop b { display: none; }
  .loginHorseFrame img { width: 54%; height: 54%; }
  .loginHeroType { right: 18px; bottom: 6px; }
  .loginHeroType strong { font-size: clamp(48px,17vw,70px); }
  .loginCard { padding-top: 28px !important; }
  .loginPanelHead p { margin-bottom: 23px !important; }
  .loginPanelFoot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .loginHorseFrame img,.loginScan i { animation: none !important; }
}

@media (max-width: 420px) {
  .searchWordmark { width: 100px; flex-basis: 100px; }
  .searchDivider { height: 18px; }
  .siteFooter { align-items: flex-start; flex-direction: column; }
}

/* Final palette and identity pass */
.topbar { background: rgba(18, 18, 18, .94) !important; }
.topnav,
.quietIcon,
.syncPill,
.searchWrap { background: #1e1e24 !important; }
.topnav button.active { background: #e50914 !important; }
.sidebar { background: #18181b !important; }
.monthCard,
.shootCard,
.episodeCard,
.newEpisodeCard,
.roughWorkspaceCard,
.newRoughCutCard,
.clipBrowser,
.panel,
.loginCard,
.modal,
.quickWindow,
.roughRenderWindow,
.cloudModal { background: #1e1e24 !important; border-color: rgba(237, 237, 237, .10) !important; }
.clipToolbar,
.clipColumns,
.quickChrome,
.quickFooter,
.quickInfo { background: #27272a !important; }
.notesPanel textarea,
.formControl,
.modal input,
.modal textarea,
.modal select,
.cloudModal select,
.loginCard input { background: #121212 !important; color: #ededed !important; }
.siteFooter { background: #18181b !important; border-color: rgba(237, 237, 237, .10) !important; }

.clipzLockup {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #ededed;
  line-height: .78;
  letter-spacing: -.07em;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-style: italic;
  text-transform: uppercase;
}
.clipzLockup > img { width: 38px; height: 38px; flex: 0 0 auto; object-fit: contain; }
.clipzLockup > span { display: grid; gap: 4px; }
.clipzLockup b { display: block; font-size: 18px; font-weight: 900; }
.clipzLockup b:last-child { color: #e50914; }
.searchWordmark { width: auto !important; height: auto !important; flex: 0 0 auto !important; object-fit: initial !important; }
.searchWordmark > img { width: 28px; height: 28px; }
.searchWordmark b { font-size: 13px; }
.loginLockup { width: fit-content; margin: 0 0 30px; }
.loginLockup > img { width: 74px; height: 74px; }
.loginLockup b { font-size: clamp(34px, 7vw, 50px); }
.footerLockup > img { width: 48px; height: 48px; }
.footerLockup b { font-size: 22px; }
.loginOr { display: flex; align-items: center; gap: 12px; margin: 15px 0 3px; color: #71717a; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.loginOr::before,
.loginOr::after { content: ""; height: 1px; flex: 1; background: rgba(237, 237, 237, .10); }
.guestButton { border-color: rgba(237, 237, 237, .16) !important; background: #27272a !important; }
.guestButton:hover:not(:disabled) { border-color: rgba(229, 9, 20, .48) !important; background: #303034 !important; }
.guestMode .topbar { grid-template-columns: auto auto minmax(0, 1fr) auto auto auto !important; }
.guestMode .topnav { justify-self: start; }
.guestMode #refreshLibrary,
.guestMode #selectionBar,
.guestMode #cloudTimelineInput { display: none !important; }
.guestMode [data-guest-locked] { cursor: not-allowed !important; opacity: .5; }
.guestMode [data-guest-locked]::before { content: "LOCKED"; position: absolute; top: 7px; right: 8px; color: #8b8d94; font-size: 6px; font-weight: 900; letter-spacing: .11em; }
.guestMode #createEpisode,
.guestMode #episodeDelete,
.guestMode #episodeAddFootage,
.guestMode .bundleCardDelete,
.guestMode .removeShoot,
.guestMode .removeClip,
.guestMode .newEpisodeCard { display: none !important; }
.guestMode .siteFooter > div:last-child::before { content: "Guest / "; color: #e50914; }

@media (max-width: 860px) {
  .clipzLockup { gap: 6px; }
  .searchWordmark > img { width: 24px; height: 24px; }
  .searchWordmark b { font-size: 11px; }
  .loginLockup > img { width: 58px; height: 58px; }
  .loginLockup b { font-size: clamp(30px, 10vw, 42px); }
  .guestMode .topbar { grid-template-columns: minmax(0, 1fr) auto !important; }
}

/* Tesla-cool light system */
:root {
  --bg: #ffffff;
  --bg-raised: #f9f9fb;
  --panel: #f5f5f7;
  --panel-2: #ffffff;
  --line: #e5e5e7;
  --line-strong: #d4d4d8;
  --text: #111111;
  --muted: #51575e;
  --muted-2: #7a8087;
  --acid: #e81717;
  --orange: #e81717;
  --red: #e81717;
  --cream: #ffffff;
  --ink: #111111;
  --ruby: #e81717;
  --ruby-bright: #d92121;
  --ruby-deep: #a80f0f;
  --ice: #51575e;
}

html,
body { color: #111111 !important; background: #ffffff !important; }
body::before {
  opacity: .6;
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(17,17,17,.018) 0) 0 0 / 96px 96px,
    linear-gradient(transparent calc(100% - 1px), rgba(17,17,17,.018) 0) 0 0 / 96px 96px !important;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline-color: #e81717 !important; }
::selection { color: #ffffff; background: #e81717; }
::-webkit-scrollbar-track { background: #f5f5f7; }
::-webkit-scrollbar-thumb { background: #c9c9ce; border-color: #f5f5f7; }
::-webkit-scrollbar-thumb:hover { background: #a7a7ad; }

.topbar {
  border-bottom: 1px solid #e5e5e7 !important;
  color: #111111 !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: none !important;
}
.topnav,
.quietIcon,
.syncPill,
.searchWrap { color: #111111 !important; background: #f5f5f7 !important; }
.topnav { border-color: #e5e5e7 !important; }
.topnav button { color: #51575e !important; }
.topnav button:hover { color: #111111 !important; background: #ffffff !important; }
.topnav button.active { color: #ffffff !important; background: #e81717 !important; box-shadow: none !important; }
.searchWrap { border-color: #e5e5e7 !important; }
.searchWrap:focus-within { border-color: rgba(232,23,23,.55) !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(232,23,23,.08) !important; }
.searchWrap input { color: #111111 !important; }
.searchWrap input::placeholder { color: #7a8087 !important; }
.searchWrap kbd { color: #51575e; background: #ffffff; }
.searchDivider { background: #d4d4d8; }
.quietIcon,
.syncPill { border-color: #e5e5e7 !important; }
.quietIcon:hover,
.syncPill:hover { color: #e81717 !important; background: #ffffff !important; }
.syncDot { background: #e81717 !important; box-shadow: 0 0 0 4px rgba(232,23,23,.09); }

.sidebar { border-right-color: #e5e5e7 !important; background: #f9f9fb !important; }
.sideHeading,
.libraryRoot,
.monthOpen,
.shootTreeButton { color: #111111 !important; }
.sideSectionLabel,
.shootTreeButton small { color: #7a8087 !important; }
.libraryRoot:hover,
.monthOpen:hover,
.shootTreeButton:hover { background: #ffffff !important; }
.libraryRoot.active,
.monthOpen.active,
.shootTreeButton.active,
.shootTreeButton.bundleSelected { border-color: rgba(232,23,23,.22) !important; color: #111111 !important; background: rgba(232,23,23,.065) !important; }
.rootIcon { color: #e81717 !important; background: rgba(232,23,23,.08) !important; }

.pageHeaderCopy h1,
.episodeHeader h1,
.roughTitle b,
.clipzLockup { color: #111111 !important; }
.pageHeaderCopy p,
.episodeHeader p,
.breadcrumb,
.roughTitle span,
.roughWorkspaceMeta,
.roughHead small { color: #51575e !important; }
.eyebrow { color: #51575e !important; }
.eyebrow::before { background: #e81717 !important; }

.monthCard,
.shootCard,
.episodeCard,
.newEpisodeCard,
.roughWorkspaceCard,
.newRoughCutCard,
.clipBrowser,
.panel,
.emptyPanel,
.loadingState {
  border: 1px solid #e5e5e7 !important;
  color: #111111 !important;
  background: #f5f5f7 !important;
  box-shadow: none !important;
}
.monthCard::after,
.shootCard::after,
.episodeCard::after,
.roughWorkspaceCard::after { background: linear-gradient(90deg, #e81717, transparent 58%) !important; height: 1px !important; }
.monthCard:hover,
.shootCard:hover,
.episodeCard:hover,
.roughWorkspaceCard:hover,
.newEpisodeCard:hover,
.newRoughCutCard:hover { border-color: rgba(232,23,23,.35) !important; background: #ffffff !important; box-shadow: none !important; }
.folderGlyph,
.playGlyph,
.roughIcon,
.roughNewIcon,
.formatIcon,
.roughOutputIcon { border-color: rgba(232,23,23,.16) !important; color: #e81717 !important; background: rgba(232,23,23,.07) !important; }
.monthCount,
.episodeBadge { border-color: rgba(232,23,23,.15) !important; color: #d92121 !important; background: rgba(232,23,23,.055) !important; }
.roughWorkspaceMeta span { border-color: #e5e5e7 !important; color: #51575e !important; background: #ffffff !important; }
.shootCard.selected,
.clipRow.selected { border-color: rgba(232,23,23,.48) !important; background: rgba(232,23,23,.045) !important; }

.clipToolbar,
.clipColumns,
.quickChrome,
.quickFooter,
.quickInfo { color: #111111 !important; background: #f9f9fb !important; }
.clipToolbar,
.clipColumns,
.clipRow,
.quickChrome,
.quickFooter { border-color: #e5e5e7 !important; }
.clipRow:hover { background: #ffffff !important; }
.clipThumb { background: #e8e8eb !important; }

.button:not(.primary),
.squareButton,
.rowButton,
.roughBuildOption,
.modalClose,
.cloudClose,
.roughRenderClose { border-color: #e5e5e7 !important; color: #111111 !important; background: #f5f5f7 !important; }
.button:not(.primary):hover:not(:disabled),
.squareButton:hover,
.rowButton:hover,
.roughBuildOption:hover:not(:disabled) { border-color: rgba(232,23,23,.3) !important; color: #e81717 !important; background: #ffffff !important; }
.button.primary { color: #ffffff !important; background: #e81717 !important; box-shadow: none !important; }
.button.primary:hover:not(:disabled) { background: #d92121 !important; }
.textBack { color: #d92121 !important; }

.notesPanel textarea,
.formControl,
.modal input,
.modal textarea,
.modal select,
.cloudModal input,
.cloudModal select,
.loginCard input { border-color: #e5e5e7 !important; color: #111111 !important; background: #ffffff !important; }
.notesPanel textarea:focus,
.formControl:focus,
.modal input:focus,
.modal textarea:focus,
.modal select:focus,
.cloudModal input:focus,
.cloudModal select:focus,
.loginCard input:focus { border-color: rgba(232,23,23,.58) !important; box-shadow: 0 0 0 3px rgba(232,23,23,.08) !important; }
.statPanel strong,
.openArrow,
.cardArrow { color: #e81717 !important; }
.roughMatch.warn b { color: #51575e !important; }
.cloudProgress { background: #e5e5e7 !important; }
.cloudProgress i { background: #e81717 !important; box-shadow: none !important; }
.cloudProcessingNote { border-color: rgba(232,23,23,.14) !important; color: #51575e !important; background: rgba(232,23,23,.045) !important; }

.modalBackdrop,
.quickLook,
.roughRenderOverlay,
.cloudModalBackdrop { background: rgba(17,17,17,.28) !important; }
.modal,
.quickWindow,
.roughRenderWindow,
.cloudModal { border-color: #e5e5e7 !important; color: #111111 !important; background: #ffffff !important; box-shadow: 0 24px 90px rgba(17,17,17,.15) !important; }
.roughOutputStage,
.videoStage { background: #111111 !important; }
.videoStage { position: relative; }
.drivePreviewFrame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #050506; }
.drivePreviewFrame[hidden] { display: none; }
.quickMessage { z-index: 2; pointer-events: none; }
.quickDirectPreview { width: 100%; min-height: 40px; margin-top: 16px; border: 1px solid #e5e5e7; border-radius: 12px; color: #51575e; background: #f5f5f7; font-size: 10px; font-weight: 800; cursor: pointer; }
.quickDirectPreview:hover { border-color: rgba(232,23,23,.32); color: #e81717; }
.quickDirectPreview[hidden] { display: none; }
.quickInfo,
.quickFooter,
.quickChrome { color: #111111 !important; background: #ffffff !important; border-color: #e5e5e7 !important; }
.quickInfo h2 { color: #111111 !important; }
.quickInfo p,
.quickHint,
.quickFooter > span { color: #6b7178 !important; }
.quickMeta > div { border: 1px solid #e5e5e7 !important; color: #111111 !important; background: #f5f5f7 !important; box-shadow: none !important; }
.quickMeta span { color: #7a8087 !important; }
.quickMeta b { color: #111111 !important; }
.modalBackdrop.show { z-index: 18000 !important; }
.modal { color: #111111 !important; background: #ffffff !important; }
.modal h2,
.modal label { color: #111111 !important; }
.modal > p,
#modalSub { display: block !important; color: #6b7178 !important; }
.modal .formatChoice { border: 1px solid #e5e5e7 !important; color: #111111 !important; background: #f9f9fb !important; box-shadow: none !important; }
.modal .formatChoice:hover:not(:disabled) { border-color: rgba(232,23,23,.35) !important; background: #fff5f5 !important; }
.modal .formatChoice b { color: #111111 !important; }
.modal .formatChoice span { color: #6b7178 !important; }
.modal .formatIcon { color: #e81717 !important; background: #fff0f0 !important; }
.modal .formatChoice:disabled { opacity: .48; }

.loginOverlay { background: linear-gradient(145deg, rgba(232,23,23,.045), transparent 42%), #ffffff !important; }
.loginCard { border-color: #e5e5e7 !important; color: #111111 !important; background: #ffffff !important; box-shadow: 0 28px 100px rgba(17,17,17,.12), inset 2px 0 0 #e81717 !important; }
.guestButton { border-color: #e5e5e7 !important; background: #f5f5f7 !important; }
.loginOr { color: #7a8087; }
.loginOr::before,
.loginOr::after { background: #e5e5e7; }

.addModeBanner { border-color: rgba(232,23,23,.18) !important; background: rgba(232,23,23,.045) !important; }
.addModeActions { display: flex; align-items: center; gap: 8px; }
.selectionBar { border-color: #e5e5e7 !important; color: #111111 !important; background: rgba(255,255,255,.96) !important; box-shadow: 0 -12px 40px rgba(17,17,17,.08) !important; }
.bundlePicking #monthTree .shootTreeButton { grid-template-columns: 24px minmax(0,1fr) auto !important; }
.sidebarBundleCheck {
  display: none;
  width: 20px;
  height: 20px;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  place-items: center;
  color: #7a8087;
  background: #ffffff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.bundlePicking .sidebarBundleCheck { display: grid; }
.bundlePicking .shootTreeButton.bundleSelected .sidebarBundleCheck { border-color: #e81717; color: #ffffff; background: #e81717; }

.siteFooter { border-color: #e5e5e7 !important; color: #7a8087 !important; background: #f5f5f7 !important; }
.footerLockup,
.searchWordmark,
.loginLockup { color: #111111 !important; }

@media (max-width: 860px) {
  .topnav { border-color: #e5e5e7 !important; background: rgba(255,255,255,.97) !important; box-shadow: 0 -8px 28px rgba(17,17,17,.06) !important; }
  .sidebar { background: #ffffff !important; }
  .mobileSidebarScrim { background: rgba(17,17,17,.22) !important; }
  .siteFooter { background: #f5f5f7 !important; }
}

/* Production polish: marks, search, first-load state, and bundle controls */
.brand {
  min-width: 54px !important;
  justify-content: center;
}
.brandLogo {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  overflow: visible !important;
  transform: none !important;
}
.brandLogo img {
  width: 100% !important;
  height: 100% !important;
  padding: 3px;
  object-fit: contain !important;
}

.searchWordmark {
  display: grid !important;
  place-items: center;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  overflow: hidden;
}
.searchWordmark > img {
  display: block;
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
}
.searchWrap > svg {
  position: static !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
}
.searchWrap input { position: static !important; width: auto !important; }

.loadingState {
  min-height: 340px !important;
  padding: 48px 24px !important;
  text-align: center;
}
.loadingOrb { display: none !important; }
.loadingMark {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin-bottom: 16px;
  border: 1px solid rgba(232,23,23,.16);
  border-radius: 22px;
  background: #ffffff;
  animation: loadingMarkFloat 1.8s ease-in-out infinite;
}
.loadingMark img { width: 56px; height: 56px; object-fit: contain; }
.loadingState > b { color: #111111 !important; font-size: 19px; letter-spacing: -.02em; }
.loadingState #loadingDetail {
  display: block;
  max-width: 430px;
  margin-top: 8px;
  color: #51575e !important;
  font-size: 0;
  line-height: 1.55;
}
.loadingState #loadingDetail::after {
  content: "The first load can take a few minutes while Sickos Clipz builds your library index.";
  font-size: 13px;
}
.loadingTrack {
  position: relative;
  width: min(280px, 70vw);
  height: 3px;
  margin-top: 24px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e5e7;
}
.loadingTrack i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: #e81717;
  animation: loadingTrackMove 1.35s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes loadingMarkFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes loadingTrackMove {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(350%); }
}

.dangerButton,
.bundleCardDelete {
  border-color: rgba(232,23,23,.28) !important;
  color: #d92121 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}
.dangerButton:hover,
.bundleCardDelete:hover {
  border-color: #e81717 !important;
  color: #ffffff !important;
  background: #e81717 !important;
}
.bundleCardDelete { margin-top: 8px; }
.deleteBundleActions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.bundleSelectionNote { margin-top: 12px; color: #51575e; font-size: 11px; }
.bundleEmpty { border: 0 !important; border-radius: 0 !important; }

@media (max-width: 860px) {
  .brand { min-width: 46px !important; }
  .brandLogo { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
  .searchWordmark { width: 28px !important; min-width: 28px !important; flex-basis: 28px !important; }
  .searchWordmark > img { width: 25px !important; height: 25px !important; }
  .episodeHeader.detailHeader .pageActions { grid-template-columns: 1fr 1fr; }
  #episodeDelete { grid-column: 1 / -1; }
}

/* Viewer and selection reliability */
.quickLook.show {
  z-index: 16000 !important;
  isolation: isolate;
}
.quickLook.show .quickWindow { position: relative; z-index: 1; }
.quickViewerOpen .sidebar,
.quickViewerOpen .mobileSidebarScrim {
  pointer-events: none !important;
}

.shootCard .shootSelect {
  position: relative !important;
  z-index: 12 !important;
  width: 22px !important;
  height: 22px !important;
  pointer-events: auto !important;
  cursor: pointer;
}
.shootCard .shootOpen { z-index: 1 !important; }

.episodeCard .bundleOpenButton,
.episodeCard .bundleCardDelete {
  position: relative !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 42px;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.episodeCard .bundleOpenButton { margin-top: auto; }
.episodeCard .bundleCardDelete { margin-top: 8px; }

/* Sickos Clipz header lockup */
.brand {
  min-width: 150px !important;
  padding: 0 !important;
  justify-content: flex-start !important;
}
.topbarLockup {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: #111111 !important;
  white-space: nowrap;
}
.topbarLockup > img {
  width: 43px;
  height: 43px;
  object-fit: contain;
}
.topbarLockup > span { display: grid; gap: 1px; }
.topbarLockup b {
  display: block;
  font-size: 16px;
  font-weight: 950;
  line-height: .78;
  letter-spacing: -.075em;
}
.topbarLockup b:last-child { color: #e81717 !important; }

/* Bundles dashboard */
.bundleDashboardHeader {
  align-items: end !important;
  margin-bottom: 22px !important;
  padding-bottom: 22px;
  border-bottom: 1px solid #e5e5e7;
}
.bundleDashboardHeader h1 { margin-top: 7px !important; }
.bundleDashboardHeader p { margin-top: 7px !important; }
.bundleMetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid #e5e5e7;
  border-radius: 18px;
  background: #f9f9fb;
}
.bundleMetrics > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 78px;
  padding: 18px 22px;
  border-right: 1px solid #e5e5e7;
}
.bundleMetrics > div:last-child { border-right: 0; }
.bundleMetrics span {
  color: #71717a;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.bundleMetrics b {
  color: #111111;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.05em;
}
#episodeGrid.episodeGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.bundleCard {
  display: flex !important;
  flex-direction: column;
  min-height: 272px !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 20px !important;
  background: #ffffff !important;
}
.bundleCard::before { background: #e81717 !important; }
.bundleCardTop {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 15px;
  padding: 22px 22px 18px;
}
.bundleCard .episodeBadge {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  border-radius: 14px;
  color: #e81717 !important;
  background: rgba(232,23,23,.07) !important;
}
.bundleCardTitle { min-width: 0; }
.bundleCardTitle h3 {
  margin: 1px 0 6px;
  overflow: hidden;
  color: #111111 !important;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bundleCardTitle p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #71717a !important;
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.bundleCardStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: auto 22px 18px;
  border: 1px solid #ececef;
  border-radius: 14px;
  background: #f9f9fb;
}
.bundleCardStats > span {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-right: 1px solid #ececef;
}
.bundleCardStats > span:last-child { border-right: 0; }
.bundleCardStats b { color: #111111 !important; font-size: 18px; line-height: 1; }
.bundleCardStats small { color: #71717a !important; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bundleCardActions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 0 22px 22px;
}
.bundleCard .bundleOpenButton,
.bundleCard .bundleCardDelete {
  width: auto !important;
  min-height: 42px;
  margin: 0 !important;
}
.bundleCard .bundleOpenButton { justify-content: space-between !important; padding-inline: 16px !important; }
.bundleCard .bundleCardDelete { padding-inline: 16px !important; }
.bundleNewCard {
  display: grid !important;
  min-height: 272px !important;
  place-content: center;
  gap: 10px;
  border-radius: 20px !important;
  color: #51575e !important;
  background: #f9f9fb !important;
}
.bundleNewCard b { color: #111111 !important; font-size: 14px; }
.bundleNewIcon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border: 1px solid rgba(232,23,23,.16);
  border-radius: 14px;
  color: #e81717;
  background: rgba(232,23,23,.06);
  font-size: 24px;
}
.bundleZeroCard {
  grid-column: 1 / -1;
  display: grid;
  min-height: 300px;
  padding: 42px;
  place-items: center;
  place-content: center;
  gap: 14px;
  border: 1px dashed #d4d4d8;
  border-radius: 22px;
  text-align: center;
  background: #f9f9fb;
}
.bundleZeroCard h2 { margin: 0; color: #111111; font-size: 22px; letter-spacing: -.04em; }

/* Bundle detail: force the light system through legacy dark rows */
.episodeDetailGrid { grid-template-columns: minmax(0, 1fr) 280px !important; gap: 16px !important; }
.episodeFootagePanel { padding: 0 !important; overflow: hidden; background: #ffffff !important; }
.episodeFootagePanel .panelHead { padding: 20px 22px !important; background: #f9f9fb !important; }
.episodeFootagePanel .panelHead b { color: #111111 !important; }
.episodeFootagePanel .panelHead small { color: #71717a !important; }
#episodeShootGroups { display: grid; gap: 10px; padding: 12px; background: #ffffff !important; }
.episodeShootGroup {
  overflow: hidden;
  border: 1px solid #e5e5e7 !important;
  border-radius: 14px;
  color: #111111 !important;
  background: #ffffff !important;
}
.episodeShootHead {
  display: grid !important;
  grid-template-columns: 28px 38px minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 12px 14px !important;
  border: 0 !important;
  color: #111111 !important;
  background: #f5f5f7 !important;
}
.episodeShootHead .disc {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid #dedee2;
  border-radius: 8px;
  color: #51575e !important;
  background: #ffffff !important;
}
.episodeShootGroup.open .episodeShootHead .disc { color: #ffffff !important; background: #e81717 !important; transform: rotate(90deg); }
.bundleFolderGlyph {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  color: #e81717;
  background: rgba(232,23,23,.07);
}
.bundleFolderTitle { display: grid; min-width: 0; gap: 4px; }
.bundleFolderTitle b { overflow: hidden; color: #111111 !important; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.bundleFolderTitle small { color: #71717a !important; font-size: 10px; }
.removeShoot {
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 8px;
  color: #8b8b93 !important;
  background: transparent !important;
  font-size: 10px !important;
  font-weight: 750;
}
.removeShoot:hover { color: #e81717 !important; background: rgba(232,23,23,.06) !important; }
.episodeShootClips { border-top: 1px solid #e5e5e7 !important; color: #111111 !important; background: #ffffff !important; }
.episodeMiniRow {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto auto 34px !important;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 10px 14px !important;
  border-bottom: 1px solid #eeeeef !important;
  color: #111111 !important;
  background: #ffffff !important;
}
.episodeMiniRow:last-child { border-bottom: 0 !important; }
.episodeMiniRow:hover { background: #f9f9fb !important; }
.episodeMiniThumb {
  position: relative;
  display: grid;
  width: 56px !important;
  height: 42px !important;
  overflow: hidden;
  place-items: center;
  border: 1px solid #e5e5e7 !important;
  border-radius: 9px !important;
  color: #e81717;
  background: #eeeeef !important;
}
.episodeMiniThumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.episodeMiniThumb i { font-size: 10px; font-style: normal; }
.episodeMiniIdentity { display: grid; min-width: 0; gap: 5px; }
.episodeMiniIdentity b { overflow: hidden; color: #111111 !important; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.episodeMiniIdentity small { overflow: hidden; color: #71717a !important; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.bundleMediaBadges { display: flex; gap: 5px; }
.bundleMediaBadges span {
  padding: 5px 7px;
  border: 1px solid #e5e5e7;
  border-radius: 999px;
  color: #51575e !important;
  background: #f5f5f7;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.bundlePreview { min-height: 34px !important; padding: 7px 10px !important; font-size: 9px !important; }
.removeClip {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  place-items: center;
  border: 1px solid #e5e5e7 !important;
  border-radius: 9px;
  color: #8b8b93 !important;
  background: #ffffff !important;
}
.removeClip:hover { border-color: rgba(232,23,23,.25) !important; color: #e81717 !important; background: rgba(232,23,23,.05) !important; }
.notesPanel,
.statPanel,
.availabilityPanel { background: #ffffff !important; }

@media (max-width: 860px) {
  .brand { min-width: 106px !important; }
  .topbarLockup { gap: 5px; }
  .topbarLockup > img { width: 36px; height: 36px; }
  .topbarLockup b { font-size: 12px; }
  .bundleDashboardHeader { align-items: flex-start !important; }
  .bundleMetrics { grid-template-columns: 1fr; }
  .bundleMetrics > div { min-height: 58px; padding: 13px 16px; border-right: 0; border-bottom: 1px solid #e5e5e7; }
  .bundleMetrics > div:last-child { border-bottom: 0; }
  #episodeGrid.episodeGrid { grid-template-columns: 1fr !important; }
  .bundleCard,
  .bundleNewCard { min-height: 250px !important; }
  .episodeDetailGrid { grid-template-columns: 1fr !important; }
  .episodeShootHead { grid-template-columns: 26px 34px minmax(0, 1fr) !important; min-height: 66px; }
  .episodeShootHead .removeShoot { grid-column: 2 / -1; justify-self: start; margin-top: -5px; }
  .episodeMiniRow {
    grid-template-columns: 50px minmax(0, 1fr) 32px !important;
    align-items: start;
    gap: 9px;
    padding: 11px !important;
  }
  .episodeMiniThumb { grid-row: 1 / 3; width: 50px !important; height: 40px !important; }
  .episodeMiniIdentity { align-self: center; }
  .bundleMediaBadges { grid-column: 2; }
  .bundlePreview { grid-column: 2; width: fit-content; }
  .removeClip { grid-column: 3; grid-row: 1; }
}