:root {
  --bg: #0a0a0b;
  --surface: #111114;
  --surface2: #18181d;
  --border: #2a2a32;
  --accent: #e8c547;
  --accent2: #ff6b35;
  --text: #e8e8ec;
  --muted: #6b6b7a;
  --int-day: #f5f0e8;
  --ext-day: #f5e97a;
  --int-night: #4a6fa5;
  --ext-night: #3a7d5a;
  --sunrise: #f4a261;
  --sunset: #e76f51;
  --badge-int-day-bg: #2a2a1a;
  --badge-int-day-text: #e8c547;
  --badge-int-day-border: #3a3a22;
  --badge-ext-day-bg: #2a2a14;
  --badge-ext-day-text: #f5e04a;
  --badge-ext-day-border: #3a3a18;
  --badge-int-night-bg: #1a2030;
  --badge-int-night-text: #7aaed4;
  --badge-int-night-border: #253050;
  --badge-ext-night-bg: #1a2820;
  --badge-ext-night-text: #6ab88a;
  --badge-ext-night-border: #253828;
  --strip-int-day-bg: rgba(245, 240, 232, 0.05);
  --strip-int-day-text: #e2dcd2;
  --strip-ext-day-bg: rgba(232, 197, 71, 0.05);
  --strip-ext-day-text: #e8c547;
  --strip-int-night-bg: rgba(74, 111, 165, 0.06);
  --strip-int-night-text: #9abedb;
  --strip-ext-night-bg: rgba(58, 125, 90, 0.06);
  --strip-ext-night-text: #7cdbb5;
  --dept-direcao-bg: #1e1a10;
  --dept-camera-bg: #1a1e28;
  --dept-som-bg: #1e181e;
  --dept-arte-bg: #181e18;
  --dept-producao-bg: #1e1814;
  --chip-id-bg: #222230;
  --city-dropdown-bg: #16161e;
  --scene-row-alt: #16161b;
  --weather-loaded-border: #2a3020;
  --rain-alert-bg: #1a0a08;
  --modal-error-bg: #1e100a;
  --scene-cast-bg: var(--surface2);
  --scene-cast-miss-bg: #1a1010;
  --scene-cast-miss-border: #3a2020;
  --glass-bg: rgba(17, 17, 20, 0.6);
  --glass-border: rgba(232, 197, 71, 0.12);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --body-gradient:
    radial-gradient(
      ellipse at 15% 20%,
      rgba(232, 197, 71, 0.1) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 85% 75%,
      rgba(255, 107, 53, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 50% 50%,
      rgba(74, 111, 165, 0.06) 0%,
      transparent 60%
    );
  --transition-theme:
    background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    background-color 0.3s ease;
}
body.light {
  --bg: #f0ede6;
  --surface: #ffffff;
  --surface2: #eceae4;
  --border: #d4d2ca;
  --accent: #b8950a;
  --accent2: #d44f1a;
  --text: #1a1a1e;
  --muted: #7a7a6a;
  --badge-int-day-bg: #faf5d0;
  --badge-int-day-text: #8a6e00;
  --badge-int-day-border: #e0d070;
  --badge-ext-day-bg: #fef9c0;
  --badge-ext-day-text: #7a6000;
  --badge-ext-day-border: #e8d840;
  --badge-int-night-bg: #dce8f5;
  --badge-int-night-text: #2a5a8a;
  --badge-int-night-border: #aac8e8;
  --badge-ext-night-bg: #d8f0e4;
  --badge-ext-night-text: #1a6040;
  --badge-ext-night-border: #90d0b0;
  --strip-int-day-bg: #fef8d0;
  --strip-int-day-text: #8a6e00;
  --strip-ext-day-bg: #fefad0;
  --strip-ext-day-text: #7a6000;
  --strip-int-night-bg: #dde8f8;
  --strip-int-night-text: #2a5a8a;
  --strip-ext-night-bg: #d8f2e4;
  --strip-ext-night-text: #1a6040;
  --dept-direcao-bg: #fef5d0;
  --dept-camera-bg: #dde8f8;
  --dept-som-bg: #f4e4fc;
  --dept-arte-bg: #d8f2e4;
  --dept-producao-bg: #fde8d8;
  --chip-id-bg: #e8e6de;
  --city-dropdown-bg: #ffffff;
  --scene-row-alt: #f0eeea;
  --weather-loaded-border: #c0d8b0;
  --rain-alert-bg: #fdecea;
  --modal-error-bg: #fdecea;
  --scene-cast-bg: #eceae4;
  --scene-cast-miss-bg: #fdecea;
  --scene-cast-miss-border: #e8c0b8;
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(184, 149, 10, 0.15);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  --body-gradient:
    radial-gradient(
      ellipse at 20% 25%,
      rgba(184, 149, 10, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 70%,
      rgba(212, 79, 26, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 50% 50%,
      rgba(74, 111, 165, 0.06) 0%,
      transparent 60%
    );
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: var(--bg);
  background-image: var(--body-gradient);
  background-attachment: fixed;
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  min-height: 100vh;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
#app-wrapper {
  overflow-x: hidden;
}
#login-wrapper {
  overflow-x: hidden;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 60px;
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-bg);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--glass-shadow);
}
.logo {
  font-family: "Bebas Neue", sans-serif;
  font-size: 26px;
  letter-spacing: 3px;
  color: var(--accent);
}
.logo span {
  color: var(--muted);
  font-size: 14px;
  font-family: "DM Mono", monospace;
  letter-spacing: 1px;
  margin-left: 10px;
  vertical-align: middle;
}
.header-meta {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  line-height: 1.6;
}
.header-meta strong {
  color: var(--accent);
  font-weight: 500;
}
nav {
  display: flex !important;
  gap: 8px !important;
  padding: 8px 16px 5px 16px !important;
  background: var(--glass-bg) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(232, 197, 71, 0.2) transparent !important;
  -ms-overflow-style: auto !important;
}
nav::-webkit-scrollbar {
  display: block !important;
  height: 4px !important;
}
nav::-webkit-scrollbar-track {
  background: transparent !important;
}
nav::-webkit-scrollbar-thumb {
  background: rgba(232, 197, 71, 0.2) !important;
  border-radius: 10px !important;
}
nav::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 197, 71, 0.45) !important;
}
nav .nav-tab {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  padding: 10px 16px !important;
}

/* Redução responsiva para telas de laptop (telas médias) */
@media (min-width: 1025px) and (max-width: 1440px) {
  nav {
    gap: 4px !important;
    padding: 6px 12px 4px 12px !important;
  }
  nav .nav-tab {
    font-size: 10.5px !important;
    padding: 8px 10px !important;
    letter-spacing: 0.5px !important;
  }
}
.nav-tab {
  padding: 12px 20px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.nav-tab:hover {
  color: var(--text);
}
.nav-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.app {
  display: flex;
  height: calc(100vh - 52px);
  position: relative;
  overflow: hidden;
}

header.app-header,
#app-wrapper header.app-header,
#app-wrapper header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  background: #0e1117 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  gap: 16px !important;
  user-select: none !important;
  box-sizing: border-box !important;
  transform: none !important;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.header-brand-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.header-brand-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}
.header-brand-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.4));
}
.header-brand-name {
  font-family: "Bebas Neue", sans-serif;
  font-size: 21px;
  letter-spacing: 1px;
  color: #ffffff;
  line-height: 1;
}

.header-breadcrumb-sep {
  color: #475569;
  font-size: 14px;
  font-weight: 300;
}

.header-meta-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
  max-width: 220px;
}
.header-meta-breadcrumb:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(245, 158, 11, 0.4);
}
.proj-breadcrumb-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #f59e0b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proj-breadcrumb-arrow {
  font-size: 10px;
  color: #64748b;
}

/* ==========================================================================
   NAVEGAÇÃO CENTRAL CINEMATOGRÁFICA (IDENTIDADE VISUAL 1º AD / DECUPANDO)
   ========================================================================== */
.header-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: center !important;
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

.header-nav-item {
  position: relative;
}

.header-nav-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px 6px 10px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: #94a3b8 !important;
  font-family: "Plus Jakarta Sans", -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
  position: relative !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.header-nav-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(232, 197, 71, 0.25) !important;
  transform: translateY(-1px);
}

.header-nav-btn.active {
  color: #f59e0b !important;
  background: linear-gradient(180deg, rgba(255, 107, 53, 0.16) 0%, rgba(232, 197, 71, 0.06) 100%) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 0 14px rgba(255, 107, 53, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.hnav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.header-nav-btn:hover .hnav-icon {
  background: rgba(232, 197, 71, 0.12);
  border-color: rgba(232, 197, 71, 0.3);
}

.header-nav-btn.active .hnav-icon {
  background: rgba(255, 107, 53, 0.2);
  border-color: rgba(255, 107, 53, 0.4);
  box-shadow: 0 0 8px rgba(255, 107, 53, 0.3);
}

.hnav-label {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
}

.hnav-chevron {
  font-size: 9px;
  color: #64748b;
  margin-left: 2px;
  transition: transform 0.25s ease, color 0.2s ease;
}

.header-nav-btn.active .hnav-chevron,
.header-nav-item:hover .hnav-chevron {
  color: #f59e0b;
  transform: rotate(180deg);
}

/* SUBMENU DROPDOWN CINEMATOGRÁFICO */
.header-nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 230px;
  background: #11141c;
  border: 1px solid rgba(232, 197, 71, 0.18);
  border-top: 2.5px solid #ff6b35;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 20px rgba(255, 107, 53, 0.08);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 1000;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.header-nav-dropdown::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.header-nav-item:hover .header-nav-dropdown,
.header-nav-dropdown:hover {
  display: flex !important;
  animation: fadeInDown 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-nav-item:last-child .header-nav-dropdown,
.header-nav-item:nth-last-child(2) .header-nav-dropdown {
  left: auto;
  right: 0;
  transform: none;
}

.header-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  color: #cbd5e1;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  position: relative;
}

.header-dropdown-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  padding-left: 15px;
}

.header-dropdown-item.active {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  font-weight: 600;
  padding-left: 15px;
}

.header-dropdown-item.active::before,
.header-dropdown-item:hover::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: #ff6b35;
  border-radius: 2px;
}

.hdrop-icon {
  font-size: 13px;
  opacity: 0.9;
}

.header-dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 4px 6px;
}

/* ==========================================================================
   MOBILE NAVIGATION DRAWER & TOGGLE BUTTON (TELAS PEQUENAS / MOBILE)
   ========================================================================== */
.header-mobile-toggle-btn {
  display: none;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #f1f5f9;
  padding: 6px 12px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.header-mobile-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(245, 158, 11, 0.5);
  color: #f59e0b;
}
.header-mobile-toggle-btn .hmob-icon {
  font-size: 15px;
  line-height: 1;
}

/* GAVETA / DRAWER MOBILE */
.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}
.mobile-nav-drawer.open {
  display: block !important;
}
.mobile-nav-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: mnavFadeIn 0.2s ease forwards;
}
.mobile-nav-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 88vw;
  max-width: 360px;
  background: #0f131a;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 10px 0 35px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  animation: mnavSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  overflow: hidden;
}
@keyframes mnavFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mnavSlideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}
.mobile-nav-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-nav-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #94a3b8;
  font-size: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.mobile-nav-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}
.mobile-nav-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 30px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.mnav-group-block {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px;
}
.mnav-group-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #f59e0b;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mnav-items-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mnav-item-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
}
.mnav-item-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.08);
}
.mnav-item-btn.active {
  background: rgba(245, 158, 11, 0.14);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.35);
  font-weight: 600;
}
.mnav-item-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
}
.mnav-item-text {
  flex: 1;
}

@media (max-width: 900px) {
  .header-nav {
    display: none !important;
  }
  .header-mobile-toggle-btn {
    display: inline-flex !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .header-nav {
    gap: 4px !important;
  }
  .header-nav-btn {
    padding: 6px 8px !important;
    font-size: 11px !important;
    gap: 5px !important;
  }
  .hnav-chevron {
    display: none !important;
  }
}

/* DIREITA: TOOLS & AVATAR */
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cloud-status-dot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 20px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: #4ade80;
}
.cloud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
}

.header-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
}
.header-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.user-menu-wrapper {
  position: relative;
}
.user-avatar-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.user-avatar-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}
.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #141820;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  display: none;
  flex-direction: column;
  z-index: 1000;
  backdrop-filter: blur(20px);
}
.user-dropdown-menu.open {
  display: flex;
  animation: fadeInDown 0.15s ease;
}
.user-dropdown-header {
  padding: 8px 10px;
}
.user-dropdown-name {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}
.user-dropdown-email {
  font-family: "DM Mono", monospace;
  font-size: 10.5px;
  color: #64748b;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 4px 0;
}
.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.user-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}
.user-dropdown-logout {
  color: #ef4444;
}
.user-dropdown-logout:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

/* Light Mode Overrides */
body.light header.app-header {
  background: #ffffff !important;
  border-bottom-color: #e2e8f0 !important;
}
body.light .header-brand-name {
  color: #0f172a;
}
body.light .header-meta-breadcrumb {
  background: #f8fafc;
  border-color: #e2e8f0;
}
body.light .header-nav-btn {
  color: #64748b;
  background: transparent !important;
  border: none !important;
}
body.light .header-nav-btn:hover {
  color: #0f172a;
}
body.light .header-nav-btn.active {
  color: #d97706 !important;
  background: transparent !important;
  border: none !important;
}
body.light .header-nav-btn.active::after {
  background: #d97706;
}
body.light .header-nav-dropdown,
body.light .user-dropdown-menu {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
body.light .header-dropdown-item,
body.light .user-dropdown-item {
  color: #475569;
}
body.light .header-dropdown-item:hover,
body.light .user-dropdown-item:hover {
  color: #0f172a;
  background: #f1f5f9;
}
body.light .header-dropdown-item.active {
  color: #d97706;
  background: rgba(217, 119, 6, 0.1);
}
body.light .header-icon-btn {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
}
body.light .header-icon-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
/* ==========================================================================
   CARDS DE VEÍCULOS / FROTA DE LOGÍSTICA (DESIGN CINEMATOGRÁFICO)
   ========================================================================== */
.veh-card {
  background: #11141c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.veh-card:hover {
  border-color: rgba(232, 197, 71, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 107, 53, 0.1);
}

.veh-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.veh-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.veh-type-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 16px;
  flex-shrink: 0;
}

.veh-type-van {
  background: rgba(2, 132, 199, 0.15);
  border: 1px solid rgba(2, 132, 199, 0.35);
  color: #38bdf8;
}

.veh-type-carro {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.veh-type-caminhao {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.veh-type-moto {
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.35);
  color: #a78bfa;
}

.veh-type-outro {
  background: rgba(100, 116, 139, 0.15);
  border: 1px solid rgba(100, 116, 139, 0.35);
  color: #94a3b8;
}

.veh-card-name {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.veh-card-badge {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.veh-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.veh-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}

.veh-plate-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #090c10;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px 8px;
  border-radius: 5px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 0.8px;
  width: fit-content;
}

.veh-driver-name {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11.5px;
  color: #cbd5e1;
}

.veh-notes-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
}

.veh-cost-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.veh-cost-tag {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(34, 197, 94, 0.1);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.veh-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 10px;
  margin-top: 4px;
}

.veh-drag-handle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  cursor: grab;
  user-select: none;
  transition: all 0.2s ease;
  width: 100%;
  justify-content: center;
}

.veh-drag-handle:hover {
  background: rgba(255, 107, 53, 0.1);
  border-color: rgba(255, 107, 53, 0.4);
  color: #ff6b35;
}

.veh-drag-handle:active {
  cursor: grabbing;
}

.veh-card-add {
  background: rgba(255, 255, 255, 0.015);
  border: 1.5px dashed rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 160px;
}

.veh-card-add:hover {
  background: rgba(255, 107, 53, 0.04);
  border-color: rgba(255, 107, 53, 0.4);
  transform: translateY(-2px);
}

.veh-add-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #94a3b8;
  transition: all 0.2s ease;
}

.veh-card-add:hover .veh-add-icon-circle {
  background: #ff6b35;
  color: #ffffff;
  border-color: #ff6b35;
  box-shadow: 0 0 12px rgba(255, 107, 53, 0.4);
}

.veh-add-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.veh-add-sub {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: #64748b;
  text-align: center;
}

/* Light Mode Overrides para Veículos */
body.light .veh-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
body.light .veh-card:hover {
  border-color: #f59e0b;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
body.light .veh-card-name {
  color: #0f172a;
}
body.light .veh-plate-box {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}
body.light .veh-driver-name {
  color: #475569;
}
body.light .veh-notes-chip {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
}
body.light .veh-drag-handle {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #64748b;
}
body.light .veh-card-add {
  background: #f8fafc;
  border-color: #cbd5e1;
}
body.light .veh-add-title {
  color: #0f172a;
}
body.light .veh-add-icon-circle {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #64748b;
}

.sidebar {
  width: 260px;
  min-width: 260px;
  background: var(--glass-bg);
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    width 0.25s ease,
    min-width 0.25s ease;
  position: relative;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--glass-shadow);
}
.sidebar.collapsed {
  width: 0;
  min-width: 0;
  border-right: none;
}
.sidebar.collapsed > * {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.sidebar-tab {
  width: 18px;
  min-width: 18px;
  background: var(--glass-bg);
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--glass-shadow);
}
.sidebar-tab:hover {
  background: var(--surface2);
}
.sidebar-tab:hover .sidebar-tab-arrow {
  color: var(--accent2);
}
.sidebar-tab-arrow {
  color: var(--accent);
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  transition: color 0.15s;
  user-select: none;
}
@keyframes sidebar-glow-pulse {
  0%,
  100% {
    text-shadow:
      0 0 4px var(--accent),
      0 0 10px var(--accent),
      0 0 18px rgba(232, 197, 71, 0.4);
    opacity: 0.9;
  }
  50% {
    text-shadow:
      0 0 8px var(--accent),
      0 0 20px var(--accent),
      0 0 35px rgba(232, 197, 71, 0.7);
    opacity: 1;
  }
}
.sidebar-tab-label {
  font-family: "DM Mono", monospace;
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-top: 10px;
  white-space: nowrap;
  user-select: none;
  animation: sidebar-glow-pulse 2.5s ease-in-out infinite;
}
.sidebar-tab:hover .sidebar-tab-label {
  color: var(--accent2);
  text-shadow:
    0 0 8px var(--accent2),
    0 0 22px var(--accent2),
    0 0 40px rgba(255, 107, 53, 0.8);
  animation: none;
  opacity: 1;
}
.sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-add {
  background: var(--accent);
  color: var(--bg);
  border: none;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.btn-add:hover {
  opacity: 0.8;
}
.day-list {
  overflow-y: auto;
  flex: 1;
}
.pm-cta-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  background: linear-gradient(
    135deg,
    rgba(232, 197, 71, 0.13) 0%,
    rgba(232, 197, 71, 0.04) 100%
  );
  border: none;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  cursor: pointer;
  text-align: left;
  transition:
    background 0.18s,
    border-left-width 0.18s;
  position: relative;
  overflow: hidden;
}
.pm-cta-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(232, 197, 71, 0.07) 0%,
    transparent 70%
  );
  pointer-events: none;
}
.pm-cta-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(232, 197, 71, 0.26) 0%,
    rgba(232, 197, 71, 0.1) 100%
  );
  border-left-width: 4px;
}
.pm-cta-btn:hover .pm-cta-arrow {
  transform: translateX(4px);
}
.pm-cta-btn:active {
  background: linear-gradient(
    135deg,
    rgba(232, 197, 71, 0.32) 0%,
    rgba(232, 197, 71, 0.14) 100%
  );
}
.pm-cta-icon {
  width: 34px;
  height: 34px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(232, 197, 71, 0.45);
}
.pm-cta-text {
  flex: 1;
  min-width: 0;
}
.pm-cta-label {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
  letter-spacing: 0.2px;
}
.pm-cta-sub {
  display: block;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.5px;
  margin-top: 3px;
}
.pm-cta-arrow {
  color: var(--accent);
  opacity: 0.7;
  flex-shrink: 0;
  transition: transform 0.18s;
}
.day-item {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  box-sizing: border-box;
  margin-bottom: 0 !important;
}
.day-item:hover {
  background: var(--surface-hover);
}
.day-item.active {
  border: 1.5px solid #E8C547 !important;
  background: var(--surface) !important;
}
.day-item.active::before {
  display: none !important;
}
.day-item-content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 8px;
  padding-left: 12px;
}
.day-num-col {
  flex-shrink: 0;
  min-width: 44px;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.day-item.active .day-num-col {
  color: #E8C547;
}
.day-center-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: 100%;
}
.day-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
}
.day-date-span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.day-scenes-count-span {
  white-space: nowrap;
  opacity: 0.8;
}
.day-scenes-pills-row {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.day-scenes-pills-row::-webkit-scrollbar {
  display: none;
}
.day-item .scene-chip {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
.day-item.active .scene-chip {
  background: #FAEEDA !important;
  border: 1px solid #FAC775 !important;
  color: #854F0B !important;
}
.day-actions-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.btn-exp-day, .btn-del-day {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: background 0.15s, color 0.15s;
}
.btn-del-day:hover {
  background: rgba(230, 57, 70, 0.15) !important;
  color: #e63946 !important;
}
.btn-exp-day:hover {
  background: var(--surface2) !important;
  color: var(--text) !important;
}
.day-drag-handle {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  color: #2a2a2a;
  cursor: grab;
  padding: 6px 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  z-index: 2;
}
.day-drag-handle span {
  display: block;
  width: 8px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.day-item:hover .day-drag-handle {
  opacity: 1;
  color: #888;
}
.day-drag-handle:hover {
  color: var(--accent) !important;
}
.day-drag-handle:active {
  cursor: grabbing;
}
.day-item.dragging .day-drag-handle {
  cursor: grabbing;
}
.day-item.dragging {
  opacity: 0.4;
  background: var(--surface2);
}
.day-item.drag-over-top::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  z-index: 10;
  border-radius: 2px;
}
.day-item.drag-over-bottom::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  z-index: 10;
  border-radius: 2px;
}
.day-item.drag-over-scene {
  background: rgba(232, 197, 71, 0.2) !important;
  outline: 2px dashed var(--accent) !important;
  outline-offset: -2px;
}
.day-list-section-header {
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 16px 4px 16px;
  opacity: 0.8;
}
.day-item-gravado {
  opacity: 0.8;
}
.day-item-gravado .day-num-col {
  color: #3a7d5a;
}
.day-item-gravado.active .day-num-col {
  color: var(--accent);
}
.scene-chip {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: 500;
}
.chip-id {
  background: var(--chip-id-bg);
  color: var(--muted);
}
.chip-int-day {
  background: #2a2a1e;
  color: #c8b84a;
}
.chip-ext-day {
  background: #2a2a18;
  color: #e8c547;
}
.chip-int-night {
  background: #1a2235;
  color: #6b9fd4;
}
.chip-ext-night {
  background: #1a2a22;
  color: #5aab7a;
}
.main-content {
  flex: 1;
  overflow-y: auto;
  background: transparent;
}
.section {
  display: none;
  padding: 28px 32px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--glass-shadow);
}
.section.active {
  display: block;
  opacity: 1;
  animation: fadeIn 0.25s ease forwards;
}
.od-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.od-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 48px;
  letter-spacing: 2px;
  line-height: 1;
  color: var(--text);
}
.od-title .day-label {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--accent);
  display: block;
  margin-bottom: 4px;
}
.od-meta-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.meta-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.meta-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.meta-value {
  font-family: "DM Mono", monospace;
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
}
.meta-input {
  background: none;
  border: none;
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: 15px;
  width: 100%;
  outline: none;
  font-weight: 500;
}
.meta-input::placeholder {
  color: var(--muted);
}
.section-label {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.scenes-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 28px;
}
.scenes-table th {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.scenes-table td {
  padding: 10px 12px;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  border-bottom: 1px solid var(--scene-row-alt);
  vertical-align: middle;
}
.scenes-table tr:hover td {
  background: var(--surface);
}
.scene-type-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.badge-int-day {
  background: var(--badge-int-day-bg);
  color: var(--badge-int-day-text);
  border: 1px solid var(--badge-int-day-border);
}
.badge-ext-day {
  background: var(--badge-ext-day-bg);
  color: var(--badge-ext-day-text);
  border: 1px solid var(--badge-ext-day-border);
}
.badge-int-night {
  background: var(--badge-int-night-bg);
  color: var(--badge-int-night-text);
  border: 1px solid var(--badge-int-night-border);
}
.badge-ext-night {
  background: var(--badge-ext-night-bg);
  color: var(--badge-ext-night-text);
  border: 1px solid var(--badge-ext-night-border);
}
.pages-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pages-fill {
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  min-width: 4px;
}
.cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.cast-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  position: relative;
  transition: border-color 0.2s;
}
.cast-card:hover {
  border-color: var(--accent);
}
.cast-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 32px;
  color: var(--border);
  position: absolute;
  top: 10px;
  right: 14px;
  line-height: 1;
}
.cast-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.cast-char {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 6px;
}
.cast-call {
  font-family: "DM Mono", monospace;
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
}
.cast-call-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.timing-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 28px;
}
.timing-cell {
  background: var(--surface);
  padding: 14px 16px;
  text-align: center;
}
.timing-cell-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.timing-cell-value {
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--text);
}
.timing-cell.accent-cell {
  background: #1a1a10;
}
.timing-cell.accent-cell .timing-cell-value {
  color: var(--accent);
}
.strip-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  align-items: center;
}
.strip-filter {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.strip-filter.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.stripboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.strip-row {
  display: grid;
  grid-template-columns: 70px 100px 70px 2fr 1.2fr 1.2fr 120px;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.03);
}
.strip-row:hover {
  transform: translateX(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.strip-cell {
  padding: 12px 14px;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  display: flex;
  align-items: center;
  background: transparent;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.strip-cell:last-child {
  border-right: none;
}
.strip-row.int-day {
  background: var(--strip-int-day-bg);
  color: var(--strip-int-day-text);
  border-left: 4px solid var(--strip-int-day-text);
}
.strip-row.ext-day {
  background: var(--strip-ext-day-bg);
  color: var(--strip-ext-day-text);
  border-left: 4px solid var(--strip-ext-day-text);
}
.strip-row.int-night {
  background: var(--strip-int-night-bg);
  color: var(--strip-int-night-text);
  border-left: 4px solid var(--strip-int-night-text);
}
.strip-row.ext-night {
  background: var(--strip-ext-night-bg);
  color: var(--strip-ext-night-text);
  border-left: 4px solid var(--strip-ext-night-text);
}
.strip-row.day-break {
  background: none !important;
  border: none !important;
  cursor: default;
  box-shadow: none !important;
  margin-top: 14px;
  margin-bottom: 4px;
}
.strip-row.day-break:hover {
  transform: none;
}
.strip-unalloc-break {
  grid-column: 1 / -1;
  padding: 12px 18px;
  background: rgba(255, 107, 53, 0.08);
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--accent2);
  border-left: 4px solid var(--accent2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.strip-unalloc-break span {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 1px;
}
.strip-row.unallocated {
  opacity: 0.65;
  border-left: 4px dashed var(--muted);
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--muted) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.strip-row.unallocated:hover {
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.04) !important;
}
#premount-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 900;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 32px 16px;
}
#premount-overlay.open {
  display: flex;
}
#premount-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 900px;
  margin: auto;
  overflow: hidden;
}
.pm-header {
  background: var(--surface2);
  padding: 22px 28px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pm-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--text);
}
.pm-sub {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1.5px;
  margin-top: 2px;
}
.pm-body {
  padding: 24px 28px;
}
.pm-section-title {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.pm-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.pm-config-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.pm-config-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.pm-config-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: 13px;
}
.pm-config-input:focus {
  outline: none;
  border-color: var(--accent);
}
.pm-toggle {
  width: 36px;
  height: 20px;
  background: var(--border);
  border-radius: 10px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.pm-toggle.on {
  background: var(--accent);
}
.pm-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.2s;
}
.pm-toggle.on::after {
  left: 19px;
}
.pm-rules-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.pm-rule-chip {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--bg);
}
.pm-rule-chip.active {
  border-color: rgba(232, 197, 71, 0.4);
  color: var(--accent);
  background: rgba(232, 197, 71, 0.08);
}
.pm-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}
.pm-idle-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.5;
}
.pm-idle-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--muted);
}
.pm-idle-sub {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.7;
}
.pm-loader {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pm-spin 0.7s linear infinite;
}
@keyframes pm-spin {
  to {
    transform: rotate(360deg);
  }
}
.pm-stats-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pm-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
}
.pm-stat-pill b {
  color: var(--accent);
}
.pm-alert {
  background: rgba(232, 197, 71, 0.08);
  border: 1px solid rgba(232, 197, 71, 0.25);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 16px;
}
.pm-preview-day {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s ease;
}
.pm-preview-day.pm-drag-hover {
  border: 1px dashed var(--accent) !important;
  background: rgba(255, 107, 53, 0.05) !important;
  transform: scale(1.005);
}
.pm-scene-row.pm-dragging {
  opacity: 0.4;
  border: 1px dashed var(--accent) !important;
}
.pm-inline-edit-wrapper {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pm-edit-icon {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  color: var(--muted);
  opacity: 0.35;
  transition: opacity 0.2s, color 0.2s;
  pointer-events: none;
  z-index: 2;
}
.pm-inline-edit-wrapper:hover .pm-edit-icon {
  opacity: 0.9;
  color: var(--accent);
}
.pm-inline-input {
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  padding: 2px 6px 2px 14px; /* Espaço para o lápis na esquerda */
  text-align: right;
  outline: none;
  transition: all 0.2s ease;
  width: 65px; /* Ajustado para box-sizing border-box e com espaço suficiente */
  position: relative;
  z-index: 1;
}
.pm-inline-input:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 107, 53, 0.5);
}
.pm-inline-input:focus {
  background: var(--surface2);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
}
.pm-pages-display {
  display: inline-block;
  box-sizing: border-box;
  background: rgba(255, 107, 53, 0.03);
  border: 1px solid rgba(255, 107, 53, 0.15);
  border-radius: 6px;
  color: var(--accent);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px 2px 14px; /* Espaço para o lápis na esquerda */
  text-align: right;
  width: 65px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-pages-display:hover {
  background: rgba(255, 107, 53, 0.07);
  border-color: rgba(255, 107, 53, 0.5);
}
.pm-pages-popover-container {
  position: absolute;
  z-index: 11000;
  background: rgba(26, 26, 26, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  padding: 12px;
  width: 300px;
  display: none;
  flex-direction: column;
  gap: 8px;
  font-family: sans-serif;
  pointer-events: auto;
}
.pm-popover-header {
  font-family: "Bebas Neue", sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--text);
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 4px;
}
.pm-popover-section-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.5px;
}
.pm-popover-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pm-popover-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  padding: 5px 0;
  width: 28px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}
.pm-popover-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 107, 53, 0.3);
}
.pm-popover-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg) !important;
  font-weight: 700;
}
.pm-popover-btn.fraction-btn {
  width: 31px;
  font-size: 9px;
}
.pm-popover-help {
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 6px;
  font-size: 8.5px;
  color: var(--muted);
  line-height: 1.35;
  font-family: sans-serif;
}
.pm-popover-help strong {
  color: var(--accent);
}
.pm-inline-time-container {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
}
.pm-time-input {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  color: var(--muted);
  width: 65px; /* Alinhado com o input de páginas */
}
.pm-time-input.pm-is-manual {
  color: var(--accent) !important;
  border-color: rgba(255, 107, 53, 0.5) !important;
  background: rgba(255, 107, 53, 0.08) !important;
  font-weight: 700;
}
.pm-time-input.pm-is-manual:hover {
  background: rgba(255, 107, 53, 0.12) !important;
}
.pm-end-time-display {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  color: var(--muted);
  padding-left: 2px;
}
.pm-day-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.pm-day-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--accent);
  min-width: 56px;
}
.pm-day-meta {
  flex: 1;
}
.pm-day-info {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
}
.pm-day-locs {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  color: var(--text);
  margin-top: 2px;
  opacity: 0.7;
}
.pm-day-warn {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  color: var(--accent2);
  background: rgba(255, 107, 53, 0.12);
  border: 1px solid rgba(255, 107, 53, 0.25);
  border-radius: 4px;
  padding: 2px 7px;
}
.pm-justif {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 14px;
  background: rgba(232, 197, 71, 0.05);
  border-bottom: 1px solid var(--border);
}
.pm-justif-icon {
  font-size: 12px;
  margin-top: 1px;
  flex-shrink: 0;
  opacity: 0.7;
}
.pm-justif-text {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.6;
  font-style: italic;
}
.pm-justif-text b {
  color: var(--accent);
  font-style: normal;
}
.pm-schedule-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin-bottom: 2px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  flex-wrap: wrap;
}
.pm-sched-time {
  color: var(--text);
  font-weight: 600;
}
.pm-sched-sep {
  opacity: 0.35;
}
.pm-banco-neg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 107, 53, 0.12);
  border: 1px solid rgba(255, 107, 53, 0.35);
  border-radius: 6px;
  padding: 2px 8px;
  color: #ff8055;
  font-size: 9px;
  font-family: "DM Mono", monospace;
  font-weight: 600;
}
.pm-banco-comp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(100, 200, 120, 0.1);
  border: 1px solid rgba(100, 200, 120, 0.3);
  border-radius: 6px;
  padding: 2px 8px;
  color: #6dc888;
  font-size: 9px;
  font-family: "DM Mono", monospace;
  font-weight: 600;
}
.pm-light-block {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-family: "DM Mono", monospace;
  background: rgba(232, 197, 71, 0.08);
  border: 1px solid rgba(232, 197, 71, 0.18);
  color: var(--muted);
  white-space: nowrap;
}
.pm-cover-tag {
  font-family: "DM Mono", monospace;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(74, 111, 165, 0.2);
  border: 1px solid rgba(74, 111, 165, 0.3);
  color: #7aaed4;
  margin-left: 6px;
}
.pm-scene-row {
  display: grid;
  grid-template-columns: 44px 84px 1fr 180px 120px;
  gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--surface2);
  font-size: 12px;
  align-items: center;
}
.pm-scene-row:last-child {
  border-bottom: none;
}
.pm-scene-row:hover {
  background: var(--surface);
}
.pm-scene-row.pm-drag-before {
  border-top: 2px solid var(--accent) !important;
}
.pm-scene-row.pm-drag-after {
  border-bottom: 2px solid var(--accent) !important;
}
.pm-scene-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 17px;
  color: var(--text);
}
.pm-scene-desc {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 12px;
}
.pm-scene-loc {
  font-size: 11px;
  color: var(--text);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-scene-pages {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--accent);
}
.pm-scene-pages-grid {
  display: grid;
  grid-template-columns: 65px 50px;
  gap: 4px 6px;
  justify-content: end;
  align-items: center;
}
.pm-grid-input-col {
  display: flex;
  justify-content: flex-end;
}
.pm-grid-extra-col {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
}
.pm-time-separator {
  color: var(--muted);
  opacity: 0.6;
}
.pm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  gap: 10px;
}
.day-break-cell {
  grid-column: 1 / -1;
  padding: 12px 16px;
  background: var(--surface2);
  font-family: "Bebas Neue", sans-serif;
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--accent);
  border-left: 3px solid var(--accent);
  display: flex;
  align-items: center;
  gap: 12px;
}
.day-break-cell span {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 1px;
}

/* Checkbox Customizado para o Stripboard */
.strip-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--surface2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.strip-checkbox:hover {
  border-color: var(--accent);
  box-shadow: 0 0 5px rgba(58, 125, 90, 0.2);
}
.strip-checkbox:checked {
  background: #3a7d5a;
  border-color: #3a7d5a;
}
.strip-checkbox:checked::after {
  content: "✓";
  color: #fff;
  font-size: 10px;
  font-weight: bold;
}

.strip-header {
  display: grid;
  grid-template-columns: 70px 100px 70px 2fr 1.2fr 1.2fr 120px;
  gap: 0;
  margin-bottom: 8px;
  padding: 0 2px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}
.strip-header-cell {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px;
}

/* Detalhes de Células do Stripboard */
.strip-cell-cena {
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 1.5px;
}
.strip-cell-tipo {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
}
.strip-cell-paginas {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: bold;
}
.strip-cell-desc {
  font-family: var(--font-main, system-ui, sans-serif);
  font-size: 12px;
  opacity: 0.95;
}
.strip-cell-loc {
  font-family: var(--font-main, system-ui, sans-serif);
  font-size: 12px;
  opacity: 0.95;
}
.strip-cell-elenco {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  opacity: 0.85;
}
.strip-cell-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.empty-day-row {
  opacity: 0.55;
  cursor: default;
  background: rgba(255, 255, 255, 0.01) !important;
  box-shadow: none !important;
  border-left: 4px solid var(--border) !important;
}
.strip-cell-empty {
  grid-column: 1 / -1;
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 12px 16px;
  border: none !important;
}
.unalloc-label {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.crew-table {
  width: 100%;
  border-collapse: collapse;
}
.crew-table th {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.crew-table td {
  padding: 12px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--scene-row-alt);
  vertical-align: middle;
}
.crew-table tr:hover td {
  background: var(--surface);
}
.dept-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}
.dept-direcao {
  background: var(--dept-direcao-bg);
  color: var(--accent);
}
.dept-camera {
  background: var(--dept-camera-bg);
  color: #7aaed4;
}
.dept-fotografia {
  background: var(--dept-camera-bg);
  color: #7aaed4;
}
.dept-som {
  background: var(--dept-som-bg);
  color: #c47aff;
}
.dept-arte {
  background: var(--dept-arte-bg);
  color: #6ab88a;
}
.dept-producao {
  background: var(--dept-producao-bg);
  color: var(--accent2);
}
.dept-figurino {
  background: #1e1a28;
  color: #d4a0ff;
}
.dept-maquiagem {
  background: #1e1620;
  color: #ff9fd4;
}
.dept-montagem {
  background: #1a1e1e;
  color: #6ad4d4;
}
.dept-efeitos {
  background: #201a10;
  color: #ffb347;
}
.dept-stunt {
  background: #201010;
  color: #ff6b6b;
}
.dept-casting {
  background: #101820;
  color: #6baeff;
}
.dept-script {
  background: #181818;
  color: #aaaaaa;
}
.contact-info {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--muted);
}
.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 10px 20px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.2s;
}
.btn-primary:hover {
  opacity: 0.85;
}
.btn-secondary {
  background: none;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 10px 20px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary:hover {
  color: var(--text);
  border-color: var(--text);
}
.actions-row {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}
.stats-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.stat-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}
.stat-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 36px;
  color: var(--accent);
  line-height: 1;
}
.stat-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.progress-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}
.progress-label {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.progress-bar-bg {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.section.active {
  animation: fadeIn 0.25s ease;
}
.od-topbar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.production-badge {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
}
.revision-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent2);
  display: inline-block;
  margin-right: 6px;
}
select.meta-input {
  -webkit-appearance: none;
  background: none;
}
.weather-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
}
.weather-search-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 18px;
}
.city-autocomplete-wrap {
  position: relative;
  width: 280px;
}
.weather-city-input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}
.weather-city-input:focus {
  border-color: var(--accent);
}
.city-dropdown {
  position: absolute;
  top: calc(100%+4px);
  left: 0;
  right: 0;
  background: var(--city-dropdown-bg);
  border: 1px solid var(--accent);
  border-radius: 8px;
  z-index: 200;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  display: none;
}
.city-dropdown.open {
  display: block;
}
.city-option {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.city-option:last-child {
  border-bottom: none;
}
.city-option:hover,
.city-option.focused {
  background: var(--surface2);
}
.city-option-name {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.city-option-sub {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}
.city-option-sub em {
  color: var(--accent);
  font-style: normal;
}
.city-dropdown-msg {
  padding: 12px 14px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 1px;
}
.weather-date-input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s;
  color-scheme: dark;
}
.weather-date-input:focus {
  border-color: var(--accent);
}
.btn-weather-search {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 8px 18px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.btn-weather-search:hover {
  opacity: 0.85;
}
.btn-weather-search:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.weather-cards {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
}
.scene-solar-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(232, 197, 71, 0.08);
  border: 1px solid rgba(232, 197, 71, 0.25);
  color: var(--accent);
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  font-weight: bold;
}
.weather-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
  transition: border-color 0.3s;
}
.weather-card.loaded {
  border-color: var(--weather-loaded-border);
}
.wcard-icon {
  font-size: 24px;
  margin-bottom: 6px;
}
.wcard-label {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #a5a5b8;
  margin-bottom: 5px;
  font-weight: 600;
}
.wcard-value {
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  color: var(--text);
  letter-spacing: 0.5px;
  line-height: 1.1;
}
#wval-solar-pos,
#wval-golden-hour {
  font-size: 16px;
  letter-spacing: 0.5px;
}
.wcard-value.accent {
  color: var(--accent);
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.theme-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s;
  white-space: nowrap;
}
.theme-btn:hover {
  background: var(--border);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.theme-btn:active {
  transform: translateY(0);
}
.theme-btn-icon {
  font-size: 16px;
  line-height: 1;
  transition:
    transform 0.4s ease,
    color 0.3s ease;
  color: var(--muted);
}
body:not(.light) .theme-btn-icon {
  color: var(--accent);
}
body.light .theme-btn-icon {
  color: var(--text);
}
.theme-btn:hover .theme-btn-icon {
  transform: rotate(20deg) scale(1.2);
}
.theme-btn-label {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 500;
}
body.light .theme-btn {
  background: #e8e4d8;
  border-color: #c8c4b0;
}
body.light .theme-btn:hover {
  background: #d8d4c8;
  border-color: var(--accent);
}
.weather-card.loading .wcard-value {
  animation: pulse 1s infinite;
}
.mod-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.mod-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 32px;
  letter-spacing: 2px;
}
.mod-sub {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.mod-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.form-grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.full-card {
  grid-column: 1/-1;
}
.card-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.card-input {
  background: none;
  border: none;
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: 13px;
  width: 100%;
  outline: none;
}
.card-input::placeholder {
  color: var(--muted);
}
.card-textarea {
  background: none;
  border: none;
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  width: 100%;
  outline: none;
  resize: vertical;
  line-height: 1.6;
}
.card-select {
  background: none;
  border: none;
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: 13px;
  width: 100%;
  outline: none;
  -webkit-appearance: none;
}
.mod-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}
.mod-table th {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.mod-table td {
  padding: 11px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--scene-row-alt);
  vertical-align: middle;
}
.mod-table tr:hover td {
  background: var(--surface);
}
.tag-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1px;
  margin: 1px;
}
.tag-green {
  background: #1a2820;
  color: #6ab88a;
  border: 1px solid #253828;
}
.tag-blue {
  background: #1a2030;
  color: #7aaed4;
  border: 1px solid #253050;
}
.tag-yellow {
  background: #2a2a14;
  color: #e8c547;
  border: 1px solid #3a3a22;
}
.tag-red {
  background: #2a1414;
  color: #e87a7a;
  border: 1px solid #3a2222;
}
body.light .tag-green {
  background: #d8f2e4;
  color: #1a6040;
  border-color: #90d0b0;
}
body.light .tag-blue {
  background: #dde8f8;
  color: #2a5a8a;
  border-color: #aac8e8;
}
body.light .tag-yellow {
  background: #fef8d0;
  color: #8a6e00;
  border-color: #e0d070;
}
body.light .tag-red {
  background: #fdecea;
  color: #c04040;
  border-color: #e8b0b0;
}
.gmodal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
}
.gmodal-overlay.open {
  display: flex;
}
.gmodal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  width: 680px;
  max-width: 96vw;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn 0.22s ease;
}
.gmodal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.gmodal-title-top {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.gmodal-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 26px;
  letter-spacing: 2px;
}
.gmodal-close {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.gmodal-error {
  display: none;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--accent2);
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--modal-error-bg);
  border-radius: 6px;
  border-left: 3px solid var(--accent2);
}
.gmodal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.roteiro-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  height: calc(100vh - 200px);
  min-height: 500px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.roteiro-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.roteiro-sidebar-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  flex-shrink: 0;
}
.roteiro-scene-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.roteiro-scene-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.roteiro-scene-row:hover {
  background: var(--surface2);
}
.roteiro-scene-row.active {
  background: var(--surface2);
  border-left: 3px solid var(--accent);
  padding-left: 7px;
}
.roteiro-scene-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  color: var(--accent);
  line-height: 1;
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.roteiro-scene-info {
  flex: 1;
  min-width: 0;
}
.roteiro-scene-desc {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roteiro-scene-loc {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.roteiro-status-ok {
  color: #6ab88a;
  font-size: 13px;
  flex-shrink: 0;
}
.roteiro-status-vazio {
  color: var(--muted);
  font-size: 13px;
  flex-shrink: 0;
}
.roteiro-drag-handle {
  color: var(--border);
  font-size: 12px;
  cursor: grab;
  flex-shrink: 0;
  padding: 0 2px;
  transition: color 0.15s;
  line-height: 1;
}
.roteiro-scene-row:hover .roteiro-drag-handle {
  color: var(--muted);
}
.roteiro-scene-row.dragging {
  opacity: 0.4;
}
.roteiro-scene-row.drag-over-top {
  border-top: 2px solid var(--accent);
}
.roteiro-scene-row.drag-over-bottom {
  border-bottom: 2px solid var(--accent);
}
.roteiro-editor {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
  position: relative;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}
.re-header {
  flex-shrink: 0;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 52px;
  box-sizing: border-box;
}
.re-header-center-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 3px;
  max-width: 65%;
  min-width: 0;
  margin: 0 auto;
}
.re-header-title-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.re-num-block {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.re-num-label {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
}
.re-num-val {
  font-family: "DM Sans", sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--accent);
}
.re-divider-v {
  width: 1px;
  background: var(--border);
  height: 14px;
  align-self: center;
  flex-shrink: 0;
}
.re-dot-separator {
  color: var(--muted);
  font-size: 12px;
  font-weight: normal;
  user-select: none;
  flex-shrink: 0;
}
.re-slugline {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
  flex-shrink: 0;
}
.re-loc-line {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  max-width: 350px;
}
.re-desc-line {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.re-badges {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.re-dn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
}
.re-dn-dia {
  background: #2a2a14;
  color: #e8c547;
  border: 1px solid #3a3a22;
}
.re-dn-noite {
  background: #141b28;
  color: #7aaed4;
  border: 1px solid #1f2840;
}
.re-dn-amanhecer {
  background: #2a1e10;
  color: #f4a261;
  border: 1px solid #3a2e1a;
}
.re-dn-anoitecer {
  background: #2a1810;
  color: #e76f51;
  border: 1px solid #3a2518;
}
.re-dn-madrugada {
  background: #1e1430;
  color: #b08ed4;
  border: 1px solid #2a1e42;
}
.re-pages-badge {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px 10px;
  letter-spacing: 0.5px;
}
body.light .re-dn-dia {
  background: #fef9d0;
  color: #8a6e00;
  border-color: #e0d070;
}
body.light .re-dn-noite {
  background: #dde8f8;
  color: #2a5a8a;
  border-color: #aac8e8;
}
body.light .re-dn-amanhecer {
  background: #fdecd8;
  color: #b05010;
  border-color: #e8c098;
}
body.light .re-dn-anoitecer {
  background: #fde4d8;
  color: #a03010;
  border-color: #e8b098;
}
body.light .re-dn-madrugada {
  background: #ede8f8;
  color: #5a3a8a;
  border-color: #c0aae8;
}
.roteiro-body {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
  position: relative;
}
.roteiro-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.roteiro-tab {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 9px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  transition:
    color 0.15s,
    border-color 0.15s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.roteiro-tab:hover {
  color: var(--text);
}
.roteiro-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* ── Roteiro View: fundo escuro + folha de papel centralizada ── */
.roteiro-view {
  flex: 1;
  overflow-y: auto;
  /* Fundo escuro idêntico ao overlay do modal */
  background: rgba(14, 14, 20, 0.97);
  display: none;
  min-height: 0;
  /* Centraliza a folha de papel */
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 24px 48px;
  box-sizing: border-box;
}
.roteiro-view.active {
  display: flex;
}

/* Folha de papel branca — mesma proporção Letter do modal */
.roteiro-paper {
  background: #fff;
  width: 816px;          /* 8.5" @ 96dpi */
  min-width: 816px;
  min-height: 1056px;    /* 11" @ 96dpi */
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.55);
  flex-shrink: 0;
  /* Margens padrão de roteiro:
     top/bottom = 1in (96px)
     left       = 1.5in (144px) — encadernação
     right      = 1in  (96px)  */
  padding: 96px 96px 96px 144px;
  box-sizing: border-box;
  /* Tipografia idêntica ao textarea do modal */
  font-family: 'Courier Prime', Courier, 'Courier New', monospace;
  font-size: 12pt;
  line-height: 1.4;
  color: #111;
  position: relative;
}

/* Paginação Google Docs (Preview e Edição) */
.roteiro-pages-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.roteiro-paper-page, .spe-paper-page-edit {
  background: #fff;
  width: 816px;
  min-width: 816px;
  height: 1056px;
  min-height: 1056px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  border-radius: 8px;
  margin-bottom: 32px;
  padding: 96px 96px 96px 144px;
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
  /* Tipografia */
  font-family: 'Courier Prime', Courier, 'Courier New', monospace;
  font-size: 12pt;
  line-height: 1.15;
  color: #111;
}

.roteiro-paper-page::before, .spe-paper-page-edit::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 144px;
  width: 1px;
  background: rgba(200, 200, 255, 0.15);
  pointer-events: none;
}

/* Modo Escuro (papel preto fosco / matte charcoal, menos agressivo) para o roteiro */
.roteiro-dark-mode .roteiro-paper,
.roteiro-dark-mode .roteiro-paper-page,
.roteiro-dark-mode .spe-paper-page-edit {
  background: #1e1e24 !important;
  color: #e4e4e7 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

.roteiro-dark-mode .roteiro-paper::before,
.roteiro-dark-mode .roteiro-paper-page::before,
.roteiro-dark-mode .spe-paper-page-edit::before {
  background: rgba(255, 255, 255, 0.07) !important;
}

.roteiro-dark-mode .spe-page-textarea {
  color: #e4e4e7 !important;
  caret-color: var(--accent, #f97316) !important;
  background: transparent !important;
}

.roteiro-dark-mode .roteiro-paper *,
.roteiro-dark-mode .roteiro-paper-page *,
.roteiro-dark-mode .spe-paper-page-edit * {
  color: #e4e4e7 !important;
}

.roteiro-dark-mode .roteiro-paper .rs-slugline,
.roteiro-dark-mode .roteiro-paper-page .rs-slugline,
.roteiro-dark-mode .roteiro-paper .rs-character,
.roteiro-dark-mode .roteiro-paper-page .rs-character {
  color: #f4f4f5 !important;
}

.roteiro-dark-mode .roteiro-paper .rs-paren,
.roteiro-dark-mode .roteiro-paper-page .rs-paren {
  color: #a1a1aa !important;
}

.roteiro-dark-mode .roteiro-paper .rs-transition,
.roteiro-dark-mode .roteiro-paper-page .rs-transition,
.roteiro-dark-mode .roteiro-paper .rs-note,
.roteiro-dark-mode .roteiro-paper-page .rs-note {
  color: #8e8e93 !important;
}

.roteiro-dark-mode .roteiro-paper-page > div[style*="border-left"] {
  border-left-color: rgba(255, 255, 255, 0.08) !important;
}

.roteiro-dark-mode .roteiro-paper-page > div[style*="bottom:32px"] {
  color: #71717a !important;
}


.spe-page-textarea {
  display: block;
  width: 100%;
  height: 100%;
  padding: 96px 96px 96px 144px;
  box-sizing: border-box;
  font-family: 'Courier Prime', Courier, 'Courier New', monospace;
  font-size: 12pt;
  line-height: 1.15;
  color: #111;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  tab-size: 4;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* Linha guia de margem esquerda (1.5") — igual ao modal */
.roteiro-paper::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 144px;
  width: 1px;
  background: rgba(200, 200, 255, 0.15);
  pointer-events: none;
}

/* ── Elementos de roteiro — replicam as colunas do textarea do modal ── */

/* SLUGLINE: maiúsculas, sem recuo, espaço generoso antes/depois */
.rs-slugline {
  font-family: 'Courier Prime', Courier, 'Courier New', monospace;
  font-size: 12pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 20px 0 10px;
  line-height: 1.15;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.roteiro-paper .rs-slugline, .roteiro-paper-page .rs-slugline { color: #111; }

/* AÇÃO: sem recuo (herda o padding da folha), espaço abaixo */
.rs-action {
  font-family: 'Courier Prime', Courier, 'Courier New', monospace;
  font-size: 12pt;
  margin: 0 0 10px;
  line-height: 1.15;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  text-align: left;
}
.roteiro-paper .rs-action, .roteiro-paper-page .rs-action { color: #111; }

/* PERSONAGEM: centrado, maiúsculas, negrito, espaço antes */
.rs-character {
  font-family: 'Courier Prime', Courier, 'Courier New', monospace;
  font-size: 12pt;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  margin: 16px 0 0;
  line-height: 1.15;
  color: var(--text);
}
.roteiro-paper .rs-character, .roteiro-paper-page .rs-character { color: #111; }

/* PARÊNTESES: centrado, itálico, compacto */
.rs-paren {
  font-family: 'Courier Prime', Courier, 'Courier New', monospace;
  font-size: 12pt;
  font-style: italic;
  text-align: center;
  margin: 0 0 2px;
  line-height: 1.15;
  color: var(--muted);
}
.roteiro-paper .rs-paren, .roteiro-paper-page .rs-paren { color: #555; }

/* DIÁLOGO: recuado 15% da esquerda, 20% da direita → coluna central */
.rs-dialogue {
  font-family: 'Courier Prime', Courier, 'Courier New', monospace;
  font-size: 12pt;
  text-align: left;
  margin: 0 20% 10px 15%;
  line-height: 1.15;
  color: var(--text);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}
.roteiro-paper .rs-dialogue, .roteiro-paper-page .rs-dialogue { color: #111; }

.rs-transition {
  text-align: right;
  text-transform: uppercase;
  color: var(--muted);
  margin: 10px 0 10px;
  font-size: 11px;
  letter-spacing: 1px;
}
.roteiro-paper .rs-transition, .roteiro-paper-page .rs-transition { color: #777; }
.rs-note {
  color: var(--muted);
  font-style: italic;
  margin: 0 0 12px;
  font-size: 11px;
}
.roteiro-paper .rs-note, .roteiro-paper-page .rs-note { color: #888; }
.rs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  gap: 10px;
  opacity: 0.5;
}
.rs-empty-icon {
  font-size: 32px;
}
.rs-empty-txt {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
}
/* Dentro da folha branca o estado vazio fica legível */
.roteiro-paper .rs-empty-txt { color: #888; }
textarea.roteiro-area {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.85;
  padding: 24px 10%;
  resize: none;
  outline: none;
  transition: none;
  min-height: 0;
  display: none;
}
textarea.roteiro-area.active {
  display: block;
}
textarea.roteiro-area:focus {
  background: var(--surface);
}
.roteiro-editor-footer {
  padding: 10px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
  margin-bottom: 20px;
}
.upload-zone:hover {
  border-color: var(--accent);
  background: var(--surface2);
}
.upload-zone-icon {
  font-size: 32px;
  margin-bottom: 10px;
}
.upload-zone-label {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 1px;
}
.upload-zone input[type="file"] {
  display: none;
}
.fr-nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s;
  border-left: 3px solid var(--accent);
  background: rgba(232, 197, 71, 0.06);
  margin-bottom: 2px;
  flex-shrink: 0;
}
.fr-nav-row:hover {
  background: rgba(232, 197, 71, 0.13);
}
.fr-nav-row.active {
  background: rgba(232, 197, 71, 0.18);
  border-left-width: 4px;
}
.fr-nav-icon {
  font-size: 20px;
  min-width: 26px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}
.fr-nav-info {
  flex: 1;
  min-width: 0;
}
.fr-nav-label {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.fr-nav-sub {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 1px;
}
.fr-nav-sep {
  height: 1px;
  background: var(--border);
  margin: 2px 0 4px;
}
.fr-panel {
  display: none;
  flex-direction: column;
  background: var(--bg) !important;
  overflow: hidden;
  height: 100%;
  max-height: 100%;
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: 12px;
  box-sizing: border-box;
}
.fr-panel.open {
  display: flex;
}
.fr-phead {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.fr-phead-icon {
  font-size: 34px;
  line-height: 1;
}
.fr-phead-meta {
  flex: 1;
  min-width: 0;
}
.fr-phead-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 26px;
  letter-spacing: 2px;
  color: var(--accent);
  line-height: 1;
}
.fr-phead-sub {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 3px;
}
.fr-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(232, 197, 71, 0.1);
  border: 1px solid rgba(232, 197, 71, 0.3);
  border-radius: 20px;
  padding: 3px 11px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 1px;
}
.fr-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 30px 24px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.fr-columns {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 1025px) {
  .fr-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
  }
}
.fr-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fr-sec {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin: 18px 0 13px;
}
.fr-sec:first-child {
  margin-top: 0;
}
.fr-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.fr-grid1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.fr-field {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 0.2s;
}
.fr-field:focus-within {
  border-color: var(--accent);
}
.fr-flabel {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.fr-finput {
  background: none;
  border: none;
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  width: 100%;
  outline: none;
  line-height: 1.5;
}
.fr-finput::placeholder {
  color: var(--muted);
}
.fr-fselect {
  background: none;
  border: none;
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  width: 100%;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
}
.fr-fselect option {
  background: var(--surface);
  color: var(--text);
}
.fr-foot {
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  z-index: 5;
}
#frprev-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 900;
  align-items: center;
  justify-content: center;
}
#frprev-overlay.open {
  display: flex;
}
#frprev-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 700px;
  max-width: 96vw;
  max-height: 93vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#frprev-iframe {
  flex: 1;
  border: none;
  min-height: 580px;
  background: #fff;
}
.loc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 12px;
  transition:
    border-color 0.2s,
    transform 0.15s;
  cursor: pointer;
}
.loc-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.loc-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.loc-card-name {
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
}
.loc-card-addr {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}
.loc-card-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.loc-meta-item {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
}
.loc-meta-item strong {
  color: var(--text);
}
.loc-maps-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 5px 10px;
  border-radius: 5px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.loc-maps-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pickup-row {
  display: grid;
  grid-template-columns: 130px 1fr 1fr 1fr 140px;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 2px;
  transition: transform 0.15s;
}
.pickup-row:hover {
  transform: translateX(4px);
}
.pickup-cell {
  padding: 10px 14px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
}
.pickup-cell:last-child {
  border-right: none;
}
.vehicle-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  transition:
    border-color 0.2s,
    transform 0.15s,
    box-shadow 0.15s;
}
.vehicle-card[draggable="true"] {
  cursor: grab;
}
.vehicle-card[draggable="true"]:active {
  cursor: grabbing;
}
.vehicle-card.dragging {
  opacity: 0.5;
  transform: scale(0.97);
  border-color: var(--accent);
}
.vehicle-card.drag-hint {
  border-style: dashed;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(232, 197, 71, 0.15);
}
.pickups-dropzone {
  min-height: 60px;
  border: 2px dashed transparent;
  border-radius: 8px;
  transition:
    border-color 0.25s,
    background 0.25s;
}
.pickups-dropzone.drag-over {
  border-color: var(--accent);
  background: rgba(232, 197, 71, 0.06);
}
.drop-ghost {
  background: var(--surface);
  border: 1px dashed var(--accent);
  border-radius: 6px;
  opacity: 0.6;
  padding: 10px 14px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
}
.vehicle-card-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.vehicle-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.conflict-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #2a1414;
  color: #e87a7a;
  border: 1px solid #3a2222;
  border-radius: 4px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  padding: 2px 8px;
}
.pickup-row.has-conflict .pickup-cell {
  background: #1f1010 !important;
}
.pickup-row.has-conflict {
  border-left: 3px solid #e87a7a;
  border-radius: 6px;
}
.conflict-alert {
  background: #2a1414;
  border: 1px solid #e87a7a;
  border-radius: 8px;
  padding: 10px 16px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: #e87a7a;
  margin-bottom: 10px;
  display: none;
}
body.light .conflict-badge {
  background: #fdecea;
  color: #c04040;
  border-color: #e8b0b0;
}
body.light .pickup-row.has-conflict .pickup-cell {
  background: #fff0f0 !important;
}
.conflict-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #2a1414;
  color: #e87a7a;
  border: 1px solid #3a2222;
  border-radius: 4px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 2px 8px;
}
.pickup-row.has-conflict td,
.pickup-row.has-conflict .pickup-cell {
  background: #1f1010 !important;
}
.pickup-row.has-conflict {
  border-left: 3px solid #e87a7a;
}
.conflict-alert {
  background: #2a1414;
  border: 1px solid #e87a7a;
  border-radius: 8px;
  padding: 10px 16px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: #e87a7a;
  margin-bottom: 10px;
  display: none;
}
.vbadge-van {
  background: #1a2030;
  color: #7aaed4;
}
.vbadge-carro {
  background: #1a2820;
  color: #6ab88a;
}
.vbadge-moto {
  background: #2a2a14;
  color: #e8c547;
}
body.light .vbadge-van {
  background: #dde8f8;
  color: #2a5a8a;
}
body.light .vbadge-carro {
  background: #d8f2e4;
  color: #1a6040;
}
body.light .vbadge-moto {
  background: #fef8d0;
  color: #8a6e00;
}
.orc-dept-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
.orc-dept-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.orc-dept-header:hover {
  background: var(--surface2);
}
.orc-dept-name {
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
}
.orc-dept-total {
  font-family: "DM Mono", monospace;
  font-size: 14px;
  color: var(--accent);
}
.orc-dept-body {
  padding: 0 0 8px;
  display: none;
}
.orc-dept-body.open {
  display: block;
}
.orc-item-row {
  display: grid;
  grid-template-columns: 1fr 80px 100px 100px 80px 100px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--scene-row-alt);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  align-items: center;
  gap: 8px;
}
.orc-item-row:last-child {
  border-bottom: none;
}
.orc-item-row:hover {
  background: var(--surface2);
}
.orc-item-head {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 20px 4px;
}
.orc-summary-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.orc-sumcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}
.orc-sumcard-val {
  font-family: "Bebas Neue", sans-serif;
  font-size: 28px;
  color: var(--accent);
  line-height: 1;
}
.orc-sumcard-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.orc-sumcard.danger .orc-sumcard-val {
  color: var(--accent2);
}
.orc-progress-wrap {
  margin-bottom: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}
.hotcost-row {
  display: grid;
  grid-template-columns: 120px 1fr 120px 120px 100px 80px;
  padding: 9px 20px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  border-bottom: 1px solid var(--scene-row-alt);
  align-items: center;
  gap: 8px;
}
.hotcost-row:hover {
  background: var(--surface2);
}
.hotcost-head {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 20px 4px;
}
.over-budget {
  color: var(--accent2) !important;
}
#scene-modal-overlay {
  display: none;
}
#scene-modal-overlay.open {
  display: flex !important;
}
@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
#scene-modal-overlay.open #scene-modal {
  animation: modalIn 0.22s ease;
}
.cena-row {
  display: grid;
  grid-template-columns: 60px 90px 60px 1fr 255px 120px 95px 80px;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.15s;
}
.cena-row:hover {
  transform: translateX(4px);
}
.cena-row .strip-cell:first-child {
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
}
.cena-row.int-day .strip-cell:first-child {
  background: var(--strip-int-day-bg);
  color: var(--strip-int-day-text);
}
.cena-row.ext-day .strip-cell:first-child {
  background: var(--strip-ext-day-bg);
  color: var(--strip-ext-day-text);
}
.cena-row.int-night .strip-cell:first-child {
  background: var(--strip-int-night-bg);
  color: var(--strip-int-night-text);
}
.cena-row.ext-night .strip-cell:first-child {
  background: var(--strip-ext-night-bg);
  color: var(--strip-ext-night-text);
}
.btn-icon {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 26px;
  height: 26px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  margin-right: 3px;
}
.btn-icon:hover {
  color: var(--text);
  border-color: var(--text);
}
.btn-icon.del:hover {
  color: var(--accent2);
  border-color: var(--accent2);
}
#od-scene-modal-overlay {
  display: none;
}
#od-scene-modal-overlay.open {
  display: flex !important;
}
#od-scene-modal-overlay.open #od-scene-modal {
  animation: modalIn 0.22s ease;
}
.scenes-table tbody tr {
  cursor: pointer;
}
.scenes-table tbody tr:hover td {
  background: var(--surface2);
}
.scenes-table tbody tr.dragging {
  opacity: 0.4;
}
.scenes-table tbody tr.drag-over td {
  border-top: 2px solid var(--accent);
}
.drag-handle {
  cursor: grab;
  color: var(--muted);
  font-size: 14px;
  padding: 0 6px;
  user-select: none;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.drag-handle:hover {
  opacity: 1;
  color: var(--accent);
}
.drag-handle:active {
  cursor: grabbing;
}
.btn-add-scene-day {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px dashed var(--border);
  color: var(--muted);
  padding: 10px 16px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 28px;
}
.btn-add-scene-day:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(232, 197, 71, 0.04);
}
.od-scene-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.od-scene-info-field {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
}
.od-scene-info-field.full {
  grid-column: 1 / -1;
}
.od-info-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.od-info-value {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
}
#add-to-day-modal-overlay {
  display: none !important;
}
#add-to-day-modal-overlay.open {
  display: flex !important;
}
#od-scene-modal-overlay {
  display: none !important;
}
#od-scene-modal-overlay.open {
  display: flex !important;
}
#add-to-day-modal-overlay.open #add-to-day-modal {
  animation: modalIn 0.22s ease;
}
.scene-picker-list {
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 12px;
}
.scene-picker-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.scene-picker-filter {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
}
.scene-picker-filter.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 700;
}
.scene-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
}
.scene-picker-item:last-child {
  border-bottom: none;
}
.scene-picker-item:hover {
  background: var(--surface2);
}
.scene-picker-item.already-in-day {
  background: rgba(232, 197, 71, 0.04);
}
.scene-picker-item.already-in-day .scene-picker-num {
  opacity: 0.5;
}
.scene-picker-already-badge {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: rgba(232, 197, 71, 0.12);
  border: 1px solid rgba(232, 197, 71, 0.25);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}
.scene-picker-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 24px;
  color: var(--accent);
  min-width: 36px;
  line-height: 1;
  text-align: center;
}
.scene-picker-desc {
  flex: 1;
  min-width: 0;
}
.scene-picker-loc {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scene-picker-summary {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scene-picker-search {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}
.scene-picker-search:focus {
  border-color: var(--accent);
}
.scene-picker-count {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 8px;
  text-align: right;
}
.cast-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--chip-id-bg);
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: "Bebas Neue", sans-serif;
  font-size: 12px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.1s;
  user-select: none;
  margin: 0 2px;
  line-height: 1;
}
.cast-chip:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  transform: scale(1.15);
}
#cast-info-modal-overlay {
  display: none;
}
#cast-info-modal-overlay.open {
  display: flex !important;
}
#cast-info-modal-overlay.open #cast-info-modal {
  animation: modalIn 0.22s ease;
}
#cast-info-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 420px;
  max-width: 95vw;
  padding: 28px;
  position: relative;
}
.cast-info-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 64px;
  color: var(--border);
  position: absolute;
  top: 16px;
  right: 20px;
  line-height: 1;
}
.cast-info-char {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.cast-info-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}
.cast-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.cast-info-field {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 12px;
}
.cast-info-field.full {
  grid-column: 1 / -1;
}
.cast-info-label {
  font-family: "DM Mono", monospace;
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.cast-info-value {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  color: var(--text);
}
#member-modal-overlay,
#actor-modal-overlay,
#crew-modal-overlay {
  display: none;
}
#member-modal-overlay.open,
#actor-modal-overlay.open,
#crew-modal-overlay.open {
  display: flex !important;
}
#member-modal-overlay.open #member-modal,
#actor-modal-overlay #actor-modal,
#crew-modal-overlay #crew-modal {
  animation: modalIn 0.22s ease;
}
#arte-modal-overlay {
  display: none;
}
#arte-modal-overlay.open {
  display: flex !important;
}
#arte-modal-overlay.open #arte-modal {
  animation: modalIn 0.22s ease;
}
#member-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 580px;
  max-width: 95vw;
  max-height: 88vh;
  overflow-y: auto;
  padding: 28px;
  position: relative;
}
.member-modal-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 20px;
}
.member-modal-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 20px;
  background: var(--surface2);
  border-radius: 8px;
  padding: 4px;
}
.member-modal-tab {
  flex: 1;
  padding: 8px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: none;
  color: var(--muted);
  transition: all 0.2s;
}
.member-modal-tab.active {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
}
.member-form-section {
  display: none;
}
.member-form-section.active {
  display: block;
}
.member-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.member-form-row.full {
  grid-template-columns: 1fr;
}
.member-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.member-form-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}
.member-form-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s;
}
.member-form-input:focus {
  border-color: var(--accent);
}
.member-form-input::placeholder {
  color: var(--muted);
}
select.member-form-input {
  -webkit-appearance: none;
  cursor: pointer;
}
#member-modal-error {
  display: none;
  background: var(--modal-error-bg);
  border: 1px solid var(--accent2);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--accent2);
  margin-bottom: 14px;
}
.crew-table tbody tr {
  cursor: pointer;
}
.crew-table tbody tr:hover td {
  background: var(--surface);
}
.edit-hint {
  font-size: 9px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s;
  margin-left: 6px;
}
.crew-table tbody tr:hover .edit-hint {
  opacity: 1;
}
#cal-overlay {
  align-items: flex-start;
}
.cal-nav-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.cal-day-btn {
  text-align: center;
  padding: 7px 2px;
  border-radius: 6px;
  cursor: pointer;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  border: 1px solid transparent;
  transition:
    background 0.1s,
    color 0.1s;
}
.cal-day-btn:hover {
  background: var(--surface2) !important;
}
.cal-day-btn.is-selected {
  background: var(--accent) !important;
  color: var(--bg) !important;
  font-weight: 700;
  border-color: var(--accent);
}
.cal-day-btn.is-range-mid {
  background: rgba(232, 197, 71, 0.15) !important;
  color: var(--text) !important;
  border-radius: 0;
}
.cal-day-btn.is-today {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.cal-day-btn.is-weekend {
  color: var(--accent2);
}
.cal-day-btn.is-selected.is-weekend {
  color: var(--bg) !important;
}
.cal-weekday-header {
  text-align: center;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 4px 0;
  color: var(--muted);
}
.cal-weekday-header.is-weekend {
  color: var(--accent2);
}
.cal-footer-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 1px;
  transition: all 0.15s;
}
.cal-footer-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.cal-manual-box {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cal-manual-box:focus-within {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.28) !important;
}
.solar-quick-step-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.solar-quick-step-btn:hover {
  background: rgba(249, 115, 22, 0.15);
  border-color: #f97316;
  color: #f97316;
}
.solar-obj-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.solar-obj-btn:hover {
  background: rgba(249, 115, 22, 0.15);
  border-color: #f97316;
  color: #f97316;
}
.solar-obj-btn.active {
  background: rgba(249, 115, 22, 0.22);
  border-color: #f97316;
  color: #ffedd5;
  font-weight: bold;
}
.arte-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 24px;
  background: var(--surface2);
  border-radius: 8px;
  padding: 4px;
  width: fit-content;
}
.arte-tab {
  padding: 8px 20px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: none;
  color: var(--muted);
  transition: all 0.2s;
}
.arte-tab.active {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
}
.arte-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.arte-card:hover {
  border-color: var(--accent);
}
.arte-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.arte-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.arte-card-sub {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}
.arte-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface2);
  border-radius: 6px;
  border: 1px solid var(--border);
  margin-bottom: 5px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.arte-item-row:hover {
  background: var(--surface);
  border-color: var(--accent);
}
.arte-item-cat {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  min-width: 85px;
  text-align: center;
}
.arte-cat-prop {
  background: #201a10;
  color: #ffb347;
  border: 1px solid #3a2a10;
}
.arte-cat-cenario {
  background: #1a1e28;
  color: #7aaed4;
  border: 1px solid #253050;
}
.arte-cat-veiculo {
  background: #1e1a10;
  color: #e8c547;
  border: 1px solid #3a3020;
}
.arte-cat-alimento {
  background: #181e18;
  color: #6ab88a;
  border: 1px solid #253825;
}
.arte-cat-outros {
  background: #222230;
  color: #aaa;
  border: 1px solid #2a2a38;
}
.arte-item-desc {
  flex: 1;
  font-size: 13px;
  color: var(--text);
}
.arte-item-qty {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  color: var(--accent);
  min-width: 36px;
  text-align: center;
  font-weight: 600;
}
.arte-item-notes {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
  max-width: 200px;
}
.arte-empty {
  padding: 48px;
  text-align: center;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  color: var(--muted);
}
.figurino-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.figurino-card:hover {
  border-color: var(--accent);
}
.figurino-char-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 40px;
  color: var(--border);
  line-height: 1;
  float: right;
}
.figurino-char-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.figurino-char-actor {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  margin-bottom: 12px;
}
.figurino-piece-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface2);
  border-radius: 6px;
  border: 1px solid var(--border);
  margin-bottom: 5px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.figurino-piece-row:hover {
  background: var(--surface);
  border-color: var(--accent);
}
.figurino-piece-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  min-width: 75px;
  text-align: center;
  background: #1e181e;
  color: #c47aff;
  border: 1px solid #2e1e2e;
}
.figurino-piece-desc {
  flex: 1;
  font-size: 13px;
  color: var(--text);
}
.figurino-piece-notes {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
  max-width: 200px;
}
.figurino-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.figurino-char-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
  user-select: none;
}
.figurino-char-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(232, 197, 71, 0.08);
}
.figurino-char-card.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--surface) 0%, rgba(232, 197, 71, 0.05) 100%);
  box-shadow: 0 4px 20px rgba(232, 197, 71, 0.12);
}
.figurino-char-card-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 32px;
  color: var(--border);
  position: absolute;
  top: 12px;
  right: 16px;
  line-height: 1;
  opacity: 0.6;
}
.figurino-char-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-right: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.figurino-char-card-actor {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.figurino-char-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}
.figurino-char-card-count {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--accent);
}
.figurino-char-card-badge {
  font-family: "DM Mono", monospace;
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}
.figurino-detail-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-top: 10px;
  animation: fadeIn 0.2s ease;
}
.figurino-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.figurino-detail-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--text);
}
.figurino-detail-subtitle {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--muted);
}
.foto-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 24px;
  background: var(--surface2);
  border-radius: 8px;
  padding: 4px;
  width: fit-content;
  flex-wrap: wrap;
}
.foto-tab {
  padding: 8px 20px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: none;
  color: var(--muted);
  transition: all 0.2s;
}
.foto-tab.active {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
}
.foto-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.foto-card:hover {
  border-color: var(--accent);
}
.foto-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.foto-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.foto-card-sub {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}
.foto-badge {
  display: inline-block;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid;
}
.foto-badge-cam {
  background: #1a1e28;
  color: #7aaed4;
  border-color: #253050;
}
.foto-badge-lens {
  background: #1e1a10;
  color: #e8c547;
  border-color: #3a3020;
}
.foto-badge-light {
  background: #28200a;
  color: #f4a261;
  border-color: #3a2a10;
}
.foto-badge-filter {
  background: #1e181e;
  color: #c47aff;
  border-color: #2e1e2e;
}
.foto-badge-note {
  background: #181e18;
  color: #6ab88a;
  border-color: #253825;
}
.sb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.sb-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition:
    border-color 0.2s,
    transform 0.15s;
  cursor: pointer;
  position: relative;
}
.sb-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.sb-card:hover .sb-card-menu-btn {
  opacity: 1;
}
.sb-card-menu-container {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
}
.sb-card-menu-btn {
  background: rgba(10, 10, 11, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: var(--text);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.15s, border-color 0.15s, opacity 0.15s, transform 0.1s;
  opacity: 0.6;
}
.sb-card-menu-btn:hover {
  background: var(--surface2);
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.05);
}
.sb-card-menu-dropdown {
  position: absolute;
  top: 32px;
  right: 0;
  background: rgba(20, 20, 22, 0.98);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  display: none;
  flex-direction: column;
  min-width: 170px;
  z-index: 100;
  overflow: hidden;
  backdrop-filter: blur(12px);
  padding: 4px;
}
.sb-card-menu-dropdown.open {
  display: flex;
}
.sb-card-menu-dropdown button {
  background: transparent;
  border: none;
  color: var(--text);
  opacity: 0.85;
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-family: "DM Mono", monospace;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 5px;
  transition: background 0.15s, opacity 0.15s;
  width: 100%;
}
.sb-card-menu-dropdown button:hover {
  background: rgba(255, 255, 255, 0.06);
  opacity: 1;
}
.sb-card-menu-dropdown button.danger {
  color: #ff5a5a;
}
.sb-card-menu-dropdown button.danger:hover {
  background: rgba(255, 90, 90, 0.1);
  color: #ff3b3b;
}
.sb-menu-icon {
  font-size: 12px;
  width: 14px;
  display: inline-block;
  text-align: center;
}
.sb-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.sb-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
.sb-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sb-card-info {
  padding: 10px 12px;
}
.sb-card-scene {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.sb-card-desc {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
}
.sb-card-shot {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  color: var(--muted);
  margin-top: 4px;
}
.sbv-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.sbv-edit-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.sbv-edit-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.sbv-edit-input:focus {
  border-color: var(--accent);
}
.sbv-edit-textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
}
.sbv-edit-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sbv-confirm-delete {
  background: #1a0808;
  border: 1px solid #e05555;
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.sbv-tab-bar {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  background: var(--surface2);
  border-radius: 8px;
  padding: 3px;
}
.sbv-tab {
  flex: 1;
  padding: 6px;
  text-align: center;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.sbv-tab.active {
  background: var(--surface);
  color: var(--text);
}
.sun-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 18px;
  border-radius: 9px;
  overflow: hidden;
  margin: 10px 0 4px;
  position: relative;
}
.sun-seg {
  height: 100%;
  transition: flex 0.3s;
}
.sun-night {
  background: #1a2030;
}
.sun-twilight {
  background: linear-gradient(90deg, #1a2030, #4a3060);
}
.sun-golden {
  background: linear-gradient(90deg, #f4a261, #e8c547);
}
.sun-day {
  background: linear-gradient(90deg, #7ec8f0, #c8e8ff);
}
.sun-eve {
  background: linear-gradient(90deg, #e8c547, #e76f51);
}
.sun-marker {
  position: absolute;
  top: -2px;
  width: 3px;
  height: 22px;
  background: white;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  transition: left 0.3s;
}
.luz-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}
.luz-golden-h {
  background: rgba(244, 162, 97, 0.15);
  color: #f4a261;
  border: 1px solid rgba(244, 162, 97, 0.4);
}
.luz-blue-h {
  background: rgba(100, 120, 200, 0.15);
  color: #7aaed4;
  border: 1px solid rgba(100, 120, 200, 0.4);
}
.luz-harsh {
  background: rgba(255, 255, 200, 0.1);
  color: #e8c547;
  border: 1px solid rgba(232, 197, 71, 0.3);
}
.luz-soft {
  background: rgba(200, 232, 255, 0.1);
  color: #a0d0f0;
  border: 1px solid rgba(160, 208, 240, 0.3);
}
.luz-noite {
  background: rgba(30, 40, 80, 0.4);
  color: #7aaed4;
  border: 1px solid rgba(74, 111, 165, 0.4);
}
.sb-gen-frame {
  border: 2px dashed var(--border);
  border-radius: 10px;
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.sb-gen-frame:hover {
  border-color: var(--accent2);
  background: rgba(255, 107, 53, 0.04);
}
.sb-gen-frame svg {
  opacity: 0.3;
}
.luz-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  transition: all 0.2s ease;
}
.luz-row:hover {
  border-color: var(--border);
}
.luz-row-clickable {
  cursor: pointer;
}
.luz-row-clickable:hover {
  border-color: var(--accent) !important;
  background: rgba(255, 107, 53, 0.06) !important;
  transform: translateX(4px);
}
.luz-row-selected {
  border-color: var(--accent) !important;
  background: rgba(255, 107, 53, 0.12) !important;
  box-shadow: 0 0 12px rgba(255, 107, 53, 0.25) !important;
}
.luz-row-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 20px;
  color: var(--accent);
  min-width: 28px;
  line-height: 1;
}
.luz-row-loc {
  flex: 1;
  font-size: 13px;
  color: var(--text);
}
.luz-row-info {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
}
#sb-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1010;
  align-items: center;
  justify-content: center;
}
#sb-modal-overlay.open {
  display: flex;
}
#sb-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 860px;
  max-width: 96vw;
  max-height: 92vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
}
@keyframes sb-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
.sb-generating {
  animation: sb-pulse 1.4s infinite;
}
@keyframes sb-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.cloud-status {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.cloud-status--ok {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.3);
}
.cloud-status--salvando {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.cloud-status--salvando::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(251, 191, 36, 0.2);
  border-top-color: #fbbf24;
  border-radius: 50%;
  animation: pm-spin 0.6s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}
.cloud-status--erro {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.3);
}
.trash-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-family: "DM Mono", monospace;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 8px 4px 7px;
  border-radius: 6px;
  transition: all 0.2s;
  line-height: 1;
}
.trash-toggle:hover {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.4);
  color: #f87171;
}
.trash-toggle.has-items {
  border-color: rgba(248, 113, 113, 0.5);
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
}
.trash-toggle svg {
  flex-shrink: 0;
  transition: transform 0.2s;
}
.trash-toggle:hover svg {
  transform: translateY(1px);
}
.trash-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #3a3a3a;
  color: var(--muted);
  border-radius: 10px;
  font-size: 10px;
  font-family: "DM Mono", monospace;
  font-weight: 700;
  transition: all 0.25s;
  line-height: 1;
}
.trash-badge.has-items {
  background: #f87171;
  color: #fff;
  animation: badge-pop 0.25s ease;
}
@keyframes badge-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
/* --- Cenas Gravadas na Ordem do Dia --- */
.scenes-table tbody tr.od-scene-row-gravada td {
  background: rgba(58, 125, 90, 0.08) !important;
  border-bottom: 1px solid rgba(58, 125, 90, 0.2) !important;
  color: #a3d9b5 !important;
}
.scenes-table tbody tr.od-scene-row-gravada:hover td {
  background: rgba(58, 125, 90, 0.14) !important;
}
.scenes-table tbody tr.od-scene-row-gravada td:first-child {
  border-left: 3px solid #3a7d5a !important;
}
.scenes-table tbody tr.od-scene-row-gravada td:nth-child(6),
.scenes-table tbody tr.od-scene-row-gravada td:nth-child(7) {
  text-decoration: line-through !important;
}
.scenes-table tbody tr.od-scene-row-gravada td span {
  text-decoration: none !important;
  display: inline-block;
}
.trash-header {
  padding: 10px 20px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.trash-item {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.trash-item-info {
  flex: 1;
}
.trash-item-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  color: var(--muted);
  line-height: 1;
}
.trash-item-date {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px;
}
.trash-item-scenes {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
}
.btn-restore {
  background: none;
  border: 1px solid var(--border);
  color: #4ade80;
  cursor: pointer;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  transition: all 0.2s;
}
.btn-restore:hover {
  background: rgba(74, 222, 128, 0.1);
  border-color: #4ade80;
}
.btn-trash-clear {
  display: block;
  width: 100%;
  padding: 10px;
  background: none;
  border: none;
  color: #666;
  font-size: 11px;
  cursor: pointer;
  text-align: center;
}
.btn-trash-clear:hover {
  color: #f87171;
}
.trash-empty {
  padding: 16px 20px;
  font-size: 12px;
  color: #555;
  text-align: center;
}
.toast-undo {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
  white-space: nowrap;
}
.toast-undo.show {
  transform: translateX(-50%) translateY(0);
}
.toast-undo-msg {
  color: #eee;
}
.toast-undo-btn {
  background: var(--accent);
  border: none;
  color: #fff;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.toast-undo-btn:hover {
  opacity: 0.85;
}
#app-wrapper {
  display: none;
}
#login-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.login-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 60px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.login-top-bar .logo {
  font-family: "Bebas Neue", sans-serif;
  font-size: 26px;
  letter-spacing: 4px;
  color: var(--accent);
}
.login-top-bar .logo span {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-left: 10px;
  vertical-align: middle;
}
.login-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
#screen-login {
  width: 100%;
  max-width: 440px;
}
.login-eyebrow {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 6px;
}
.login-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 44px;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1;
}
.login-sub {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 36px;
  line-height: 1.6;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.login-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.login-tab {
  flex: 1;
  padding: 14px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.login-tab:hover {
  color: var(--text);
}
.login-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: rgba(232, 197, 71, 0.03);
}
.login-tab-badge {
  font-size: 8px;
  background: var(--muted);
  color: var(--bg);
  padding: 1px 5px;
  border-radius: 10px;
  margin-left: 6px;
  letter-spacing: 0;
  vertical-align: middle;
  font-weight: 700;
}
.login-panel {
  display: none;
  padding: 28px;
}
.login-panel.active {
  display: block;
}
.lform-group {
  margin-bottom: 16px;
}
.lform-label {
  display: block;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.lform-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: 13px;
  padding: 11px 14px;
  border-radius: 6px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.lform-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 197, 71, 0.08);
}
.lform-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lform-input::placeholder {
  color: var(--muted);
}
.btn-entrar {
  width: 100%;
  padding: 13px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 6px;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
}
.btn-entrar:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232, 197, 71, 0.25);
}
.btn-entrar:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}
.lform-msg {
  display: none;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.lform-msg.error {
  background: rgba(255, 107, 53, 0.1);
  border: 1px solid rgba(255, 107, 53, 0.3);
  color: var(--accent2);
}
.testing-banner {
  background: rgba(232, 197, 71, 0.06);
  border: 1px solid rgba(232, 197, 71, 0.18);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.testing-banner-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.testing-banner-text {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--accent);
  line-height: 1.6;
}
.testing-banner-text strong {
  display: block;
  font-size: 12px;
  margin-bottom: 3px;
  letter-spacing: 1px;
}
#screen-dashboard {
  display: none;
  width: 100%;
  max-width: 900px;
}
.dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
}
.dash-greeting {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.dash-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 42px;
  letter-spacing: 2px;
  color: var(--text);
  line-height: 1;
}
.btn-logout {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-logout:hover {
  color: var(--accent2);
  border-color: var(--accent2);
}
.dash-section-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 36px;
}
.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 22px 18px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: visible;
}
.project-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 10px 10px 0 0;
}
.project-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.project-card:hover::before {
  opacity: 1;
}
.project-type {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.type-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent2);
  flex-shrink: 0;
}
.type-dot.longa {
  background: var(--accent);
}
.project-name {
  font-family: "Bebas Neue", sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 8px;
}
.project-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.project-meta-item {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  background: var(--surface2);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.project-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.project-status {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.status-ativo {
  background: rgba(74, 222, 128, 0.1);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.25);
}
.status-pre-prod {
  background: rgba(232, 197, 71, 0.1);
  color: var(--accent);
  border: 1px solid rgba(232, 197, 71, 0.25);
}
.project-arrow {
  font-size: 18px;
  color: var(--muted);
  transition:
    color 0.2s,
    transform 0.2s;
}
.project-card:hover .project-arrow {
  color: var(--accent);
  transform: translateX(4px);
}
.project-card.new-project {
  border-style: dashed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  gap: 10px;
  opacity: 0.6;
  cursor: pointer;
}
.project-card.new-project:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  opacity: 1;
}
.project-card.new-project:hover .np-icon {
  color: var(--accent);
}
.proj-menu-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1;
  z-index: 2;
  transition:
    color 0.15s,
    background 0.15s;
}
.proj-menu-btn:hover {
  color: var(--text);
  background: var(--surface2);
}
.project-card:hover .proj-menu-btn {
  color: var(--text);
}
.proj-menu-dropdown {
  position: absolute;
  top: 38px;
  right: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 160px;
  z-index: 100;
  display: none;
  overflow: hidden;
}
.proj-menu-dropdown.open {
  display: block;
}
.proj-menu-item {
  padding: 10px 16px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s;
}
.proj-menu-item:hover {
  background: var(--surface2);
}
.proj-menu-danger {
  color: var(--accent2);
}
.proj-menu-danger:hover {
  background: rgba(255, 80, 60, 0.1);
}
#np-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 600;
  align-items: center;
  justify-content: center;
}
#np-overlay.open {
  display: flex;
}
#ep-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 600;
  align-items: center;
  justify-content: center;
}
#ep-overlay.open {
  display: flex;
}
#np-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  width: 600px;
  max-width: 95vw;
}
.np-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 26px;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 4px;
}
.np-sub {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}
.np-field {
  margin-bottom: 16px;
}
.np-label {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  display: block;
}
.np-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px 14px;
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
.np-input:focus {
  border-color: var(--accent);
}
.np-input::placeholder {
  color: var(--muted);
}
.np-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.np-error {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--accent2);
  margin-bottom: 12px;
  display: none;
}
.np-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}
#imp1ad-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 700;
  align-items: center;
  justify-content: center;
}
#imp1ad-overlay.open {
  display: flex;
}
#imp1ad-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  width: 460px;
  max-width: 95vw;
}
.imp1ad-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 4px;
}
.imp1ad-sub {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.imp1ad-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.imp1ad-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.imp1ad-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.imp1ad-lbl {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.imp1ad-val {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}
.imp1ad-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.imp1ad-stat {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  text-align: center;
}
.imp1ad-stat-val {
  font-family: "Bebas Neue", sans-serif;
  font-size: 20px;
  color: var(--accent);
  letter-spacing: 1px;
}
.imp1ad-stat-lbl {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
.imp1ad-warn {
  background: rgba(255, 107, 53, 0.08);
  border: 1px solid rgba(255, 107, 53, 0.3);
  border-radius: 6px;
  padding: 10px 14px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--accent2);
  margin-bottom: 16px;
  line-height: 1.5;
}
.imp1ad-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.login-footer {
  text-align: center;
  padding: 20px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.lspinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: #000;
  border-radius: 50%;
  animation: lspin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes lspin {
  to {
    transform: rotate(360deg);
  }
} /* ── Undo Toast ── */
.undo-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 10001;
  min-width: 320px;
  max-width: 90vw;
  overflow: hidden;
  flex-direction: column;
}
.undo-toast-body {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.undo-toast-msg {
  flex: 1;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  color: var(--text);
}
.undo-toast-msg strong {
  color: var(--accent);
}
.undo-toast-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.undo-toast-btn {
  padding: 5px 14px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: none;
  color: var(--accent);
  font-family: "DM Mono", monospace;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.undo-toast-btn:hover {
  background: rgba(232, 197, 71, 0.12);
}
.undo-toast-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}
.undo-toast-close:hover {
  color: var(--text);
}
.undo-toast-bar {
  height: 3px;
  background: var(--accent);
  width: 100%;
  flex-shrink: 0;
}
/* ── Lixeira Modal ── */
.lixeira-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 90%;
  max-width: 580px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lixeira-header {
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.lixeira-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--text);
}
.lixeira-sub {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
}
.lixeira-btn-esvaziar {
  display: none;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--accent2);
  background: none;
  color: var(--accent2);
  font-family: "DM Mono", monospace;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.lixeira-btn-esvaziar:hover {
  background: rgba(255, 80, 60, 0.1);
}
.lixeira-btn-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  transition: color 0.15s;
}
.lixeira-btn-close:hover {
  color: var(--text);
}
.lixeira-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}
.lixeira-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.lixeira-item:last-child {
  border-bottom: none;
}
.lixeira-item:hover {
  background: var(--surface2);
}
/* ========== UTILITY CLASSES ========== */
.overlay-base {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.modal-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
}
.btn-ghost {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.btn-ghost--text:hover {
  color: var(--text);
  border-color: var(--text);
}
.btn-close {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.btn-close:hover {
  color: var(--text);
}
.btn-cancel {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-cancel:hover {
  border-color: var(--text);
  color: var(--text);
}
.btn-danger {
  background: #e05252;
  border: none;
  color: #fff;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 24px;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 700;
  transition: opacity 0.2s;
}
.btn-danger:hover {
  opacity: 0.85;
}
.btn-equipe {
  background: none;
  border: 1px solid rgba(100, 180, 255, 0.4);
  color: rgba(100, 180, 255, 0.9);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.btn-equipe:hover {
  border-color: rgba(100, 180, 255, 0.9);
  color: #fff;
}
#od-date-display:hover {
  border-color: var(--accent);
}
#conv-gerar-btn {
  width: 100%;
  background: #f97316;
  border: none;
  color: #fff;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 11px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#conv-gerar-btn:hover {
  background: #ea580c;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.45);
  transform: translateY(-1px);
}
.dropzone-pdf {
  border: 2px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.dropzone-pdf:hover {
  border-color: var(--accent2);
  background: rgba(255, 107, 53, 0.04);
}
.dropzone-img {
  border: 2px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
}
.dropzone-img:hover {
  border-color: var(--accent);
}
.loc-search-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.loc-search-item:hover {
  background: var(--surface2);
}

/* =========================================================================
   RADICAL GLASSMORPHISM OVERRIDE v1 — 2026-04-17
   Aplica uma camada moderna de vidro translúcido sobre a UI existente.
   Regras usam !important para sobrescrever o CSS minificado original
   (mesma especificidade, última regra vence — + segurança adicional).
   ========================================================================= */

/* ---------- Novos tokens (dark default) ---------- */
:root {
  --glass-bg-strong: rgba(18, 18, 26, 0.62);
  --glass-bg-med: rgba(22, 22, 32, 0.48);
  --glass-bg-weak: rgba(28, 28, 40, 0.3);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-strong: rgba(255, 255, 255, 0.14);
  --glass-border-accent: rgba(232, 197, 71, 0.28);
  --glass-blur: 20px;
  --glass-blur-sm: 10px;
  --glass-saturate: 160%;
  --glass-shadow-lg:
    0 16px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --glass-shadow-md:
    0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --glow-accent:
    0 0 24px rgba(232, 197, 71, 0.35), 0 0 48px rgba(232, 197, 71, 0.12);
  --glow-accent2: 0 0 24px rgba(255, 107, 53, 0.35);
  --glow-danger: 0 0 20px rgba(255, 80, 60, 0.4);
  --glow-blue: 0 0 20px rgba(100, 180, 255, 0.3);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --ease-glass: cubic-bezier(0.4, 0, 0.2, 1);
  --aurora-dur: 60s;
}

/* ---------- Novos tokens (light) ---------- */
body.light {
  --glass-bg-strong: rgba(255, 255, 255, 0.62);
  --glass-bg-med: rgba(250, 248, 243, 0.5);
  --glass-bg-weak: rgba(255, 255, 255, 0.32);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-border-strong: rgba(0, 0, 0, 0.1);
  --glass-border-accent: rgba(184, 149, 10, 0.32);
  --glass-shadow-lg:
    0 16px 48px rgba(40, 40, 30, 0.18), 0 2px 8px rgba(40, 40, 30, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --glass-shadow-md:
    0 8px 24px rgba(40, 40, 30, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glow-accent:
    0 0 24px rgba(184, 149, 10, 0.22), 0 0 48px rgba(184, 149, 10, 0.08);
}

/* ---------- Aurora animada no fundo ---------- */
html,
body {
  min-height: 100%;
}
body {
  background: var(--bg) !important;
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(
      ellipse 60% 50% at 20% 20%,
      rgba(232, 197, 71, 0.22) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 50% 45% at 80% 15%,
      rgba(255, 107, 53, 0.18) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 55% 50% at 75% 85%,
      rgba(74, 111, 165, 0.22) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 45% 40% at 15% 80%,
      rgba(58, 125, 90, 0.15) 0%,
      transparent 55%
    );
  filter: blur(40px) saturate(130%);
  animation: aurora-drift var(--aurora-dur) ease-in-out infinite alternate;
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 11, 0.35) 0%,
    rgba(10, 10, 11, 0.55) 100%
  );
  pointer-events: none;
}
body.light::before {
  background:
    radial-gradient(
      ellipse 60% 50% at 20% 20%,
      rgba(232, 197, 71, 0.2) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 50% 45% at 80% 15%,
      rgba(255, 140, 90, 0.14) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 55% 50% at 75% 85%,
      rgba(120, 160, 210, 0.22) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 45% 40% at 15% 80%,
      rgba(160, 200, 170, 0.18) 0%,
      transparent 55%
    );
}
body.light::after {
  background: linear-gradient(
    180deg,
    rgba(240, 237, 230, 0.3) 0%,
    rgba(240, 237, 230, 0.5) 100%
  );
}
@keyframes aurora-drift {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(3%, -2%) rotate(8deg) scale(1.05);
  }
  66% {
    transform: translate(-2%, 3%) rotate(-6deg) scale(0.98);
  }
  100% {
    transform: translate(2%, 1%) rotate(4deg) scale(1.02);
  }
}

/* ---------- Superfícies grandes (modais, painéis, cards principais) ---------- */
.modal-panel,
.gmodal,
.lixeira-modal,
.login-card,
.login-panel,
.full-card,
.meta-card,
.foto-card,
.weather-card,
.pm-config-card,
.dash-header,
.pm-state,
.pm-rules-bar {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturate)) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--glass-shadow-lg) !important;
}

.meta-card,
.foto-card,
.weather-card,
.pm-config-card {
  border-radius: var(--radius-md) !important;
  background: var(--glass-bg-med) !important;
  box-shadow: var(--glass-shadow-md) !important;
}

/* Overlays com blur */
.overlay-base,
.gmodal-overlay {
  background: rgba(5, 5, 10, 0.55) !important;
  backdrop-filter: blur(12px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
}
body.light .overlay-base,
body.light .gmodal-overlay {
  background: rgba(50, 50, 60, 0.35) !important;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturate)) !important;
  border-right: 1px solid var(--glass-border) !important;
}
.sidebar-header {
  border-bottom: 1px solid var(--glass-border) !important;
  background: transparent !important;
}
.sidebar-tab {
  border-radius: 12px !important;
  margin: 2px 10px !important;
  transition: all 0.25s var(--ease-glass) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}
.sidebar-tab:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--glass-border) !important;
  transform: translateX(3px);
}
.sidebar-tab.active,
.sidebar-tab.on {
  background: linear-gradient(
    135deg,
    rgba(232, 197, 71, 0.2),
    rgba(255, 107, 53, 0.12)
  ) !important;
  border-color: var(--glass-border-accent) !important;
  color: var(--accent) !important;
  box-shadow:
    0 0 0 1px rgba(232, 197, 71, 0.1),
    0 4px 16px rgba(232, 197, 71, 0.1) !important;
}

/* ---------- Abas (tabs) estilo pill ---------- */
.nav-tab {
  border-radius: 999px !important;
  padding: 8px 18px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--muted) !important;
  transition: all 0.25s var(--ease-glass) !important;
  font-family: "DM Mono", monospace;
  letter-spacing: 0.8px;
}
.nav-tab:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--glass-border) !important;
  color: var(--text) !important;
}
.nav-tab.active {
  background: linear-gradient(
    135deg,
    rgba(232, 197, 71, 0.22),
    rgba(255, 107, 53, 0.15)
  ) !important;
  border-color: var(--glass-border-accent) !important;
  color: var(--accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 12px rgba(232, 197, 71, 0.18) !important;
}

/* ---------- Botões primários (gradient + glow + shimmer) ---------- */
.btn-primary,
.btn-entrar,
.btn-add,
.pm-cta-btn {
  position: relative;
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent2) 100%
  ) !important;
  color: #0a0a0b !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 22px !important;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow:
    var(--glow-accent),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: all 0.28s var(--ease-glass) !important;
  overflow: hidden;
  cursor: pointer;
}
.btn-primary::before,
.btn-entrar::before,
.pm-cta-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 70%
  );
  transition: left 0.7s var(--ease-glass);
}
.btn-primary:hover,
.btn-entrar:hover,
.btn-add:hover,
.pm-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--glow-accent),
    0 12px 28px rgba(232, 197, 71, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.btn-primary:hover::before,
.btn-entrar:hover::before,
.pm-cta-btn:hover::before {
  left: 100%;
}
.btn-primary:active,
.btn-entrar:active,
.pm-cta-btn:active {
  transform: translateY(0);
}

/* ---------- Botões secundários / ghost / close ---------- */
.btn-secondary,
.btn-ghost,
.btn-cancel,
.btn-close,
.btn-logout,
.theme-btn,
.cal-nav-btn,
.cal-footer-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(var(--glass-blur-sm)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: 10px !important;
  transition: all 0.22s var(--ease-glass) !important;
}
.btn-secondary:hover,
.btn-ghost:hover,
.btn-cancel:hover,
.btn-close:hover,
.btn-logout:hover,
.theme-btn:hover,
.cal-nav-btn:hover,
.cal-footer-btn:hover {
  background: rgba(232, 197, 71, 0.1) !important;
  border-color: var(--glass-border-accent) !important;
  color: var(--accent) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
}
body.light .btn-secondary,
body.light .btn-ghost,
body.light .btn-cancel,
body.light .btn-close,
body.light .btn-logout,
body.light .theme-btn {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* Botão danger com glow vermelho */
.btn-danger {
  background: linear-gradient(135deg, #e05252, #c13d3d) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: var(--glow-danger) !important;
  transition: all 0.22s var(--ease-glass) !important;
}
.btn-danger:hover {
  transform: translateY(-1px);
  box-shadow:
    var(--glow-danger),
    0 8px 22px rgba(224, 82, 82, 0.35) !important;
}

.btn-equipe {
  background: rgba(100, 180, 255, 0.08) !important;
  border: 1px solid rgba(100, 180, 255, 0.35) !important;
  color: #9ec9f0 !important;
  border-radius: 10px !important;
  backdrop-filter: blur(var(--glass-blur-sm)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) !important;
  transition: all 0.22s var(--ease-glass) !important;
}
.btn-equipe:hover {
  background: rgba(100, 180, 255, 0.18) !important;
  border-color: rgba(100, 180, 255, 0.7) !important;
  color: #fff !important;
  box-shadow: var(--glow-blue) !important;
}

/* ---------- Inputs, selects e textareas ---------- */
.card-input,
.card-select,
.card-textarea,
.meta-input,
.lform-input,
.member-form-input,
.np-input,
.pm-config-input,
.weather-city-input,
.scene-picker-search,
.fr-finput,
.fr-fselect,
.sbv-edit-input,
.sbv-edit-textarea {
  background: rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  transition: all 0.22s var(--ease-glass) !important;
  outline: none !important;
}
.card-input:focus,
.card-select:focus,
.card-textarea:focus,
.meta-input:focus,
.lform-input:focus,
.member-form-input:focus,
.np-input:focus,
.pm-config-input:focus,
.weather-city-input:focus,
.scene-picker-search:focus,
.fr-finput:focus,
.fr-fselect:focus,
.sbv-edit-input:focus,
.sbv-edit-textarea:focus {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 3px rgba(232, 197, 71, 0.15),
    0 0 20px rgba(232, 197, 71, 0.1) !important;
  background: rgba(0, 0, 0, 0.35) !important;
}
body.light .card-input,
body.light .card-select,
body.light .card-textarea,
body.light .meta-input,
body.light .lform-input,
body.light .member-form-input,
body.light .np-input,
body.light .pm-config-input,
body.light .weather-city-input,
body.light .scene-picker-search,
body.light .fr-finput,
body.light .fr-fselect,
body.light .sbv-edit-input,
body.light .sbv-edit-textarea {
  background: rgba(255, 255, 255, 0.65) !important;
  color: var(--text) !important;
}
body.light .card-input:focus,
body.light .meta-input:focus {
  background: rgba(255, 255, 255, 0.85) !important;
}

/* ---------- Badges & chips (pill + glow) ---------- */
.fr-badge,
.production-badge,
.conv-depto-chip,
.luz-badge,
.trash-badge,
.pm-rule-chip,
.re-pages-badge,
.login-tab-badge {
  border-radius: 999px !important;
  padding: 4px 12px !important;
  background: var(--glass-bg-weak) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border) !important;
  font-family: "DM Mono", monospace;
  letter-spacing: 0.8px;
  transition: all 0.22s var(--ease-glass) !important;
}
.trash-badge {
  background: linear-gradient(
    135deg,
    rgba(232, 197, 71, 0.2),
    rgba(255, 107, 53, 0.12)
  ) !important;
  border-color: var(--glass-border-accent) !important;
  color: var(--accent) !important;
}

/* ---------- Dropzones ---------- */
.dropzone-pdf,
.dropzone-img,
.upload-zone {
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 2px dashed var(--glass-border-strong) !important;
  border-radius: 14px !important;
  transition: all 0.25s var(--ease-glass) !important;
}
.dropzone-pdf:hover,
.dropzone-img:hover,
.upload-zone:hover {
  border-color: var(--accent) !important;
  background: rgba(232, 197, 71, 0.06) !important;
  box-shadow:
    inset 0 0 40px rgba(232, 197, 71, 0.08),
    0 0 20px rgba(232, 197, 71, 0.12) !important;
}

/* ---------- Toast & alerts ---------- */
.undo-toast {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturate)) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: 14px !important;
  box-shadow: var(--glass-shadow-lg) !important;
}
.undo-toast-bar {
  background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  border-radius: 0 0 14px 14px !important;
}
.pm-alert {
  background: var(--glass-bg-med) !important;
  backdrop-filter: blur(var(--glass-blur-sm)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: 12px !important;
}

.testing-banner {
  background: linear-gradient(
    90deg,
    rgba(255, 107, 53, 0.18),
    rgba(232, 197, 71, 0.14)
  ) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--glass-border-accent) !important;
}

/* ---------- Stats & headers ---------- */
.stats-bar,
.stat-item {
  background: var(--glass-bg-weak) !important;
  backdrop-filter: blur(var(--glass-blur-sm)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
}

.cloud-status {
  background: var(--glass-bg-weak) !important;
  backdrop-filter: blur(var(--glass-blur-sm)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
}
.cloud-status--ok {
  border-color: rgba(106, 184, 138, 0.4) !important;
  color: #7ecb99 !important;
  box-shadow: 0 0 12px rgba(106, 184, 138, 0.18) !important;
}

/* ---------- Títulos refinados ---------- */
.dash-title,
.login-title,
.lixeira-title,
.gmodal-title,
.gmodal-title-top,
.mod-title,
.od-title,
.pm-title,
.fr-phead-title,
.member-modal-title {
  letter-spacing: 1.8px !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
body.light .dash-title,
body.light .login-title,
body.light .lixeira-title,
body.light .gmodal-title,
body.light .mod-title,
body.light .pm-title {
  text-shadow: none;
}

.dash-greeting,
.login-eyebrow,
.dash-section-label,
.section-label {
  text-transform: uppercase;
  letter-spacing: 2.5px !important;
  color: var(--muted) !important;
  font-size: 10px !important;
}

/* ---------- Tabelas / stripboard ---------- */
.stripboard,
.scenes-table,
.crew-table,
.cast-grid,
.sb-grid {
  background: var(--glass-bg-weak) !important;
  backdrop-filter: blur(var(--glass-blur-sm)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}
.strip-header,
.hotcost-head,
.orc-item-head {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  border-bottom: 1px solid var(--glass-border-strong) !important;
  position: sticky;
  top: 0;
  z-index: 2;
}
body.light .strip-header,
body.light .hotcost-head,
body.light .orc-item-head {
  background: rgba(255, 255, 255, 0.55) !important;
}

/* ---------- Dashboard / Projects grid ---------- */
.projects-grid {
  gap: 16px !important;
}
.dash-header {
  padding: 24px !important;
}

/* ---------- City dropdown & scene picker ---------- */
.city-dropdown,
.scene-picker-list,
.scene-picker-filters {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturate)) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--glass-shadow-lg) !important;
}

/* ---------- Trash panel specifics ---------- */
.trash-toggle {
  background: var(--glass-bg-weak) !important;
  backdrop-filter: blur(var(--glass-blur-sm)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  transition: all 0.22s var(--ease-glass) !important;
}
.trash-toggle:hover {
  border-color: var(--glass-border-accent) !important;
  color: var(--accent) !important;
}

/* ---------- Loader & progress ---------- */
.pm-loader {
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-top-color: var(--accent) !important;
  filter: drop-shadow(0 0 8px rgba(232, 197, 71, 0.4));
}
.progress-bar-bg {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.progress-bar-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  box-shadow: 0 0 12px rgba(232, 197, 71, 0.4);
  border-radius: 999px !important;
}

/* ---------- Scrollbar customizada ---------- */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(232, 197, 71, 0.25);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.22s var(--ease-glass);
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 197, 71, 0.55);
  background-clip: padding-box;
}
body.light *::-webkit-scrollbar-thumb {
  background: rgba(184, 149, 10, 0.28);
  background-clip: padding-box;
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 197, 71, 0.3) transparent;
}

/* ---------- Animações auxiliares ---------- */
@keyframes glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 18px rgba(232, 197, 71, 0.25);
  }
  50% {
    box-shadow: 0 0 32px rgba(232, 197, 71, 0.45);
  }
}
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Aplica pulso a elementos "ao vivo" */
.revision-dot {
  animation: glow-pulse 2.4s ease-in-out infinite;
}

/* ---------- Small polishes (transições globais suaves) ---------- */
.nav-tab,
.sidebar-tab,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-cancel,
.btn-close,
.btn-add,
.btn-entrar,
.btn-logout,
.btn-equipe,
.meta-card,
.foto-card,
.weather-card,
.pm-config-card,
.card-input,
.meta-input,
.lform-input,
.login-tab,
.arte-tab,
.foto-tab,
.sbv-tab,
.roteiro-tab,
.member-modal-tab {
  will-change: transform, box-shadow, background, border-color;
}

/* ---------- FIM do RADICAL GLASSMORPHISM OVERRIDE ---------- */

/* ========================================================= */
/* RADICAL GLASSMORPHISM OVERRIDE v1 — aplicado em 2026-04-17 */
/* Arquivo: estilos.css | Apêndice de ~400 linhas */
/* ========================================================= */

/* ═══════════════════════════════════════════════════════════ */
/* SEÇÃO 1: NOVOS TOKENS CSS — GLASS PALETTE */
/* ═══════════════════════════════════════════════════════════ */

:root {
  --glass-bg-strong: rgba(20, 20, 28, 0.55) !important;
  --glass-bg-weak: rgba(25, 25, 35, 0.35) !important;
  --glass-border-strong: rgba(255, 255, 255, 0.08) !important;
  --glass-border-accent: rgba(232, 197, 71, 0.22) !important;
  --glass-blur: 18px !important;
  --glass-saturate: 160% !important;
  --glass-shadow-lg:
    0 12px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  --glow-accent:
    0 0 20px rgba(232, 197, 71, 0.35), 0 0 40px rgba(232, 197, 71, 0.12) !important;
  --glow-danger: 0 0 16px rgba(255, 80, 60, 0.35) !important;
  --glow-subtle: 0 0 12px rgba(232, 197, 71, 0.2) !important;
  --radius-sm: 8px !important;
  --radius-md: 14px !important;
  --radius-lg: 20px !important;
  --radius-xl: 28px !important;
  --ease-glass: cubic-bezier(0.4, 0, 0.2, 1) !important;
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

body.light {
  --glass-bg-strong: rgba(255, 255, 255, 0.58) !important;
  --glass-bg-weak: rgba(248, 248, 252, 0.4) !important;
  --glass-border-strong: rgba(0, 0, 0, 0.06) !important;
  --glass-border-accent: rgba(232, 197, 71, 0.18) !important;
  --glass-shadow-lg:
    0 12px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  --glow-accent:
    0 0 20px rgba(232, 197, 71, 0.25), 0 0 40px rgba(232, 197, 71, 0.08) !important;
  --glow-danger: 0 0 16px rgba(255, 80, 60, 0.25) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* SEÇÃO 2: AURORA FUNDO — GRADIENTE ANIMADO MESH */
/* ═══════════════════════════════════════════════════════════ */

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background:
    radial-gradient(
      ellipse at 20% 50%,
      rgba(232, 197, 71, 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 80%,
      rgba(255, 107, 53, 0.12) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 50% 0%,
      rgba(74, 111, 165, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 90% 10%,
      rgba(100, 180, 255, 0.08) 0%,
      transparent 40%
    ),
    linear-gradient(180deg, #0a0a0b 0%, #14141c 50%, #1a1a26 100%);
  animation: aurora-drift 50s ease-in-out infinite;
  pointer-events: none;
}

body.light::before {
  background:
    radial-gradient(
      ellipse at 20% 50%,
      rgba(232, 197, 71, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 80%,
      rgba(255, 107, 53, 0.06) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 50% 0%,
      rgba(100, 180, 255, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 90% 10%,
      rgba(100, 180, 255, 0.04) 0%,
      transparent 40%
    ),
    linear-gradient(180deg, #fafafa 0%, #f5f5f8 50%, #efeff5 100%);
  animation: aurora-drift 55s ease-in-out infinite;
}

@keyframes aurora-drift {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(30px, -20px) rotate(10deg);
  }
  50% {
    transform: translate(-20px, 30px) rotate(20deg);
  }
  75% {
    transform: translate(-40px, -10px) rotate(10deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* ═══════════════════════════════════════════════════════════ */
/* SEÇÃO 3: MODAIS & PAINÉIS PRINCIPAIS */
/* ═══════════════════════════════════════════════════════════ */

.modal-panel,
.gmodal,
.lixeira-modal,
.login-panel,
.full-card {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturate)) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--glass-shadow-lg) !important;
  transition: all 0.3s var(--ease-glass);
}

.modal-panel:hover,
.gmodal:hover,
.full-card:hover {
  border-color: var(--glass-border-accent);
  box-shadow: var(--glass-shadow-lg), var(--glow-subtle);
}

.gmodal-overlay,
.overlay-base {
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}

.gmodal-header,
.lixeira-header {
  background: rgba(0, 0, 0, 0.25) !important;
  border-bottom: 1px solid var(--glass-border-strong) !important;
  padding: 20px 24px !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.gmodal-title,
.lixeira-title,
.login-title {
  color: var(--accent) !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
}

.gmodal-footer {
  background: rgba(0, 0, 0, 0.15) !important;
  border-top: 1px solid var(--glass-border-strong) !important;
  padding: 16px 24px !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  display: flex !important;
  gap: 12px !important;
}

.gmodal-close,
.btn-close {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--glass-border-strong) !important;
  color: var(--muted) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  transition: all 0.2s var(--ease-glass) !important;
}

.gmodal-close:hover,
.btn-close:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* SEÇÃO 4: CARDS & SUPERFÍCIES SECUNDÁRIAS */
/* ═══════════════════════════════════════════════════════════ */

.meta-card,
.foto-card,
.login-card,
.dash-header,
.weather-card,
.pm-config-card {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturate)) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.25s var(--ease-glass) !important;
  padding: 20px 24px !important;
}

.meta-card:hover,
.foto-card:hover,
.weather-card:hover {
  border-color: var(--glass-border-accent);
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow-lg), var(--glow-subtle);
}

/* ═══════════════════════════════════════════════════════════ */
/* SEÇÃO 5: SIDEBAR & NAVEGAÇÃO */
/* ═══════════════════════════════════════════════════════════ */

.sidebar {
  background: rgba(15, 15, 20, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  border-right: 1px solid var(--glass-border-strong) !important;
}

.sidebar-header {
  background: rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid var(--glass-border-strong) !important;
  padding: 20px 16px !important;
}

.sidebar-tab {
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin: 6px 8px !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.25s var(--ease-glass) !important;
  position: relative !important;
}

.sidebar-tab:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  transform: translateX(4px);
  color: var(--text) !important;
}

.sidebar-tab.active {
  background: linear-gradient(
    135deg,
    rgba(232, 197, 71, 0.15),
    rgba(255, 107, 53, 0.1)
  ) !important;
  border: 1px solid var(--glass-border-accent) !important;
  color: var(--accent) !important;
  box-shadow: var(--glow-subtle) !important;
  animation: glow-pulse 2s ease-in-out infinite;
}

.nav-tab {
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s var(--ease-glass) !important;
}

.nav-tab:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.nav-tab.active {
  background: linear-gradient(
    135deg,
    rgba(232, 197, 71, 0.2),
    rgba(255, 107, 53, 0.15)
  ) !important;
  border: 1px solid var(--glass-border-accent) !important;
  color: var(--accent) !important;
}


/* ═══════════════════════════════════════════════════════════ */
/* SEÇÃO 7: BOTÕES — PRIMÁRIOS & SECUNDÁRIOS */
/* ═══════════════════════════════════════════════════════════ */

.btn-primary,
.btn-entrar,
.pm-cta-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  border: none !important;
  color: #0a0a0b !important;
  font-weight: 600 !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 24px !important;
  cursor: pointer !important;
  box-shadow: var(--glow-accent) !important;
  transition: all 0.3s var(--ease-bounce) !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-primary:hover,
.btn-entrar:hover,
.pm-cta-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    var(--glow-accent),
    0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.btn-primary:active,
.btn-entrar:active,
.pm-cta-btn:active {
  transform: translateY(-1px) !important;
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 0.6s ease-in-out forwards;
  pointer-events: none;
}

.btn-primary:hover::before {
  animation: shimmer 0.6s ease-in-out infinite;
  animation-delay: 0.3s;
}

.btn-secondary,
.btn-ghost,
.btn-cancel {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text) !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  transition: all 0.25s var(--ease-glass) !important;
}

.btn-secondary:hover,
.btn-ghost:hover,
.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 12px rgba(232, 197, 71, 0.15) !important;
}

.btn-danger {
  background: rgba(255, 80, 60, 0.15) !important;
  border: 1px solid rgba(255, 80, 60, 0.3) !important;
  color: #ff5436 !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  transition: all 0.25s var(--ease-glass) !important;
}

.btn-danger:hover {
  background: rgba(255, 80, 60, 0.25) !important;
  border-color: #ff5436 !important;
  box-shadow: var(--glow-danger) !important;
  transform: translateY(-2px);
}

.btn-logout,
.btn-equipe,
.theme-btn,
.cal-nav-btn,
.cal-footer-btn,
.btn-add {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  transition: all 0.2s var(--ease-glass) !important;
}

.btn-logout:hover,
.btn-equipe:hover,
.theme-btn:hover,
.cal-nav-btn:hover,
.cal-footer-btn:hover,
.btn-add:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* SEÇÃO 8: INPUTS & FORMULÁRIOS */
/* ═══════════════════════════════════════════════════════════ */

.card-input,
.card-select,
.card-textarea,
.meta-input,
.lform-input,
.member-form-input,
.np-input,
.pm-config-input,
.weather-city-input,
.scene-picker-search,
.fr-finput,
.fr-fselect,
.sbv-edit-input,
.sbv-edit-textarea {
  background: rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  padding: 10px 14px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  transition: all 0.25s var(--ease-glass) !important;
}

.card-input:focus,
.card-select:focus,
.card-textarea:focus,
.meta-input:focus,
.lform-input:focus,
.member-form-input:focus,
.np-input:focus,
.pm-config-input:focus,
.weather-city-input:focus,
.scene-picker-search:focus,
.fr-finput:focus,
.fr-fselect:focus,
.sbv-edit-input:focus,
.sbv-edit-textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 3px rgba(232, 197, 71, 0.15),
    inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  background: rgba(0, 0, 0, 0.3) !important;
}

body.light .card-input,
body.light .card-select,
body.light .card-textarea,
body.light .meta-input,
body.light .lform-input,
body.light .member-form-input,
body.light .np-input,
body.light .pm-config-input,
body.light .weather-city-input,
body.light .scene-picker-search,
body.light .fr-finput,
body.light .fr-fselect,
body.light .sbv-edit-input,
body.light .sbv-edit-textarea {
  background: rgba(255, 255, 255, 0.6) !important;
  color: #1a1a1a !important;
}

body.light .card-input::placeholder,
body.light .weather-city-input::placeholder,
body.light .scene-picker-search::placeholder {
  color: rgba(0, 0, 0, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* SEÇÃO 9: BADGES & CHIPS */
/* ═══════════════════════════════════════════════════════════ */

.fr-badge,
.production-badge,
.conv-depto-chip,
.luz-badge,
.trash-badge,
.pm-rule-chip,
.re-pages-badge {
  background: rgba(232, 197, 71, 0.15) !important;
  border: 1px solid var(--glass-border-accent) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  color: var(--accent) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: inline-block !important;
  transition: all 0.2s var(--ease-glass) !important;
}

.fr-badge:hover,
.production-badge:hover,
.conv-depto-chip:hover {
  background: rgba(232, 197, 71, 0.25) !important;
  box-shadow: var(--glow-subtle) !important;
}

.trash-badge {
  background: rgba(255, 80, 60, 0.15) !important;
  border-color: rgba(255, 80, 60, 0.3) !important;
  color: #ff5436 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 16px !important;
  min-width: 16px !important;
  padding: 0 6px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* SEÇÃO 10: TABELAS & STRIPBOARD */
/* ═══════════════════════════════════════════════════════════ */

.stripboard,
.scenes-table,
.crew-table {
  background: transparent !important;
  border-collapse: collapse !important;
}

.strip-header,
.stripboard thead {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid var(--glass-border-strong) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

.strip-header-cell,
.stripboard th {
  padding: 12px 14px !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  text-align: left !important;
  border-right: 1px solid var(--glass-border-strong) !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.8px !important;
}

.stripboard tbody tr {
  border-bottom: 1px solid var(--glass-border-strong) !important;
  background: transparent !important;
  transition: background 0.2s var(--ease-glass) !important;
}

.stripboard tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02) !important;
}

.stripboard tbody tr:hover {
  background: rgba(232, 197, 71, 0.08) !important;
}

.stripboard td {
  padding: 10px 12px !important;
  border-right: 1px solid var(--glass-border-strong) !important;
  font-size: 12px !important;
}

.sb-grid {
  background: transparent !important;
  gap: 8px !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* SEÇÃO 11: AUXILIARES & COMPONENTES ESPECIAIS */
/* ═══════════════════════════════════════════════════════════ */

.undo-toast {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--glass-shadow-lg) !important;
  padding: 14px 18px !important;
}

.undo-toast-bar {
  background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  height: 3px !important;
  border-radius: 2px !important;
}

.pm-alert {
  background: rgba(255, 107, 53, 0.15) !important;
  border: 1px solid rgba(255, 107, 53, 0.3) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
  color: var(--accent2) !important;
}

.pm-loader {
  border: 2px solid var(--glass-border-strong) !important;
  border-top: 2px solid var(--accent) !important;
  border-radius: 50% !important;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.stat-item,
.stats-bar {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
  transition: all 0.25s var(--ease-glass) !important;
}

.stat-item:hover {
  border-color: var(--glass-border-accent);
  background: rgba(255, 255, 255, 0.05) !important;
}

.cloud-status {
  background: rgba(100, 180, 255, 0.1) !important;
  border: 1px solid rgba(100, 180, 255, 0.3) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  color: #64b4ff !important;
  font-size: 11px !important;
}

.testing-banner {
  background: linear-gradient(
    135deg,
    rgba(255, 107, 53, 0.2),
    rgba(232, 197, 71, 0.15)
  ) !important;
  border: 1px solid var(--glass-border-accent) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
  color: var(--accent) !important;
  text-align: center !important;
  font-size: 12px !important;
}

.city-dropdown {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--glass-shadow-lg) !important;
  z-index: 100 !important;
}

.dropzone-pdf,
.dropzone-img {
  background: rgba(0, 0, 0, 0.15) !important;
  border: 2px dashed var(--glass-border-accent) !important;
  border-radius: var(--radius-md) !important;
  padding: 30px !important;
  transition: all 0.3s var(--ease-glass) !important;
}

.dropzone-pdf:hover,
.dropzone-img:hover {
  background: rgba(232, 197, 71, 0.1) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--glow-subtle) !important;
}

.upload-zone {
  background: rgba(0, 0, 0, 0.2) !important;
  border: 2px dashed var(--glass-border-accent) !important;
  border-radius: var(--radius-md) !important;
  padding: 24px !important;
  text-align: center !important;
  transition: all 0.3s var(--ease-glass) !important;
}

.upload-zone:hover {
  background: rgba(232, 197, 71, 0.15) !important;
  border-color: var(--accent) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* SEÇÃO 12: SCROLLBAR CUSTOMIZADA */
/* ═══════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(232, 197, 71, 0.3);
  border-radius: 4px;
  transition: all 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 197, 71, 0.5);
}

body.light ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

body.light ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* ═══════════════════════════════════════════════════════════ */
/* SEÇÃO 13: ANIMAÇÕES FINAIS & TRANSIÇÕES GLOBAIS */
/* ═══════════════════════════════════════════════════════════ */

@keyframes glow-pulse {
  0%,
  100% {
    box-shadow: var(--glow-subtle);
  }
  50% {
    box-shadow:
      var(--glow-subtle),
      0 0 20px rgba(232, 197, 71, 0.35);
  }
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

* {
  transition-timing-function: var(--ease-glass) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* FIM DO GLASSMORPHISM RADICAL OVERRIDE */
/* ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════ */
/* FROSTED GLASS — modais com vidro fosco (2026-04-17)          */
/* Intensifica blur + opacidade + textura de vidro nos modais   */
/* Override final: vence todas as regras de modal anteriores    */
/* ═══════════════════════════════════════════════════════════ */

/* Superfícies de modal propriamente ditas */
.modal-panel,
.gmodal,
.lixeira-modal {
  /* Base em vidro fosco: rgba mais opaca + gradient sutil interno */
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 40%,
      rgba(0, 0, 0, 0.04) 100%
    ),
    rgba(20, 20, 28, 0.82) !important;
  backdrop-filter: blur(48px) saturate(180%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(48px) saturate(180%) brightness(1.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-top-color: rgba(255, 255, 255, 0.22) !important;
  border-radius: 22px !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 8px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
  position: relative;
  overflow-y: auto;
}

/* Brilho sutil no topo interno — reforça aspecto de vidro */
.modal-panel::before,
.gmodal::before,
.lixeira-modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
  border-radius: 22px 22px 0 0;
}

/* Garantir que o conteúdo dos modais fique acima do pseudo-brilho */
.modal-panel > *,
.gmodal > *,
.lixeira-modal > * {
  position: relative;
  z-index: 1;
}

/* Headers e footers de modais — mantém translucência mas com divisor suave */
.gmodal-header,
.lixeira-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.gmodal-footer {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Overlays mais densos — acentua a sensação de foco no modal */
.overlay-base,
.gmodal-overlay {
  background: rgba(5, 5, 10, 0.55) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
}

/* Tema LIGHT: vidro fosco branco translúcido */
body.light .modal-panel,
body.light .gmodal,
body.light .lixeira-modal {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.55) 40%,
      rgba(240, 237, 230, 0.55) 100%
    ),
    rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-top-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow:
    0 24px 60px rgba(40, 40, 30, 0.22),
    0 8px 20px rgba(40, 40, 30, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05) !important;
}
body.light .modal-panel::before,
body.light .gmodal::before,
body.light .lixeira-modal::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    transparent 100%
  );
}
body.light .gmodal-header,
body.light .lixeira-header {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
body.light .gmodal-footer {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}
body.light .overlay-base,
body.light .gmodal-overlay {
  background: rgba(50, 50, 60, 0.3) !important;
}

/* Se um modal é do tipo "erro" (ex: gmodal-error), mantém cor mas com vidro fosco */
.gmodal-error {
  background:
    linear-gradient(
      145deg,
      rgba(255, 80, 60, 0.1) 0%,
      rgba(255, 80, 60, 0.04) 100%
    ),
    rgba(30, 16, 10, 0.82) !important;
  border-color: rgba(255, 120, 90, 0.3) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(255, 80, 60, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* FIM DO FROSTED GLASS nos modais                              */
/* ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════ */
/* ORÇAMENTO v2 — Compilação / Resumo / Realizado               */
/* ═══════════════════════════════════════════════════════════ */

/* ---- Filtro de fase (botões pílula) ---- */
.orc-fase-btn {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 999px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.orc-fase-btn:hover {
  color: var(--fg);
  border-color: var(--accent);
}
.orc-fase-btn.active {
  background: var(--accent);
  color: #1a1410;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(232, 197, 71, 0.25);
}
body.light .orc-fase-btn.active {
  color: #fff;
  box-shadow: 0 2px 8px rgba(184, 149, 10, 0.35);
}

/* ---- Bloco de fase (Compilação) ---- */
.orc-fase-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.orc-fase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.orc-fase-title {
  font-family: "DM Mono", monospace;
  font-size: 13px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.orc-fase-total {
  font-family: "DM Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

/* ---- Bloco de categoria (dentro da fase) ---- */
.orc-cat-block {
  margin-bottom: 14px;
}
.orc-cat-block:last-child {
  margin-bottom: 0;
}
.orc-cat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  margin-bottom: 8px;
}
body.light .orc-cat-header {
  background: rgba(0, 0, 0, 0.03);
}
.orc-cat-icon {
  font-size: 16px;
  line-height: 1;
}
.orc-cat-label {
  flex: 1;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.orc-cat-total {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

/* ---- Tabela de itens do orçamento ---- */
.orc-itens-tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: "DM Mono", monospace;
  font-size: 11px;
}
.orc-itens-tbl thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.orc-itens-tbl tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.12s ease;
}
body.light .orc-itens-tbl tbody tr {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
.orc-itens-tbl tbody tr:hover {
  background: rgba(232, 197, 71, 0.05);
}
.orc-itens-tbl tbody tr:last-child {
  border-bottom: none;
}
.orc-itens-tbl td {
  padding: 9px 10px;
  color: var(--fg);
  vertical-align: middle;
}
.orc-itens-tbl td:nth-child(2),
.orc-itens-tbl td:nth-child(3),
.orc-itens-tbl td:nth-child(5),
.orc-itens-tbl td:nth-child(6) {
  text-align: right;
}

/* ---- Badges AUTO / MANUAL / EDIT ---- */
.orc-badge-auto {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(99, 102, 241, 0.15);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 4px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-right: 6px;
  vertical-align: middle;
}
.orc-badge-edit {
  background: rgba(232, 197, 71, 0.18);
  color: #e8c547;
  border-color: rgba(232, 197, 71, 0.45);
}
.orc-badge-man {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--muted);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 4px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-right: 6px;
  vertical-align: middle;
}

/* ---- Status pill (cor inline via style, aqui shape) ---- */
.orc-status-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ---- Botão X de remover linha ---- */
.orc-btn-x {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.orc-btn-x:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: #ef4444;
  color: #ef4444;
}

/* ---- Empty state ---- */
.orc-empty {
  padding: 32px 20px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
}
.orc-empty b {
  color: var(--fg);
  font-weight: 700;
}

/* ---- Resumo: Cards ---- */
.orc-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.orc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 16px;
  text-align: left;
  transition: border-color 0.15s ease;
}
.orc-card:hover {
  border-color: var(--accent);
}
.orc-card.danger {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}
.orc-card-val {
  font-family: "DM Mono", monospace;
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.orc-card.danger .orc-card-val {
  color: #ef4444;
}
.orc-card-label {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---- Progress bar (teto) ---- */
.orc-progress {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.orc-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 10px 0 0 10px;
  opacity: 0.2;
  transition:
    width 0.4s ease,
    background 0.4s ease;
  pointer-events: none;
}
.orc-progress-label {
  position: relative;
  z-index: 1;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ---- Section titles ---- */
.orc-section-title {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ---- Fase bars (distribuição horizontal) ---- */
.orc-fase-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.orc-fase-bar {
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  gap: 12px;
  align-items: center;
  font-family: "DM Mono", monospace;
  font-size: 11px;
}
.orc-fase-bar-label {
  color: var(--fg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
}
.orc-fase-bar-track {
  height: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 5px;
  overflow: hidden;
}
body.light .orc-fase-bar-track {
  background: rgba(0, 0, 0, 0.05);
}
.orc-fase-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.4s ease;
}
.orc-fase-bar-val {
  text-align: right;
  color: var(--fg);
  font-weight: 700;
}

/* ---- Category ranking (top 10) ---- */
.orc-cat-rank {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.orc-cat-rank-row {
  display: grid;
  grid-template-columns: 220px 1fr 120px;
  gap: 10px;
  align-items: center;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  padding: 4px 0;
}
.orc-cat-rank-lbl {
  color: var(--fg);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
}
.orc-cat-rank-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}
body.light .orc-cat-rank-track {
  background: rgba(0, 0, 0, 0.05);
}
.orc-cat-rank-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.orc-cat-rank-val {
  text-align: right;
  color: var(--accent);
  font-weight: 700;
}

/* ---- Responsividade (tablets/mobile) ---- */
@media (max-width: 900px) {
  .orc-itens-tbl {
    font-size: 10px;
  }
  .orc-itens-tbl td {
    padding: 7px 6px;
  }
  .orc-itens-tbl thead th {
    padding: 6px 6px;
    font-size: 8px;
  }
  .orc-fase-bar {
    grid-template-columns: 100px 1fr 100px;
  }
  .orc-cat-rank-row {
    grid-template-columns: 150px 1fr 80px;
  }
}
/* ═══════════════════════════════════════════════════════════ */
/* FIM DO ORÇAMENTO v2                                          */
/* ═══════════════════════════════════════════════════════════ */

/* ─── Correções de contraste no modo claro ─────────────────── */

/* Botão "Pré-montagem" — o gradiente laranja é aplicado em ambos modos,
   mas o texto interno estava herdando --accent/--muted (amarelo/cinza)
   que ficam ilegíveis sobre o fundo quente. Força escuro em ambos modos. */
.pm-cta-btn .pm-cta-label {
  color: #1a1410 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}
.pm-cta-btn .pm-cta-sub {
  color: rgba(26, 20, 16, 0.75) !important;
}
.pm-cta-btn .pm-cta-arrow {
  color: #1a1410 !important;
  opacity: 0.85;
}
.pm-cta-btn .pm-cta-icon {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #1a1410 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

/* Modo claro — sidebar e seu cabeçalho com fundo branco
   (há regras globais posteriores que forçam rgba(15,15,20,0.4) na
   .sidebar e rgba(0,0,0,0.2) no .sidebar-header — precisam ser
   desmanchadas no light mode, senão a coluna fica cinza escuro). */
body.light .sidebar {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.light .sidebar-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #5a5a50 !important;
}
body.light .sidebar-label {
  color: #5a5a50 !important;
}
body.light .trash-toggle {
  background: #f6f4ee !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #5a5a50 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.light .trash-toggle:hover {
  background: rgba(248, 113, 113, 0.1) !important;
  border-color: rgba(248, 113, 113, 0.35) !important;
  color: #c04040 !important;
}
body.light .btn-add {
  background: #f6f4ee !important;
  color: #3a3a32 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
body.light .btn-add:hover {
  background: #fef6de !important;
  border-color: rgba(184, 149, 10, 0.35) !important;
  color: #b8950a !important;
}

/* Modo claro — cards de dia com fundo branco e hover destacado */
body.light .day-item {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  color: var(--text) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
body.light .day-num {
  color: #3a3a32 !important;
}
body.light .day-date,
body.light .day-pages {
  color: #5a5a50 !important;
}
/* Hover: tonalidade âmbar clara — único estado com cor de fundo */
body.light .day-item:hover {
  background: #fef6de !important;
}
/* Ativo: mantém fundo branco, destaca apenas a barra lateral âmbar
   (a ::before já existe com 3px sólidos em --accent) e o texto âmbar */
body.light .day-item.active {
  background: #ffffff !important;
  border-bottom-color: rgba(184, 149, 10, 0.25) !important;
}
body.light .day-item.active::before {
  width: 4px !important;
  background: #b8950a !important;
}
body.light .day-item.active .day-num {
  color: #b8950a !important;
}
body.light .day-item.active .day-date,
body.light .day-item.active .day-pages {
  color: #7a6a2a !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* Botão "+ novo dia" na sidebar — destaque forte âmbar        */
/* Escopo: somente o .btn-add dentro do .sidebar-header        */
/* (não afeta btn-logout, btn-equipe, theme-btn, cal-*-btn)    */
/* ═══════════════════════════════════════════════════════════ */
.sidebar-header .btn-add {
  background: linear-gradient(135deg, #e8c547 0%, #c9a02e 100%) !important;
  color: #1a1410 !important;
  border: 1px solid #b8950a !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  padding: 6px 12px !important;
  min-width: 34px !important;
  box-shadow:
    0 2px 8px rgba(232, 197, 71, 0.35),
    0 0 0 1px rgba(232, 197, 71, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease !important;
}
.sidebar-header .btn-add:hover {
  background: linear-gradient(135deg, #f0d15a 0%, #d4ab33 100%) !important;
  border-color: #e8c547 !important;
  color: #1a1410 !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
  box-shadow:
    0 4px 14px rgba(232, 197, 71, 0.55),
    0 0 0 1px rgba(232, 197, 71, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.sidebar-header .btn-add:active {
  transform: translateY(0) !important;
  filter: brightness(0.95) !important;
}

/* Light mode — mesmo tratamento, sombra mais suave */
body.light .sidebar-header .btn-add {
  background: linear-gradient(135deg, #e8c547 0%, #b8950a 100%) !important;
  color: #1a1410 !important;
  border: 1px solid #9a7a08 !important;
  box-shadow:
    0 2px 6px rgba(184, 149, 10, 0.35),
    0 0 0 1px rgba(184, 149, 10, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
body.light .sidebar-header .btn-add:hover {
  background: linear-gradient(135deg, #f0d15a 0%, #c9a02e 100%) !important;
  border-color: #b8950a !important;
  color: #1a1410 !important;
  box-shadow:
    0 4px 12px rgba(184, 149, 10, 0.5),
    0 0 0 1px rgba(184, 149, 10, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* ===== ROTEIRO V4 ===== */

/* .roteiro-actor-toast e .rat-* removidos — toast de personagem desativado */
.roteiro-prop-menu {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  z-index: 5002;
  min-width: 200px;
  overflow: hidden;
  display: none;
}
.roteiro-prop-menu button {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  text-align: left;
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s;
}
.roteiro-prop-menu button:hover {
  background: var(--surface2);
}

.roteiro-loc-autocomplete {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  z-index: 5003;
  min-width: 280px;
  max-width: 360px;
  max-height: 280px;
  overflow-y: auto;
  display: none;
}
.rla-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.rla-item:last-child {
  border-bottom: none;
}
.rla-item:hover {
  background: var(--surface2);
}
.rla-nome {
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 2px;
}
.rla-cidade {
  font-size: 10px;
  color: var(--muted);
  font-family: "DM Mono", monospace;
}

.roteiro-scene-row {
  position: relative;
  transition: opacity 0.15s;
}
.roteiro-scene-row.dragging {
  opacity: 0.5;
}
.roteiro-scene-row.drop-before::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}
.roteiro-scene-row.drop-after::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}
.roteiro-scene-row[draggable="true"] {
  cursor: grab;
}
.roteiro-scene-row[draggable="true"]:active {
  cursor: grabbing;
}

.roteiro-del-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.roteiro-del-btn:hover {
  color: var(--accent2) !important;
  background: rgba(255, 255, 255, 0.08);
}
.roteiro-scene-row:hover .roteiro-del-btn {
  opacity: 1 !important;
}

.bd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.bd-cell {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.bd-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.bd-val {
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
}

.bd-sec {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 16px;
  margin-bottom: 8px;
}

.bd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.bd-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text);
  font-family: "DM Mono", monospace;
}

.bd-list {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: none;
}
.bd-list li {
  font-size: 12px;
  color: var(--text);
  margin-bottom: 8px;
  position: relative;
  padding-left: 8px;
}
.bd-list li::before {
  content: "→";
  position: absolute;
  left: -16px;
  color: var(--accent);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 400;
}
.modal-overlay.active {
  display: flex;
}
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 90%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 16px 0;
  border-bottom: 1px solid var(--border);
}
.modal-close {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.modal-close:hover {
  color: var(--text);
}
.modal-body {
  padding: 24px;
}
.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 20px 24px;
  border-top: 1px solid var(--border);
}

/* WriterDuet Inspired UI */
.wd-toolbar {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  align-items: center;
  flex-wrap: wrap;
}
.wd-toolbar button {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: 10px;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.wd-toolbar button:hover {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
.roteiro-page-wrapper {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
  padding: 40px 0;
  display: flex;
  justify-content: center;
}
textarea.roteiro-area {
  max-width: 850px;
  width: 90%;
  padding: 60px 80px;
  background: var(--surface);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin: 0 auto;
}
.roteiro-view {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
textarea.roteiro-area {
  min-height: 800px;
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════ */
/* OD MODALS — Seletor de Cenas & Modal de Detalhes da Cena   */
/* ═══════════════════════════════════════════════════════════ */

/* ---- Botão "+ Adicionar Cena a Este Dia" ---- */
.btn-add-scene-day {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 24px;
  padding: 11px 20px;
  background: transparent;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-add-scene-day:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(232, 197, 71, 0.05);
}

/* ---- Campo de busca do picker ---- */
.scene-picker-search {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  outline: none;
  margin-bottom: 12px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.scene-picker-search:focus {
  border-color: var(--accent);
}
.scene-picker-search::placeholder {
  color: var(--muted);
}

/* ---- Filtros do picker ---- */
.scene-picker-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.scene-picker-filter {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
}
.scene-picker-filter:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.scene-picker-filter.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1410;
  font-weight: 700;
}

/* ---- Lista do picker ---- */
.scene-picker-list {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
}

/* ---- Item da lista ---- */
.scene-picker-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.scene-picker-item:last-child {
  border-bottom: none;
}
.scene-picker-item:hover {
  background: rgba(232, 197, 71, 0.07);
}
.scene-picker-item.already-in-day {
  background: rgba(232, 197, 71, 0.04);
  cursor: default;
  opacity: 0.7;
}
.scene-picker-item.already-in-day:hover {
  background: rgba(232, 197, 71, 0.04);
}

/* ---- Número da cena no picker ---- */
.scene-picker-item-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 26px;
  color: var(--accent);
  line-height: 1;
  min-width: 36px;
  text-align: center;
  padding-top: 2px;
}
.scene-picker-item.already-in-day .scene-picker-item-num {
  color: var(--muted);
}

/* ---- Info da cena no picker ---- */
.scene-picker-item-info {
  flex: 1;
  min-width: 0;
}

/* ---- Contador de cenas filtradas ---- */
.scene-picker-count {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.5px;
  text-align: right;
  margin-top: 4px;
}

/* ---- Grid de informações do modal OD Scene ---- */
.od-scene-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}
.od-scene-info-field {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.od-scene-info-field.full {
  grid-column: span 2;
}
.od-info-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.od-info-value {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════ */
/* FOTOGRAFIA — Checkboxes de Cenas & Chips                    */
/* ═══════════════════════════════════════════════════════════ */

/* Grid de checkboxes de cenas nos modais */
.scene-cb-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Label de cada checkbox de cena */
.scene-cb-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
  background: var(--surface);
}
.scene-cb-label:hover {
  border-color: var(--accent2);
  background: rgba(99, 102, 241, 0.06);
}
.scene-cb-label:has(.scene-cb:checked) {
  border-color: var(--accent2);
  background: rgba(99, 102, 241, 0.12);
}

/* Checkbox real (oculto visualmente, substituído pelo estilo do label) */
.scene-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
  position: relative;
}
.scene-cb:checked {
  background: var(--accent2);
  border-color: var(--accent2);
}
.scene-cb:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 3px;
  width: 5px;
  height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* Número da cena no checkbox */
.scene-cb-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 14px;
  color: var(--accent2);
  line-height: 1;
}
.scene-cb-label:has(.scene-cb:checked) .scene-cb-num {
  color: var(--accent2);
}

/* Locação abreviada no checkbox */
.scene-cb-loc {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  color: var(--muted);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chip de cena nos cards de câmera/lente/filtro/iluminação */
.foto-scene-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
}

/* Checkbox "Marcar Todos" — destacado com borda accent */
.scene-cb-master {
  border-color: var(--accent) !important;
  background: rgba(232, 197, 71, 0.08) !important;
  margin-right: 4px;
}
.scene-cb-master .scene-cb-num {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Chip especial "EM TODAS AS CENAS" */
.foto-scene-chip-all {
  background: rgba(232, 197, 71, 0.12) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  font-size: 9.5px !important;
  padding: 2px 8px !important;
  letter-spacing: 0.5px;
  font-weight: 700;
}

/* ========================================================================= */
/* RESPONSIVIDADE E OTIMIZAÇÃO PARA CELULARES E TABLETS (MOBILE & TABLET v1) */
/* ========================================================================= */

.stripboard-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
}
.stripboard-responsive-wrapper .strip-header, 
.stripboard-responsive-wrapper .stripboard {
  min-width: 800px;
}

.logistica-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
}
.logistica-responsive-wrapper #log-dropzone {
  min-width: 760px;
}

@media (max-width: 768px) {
  /* Layout Geral */
  header {
    padding: 0 12px !important;
    gap: 8px !important;
  }
  .logo span {
    display: none !important;
  }
  .header-meta {
    display: none !important;
  }
  #btn-equipe-projeto span {
    display: none !important;
  }
  .btn-ghost span {
    display: none !important;
  }
  .theme-btn-label {
    display: none !important;
  }
  #cloud-status {
    font-size: 0 !important;
    padding: 6px !important;
  }
  #cloud-status::before {
    content: "☁️" !important;
    font-size: 14px !important;
  }

  /* Abas do Menu Horizontal */
  nav:not(.header-nav) {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px !important;
    white-space: normal !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  nav::-webkit-scrollbar {
    display: none !important;
  }
  .nav-tab {
    flex-shrink: 0 !important;
    padding: 6px 10px !important;
    font-size: 10.5px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin: 1px 0 !important;
  }
  .nav-tab.active {
    background: var(--accent) !important;
    color: var(--surface) !important;
    border-color: var(--accent) !important;
  }

  /* Ajuste das Locações para evitar quebras em telas menores */
  .loc-card-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .loc-card-header > div:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
  }

  /* Gaveta Lateral (Sidebar) de Dias de Filmagem */
  .app {
    position: relative !important;
  }
  .sidebar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 99 !important;
    background: #0f1015 !important; /* fundo opaco */
    border-right: 1px solid var(--border) !important;
    width: 260px !important;
    min-width: 260px !important;
    transform: translateX(0) !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
  }
  .sidebar.collapsed {
    transform: translateX(-100%) !important;
    width: 260px !important;
    min-width: 260px !important;
    border-right: none !important;
  }
  .sidebar.collapsed > * {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
  .sidebar-tab {
    position: absolute !important;
    top: 12px !important;
    left: 260px !important;
    z-index: 100 !important;
    width: 32px !important;
    height: 48px !important;
    border-radius: 0 8px 8px 0 !important;
    border-left: none !important;
    transition: left 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .sidebar.collapsed + .sidebar-tab {
    left: 0 !important;
  }
  .sidebar-tab-label {
    display: none !important;
  }
  .sidebar-tab-arrow {
    margin: 0 !important;
    font-size: 20px !important;
  }

  /* Área Principal */
  .main-content {
    width: 100% !important;
    min-width: auto !important;
    padding: 12px !important;
  }
  .section {
    padding: 12px !important;
  }

  /* Modais Adaptativos */
  .gmodal {
    padding: 16px !important;
    max-width: 98vw !important;
    max-height: 95vh !important;
  }
  .gmodal-footer {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Formulários e Estatísticas */
  .form-grid-3, .form-grid-4, .mod-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .od-meta-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .od-meta-locacao-card {
    grid-column: span 2 !important;
  }

  /* Tabelas Adaptativas */
  table, .scenes-table, .crew-table, .cast-table, .orc-itens-tbl {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }


  
  /* Ajuste no papel de roteiro e inputs do modal de escrita */
  #spe-paper, .spe-fmt-bar {
    width: 100% !important;
    min-width: 100% !important;
  }
  #spe-textarea {
    padding: 40px 16px 40px 16px !important;
  }
}

@media (max-width: 480px) {
  .form-grid-2, .form-grid-3, .form-grid-4, .mod-stats {
    grid-template-columns: 1fr !important;
  }
  .od-meta-grid {
    grid-template-columns: 1fr !important;
  }
  .od-meta-locacao-card {
    grid-column: span 1 !important;
  }

  /* Login */
  #screen-login > div:first-child {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center;
  }
  
  /* Dashboard */
  .dash-header {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: stretch !important;
  }
  .dash-header > div:last-child {
    display: flex;
    justify-content: flex-start;
  }
}

/* Alternar sidebar de cenas no Roteiro */
#roteiro-toggle-sidebar-btn {
  display: none !important;
}

.roteiro-layout.sidebar-hidden {
  grid-template-columns: 1fr !important;
}
.roteiro-layout.sidebar-hidden .roteiro-sidebar {
  display: none !important;
}

/* Em telas de tablet e celular (max-width: 1024px) */
@media (max-width: 1024px) {
  #roteiro-toggle-sidebar-btn {
    display: inline-block !important;
  }
  .header-meta {
    display: none !important;
  }
  .logo span {
    display: none !important;
  }
  nav:not(.header-nav) {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px !important;
    white-space: normal !important;
  }
  nav .nav-tab {
    flex-shrink: 0 !important;
    padding: 7px 12px !important;
    font-size: 11px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin: 2px 0 !important;
  }
  nav .nav-tab.active {
    background: var(--accent) !important;
    color: var(--surface) !important;
    border-color: var(--accent) !important;
  }
}

/* Sugestão de Orientação de Tela */
.orientation-banner {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid var(--accent);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 12px 16px;
  z-index: 9999;
  width: 90%;
  max-width: 400px;
  backdrop-filter: blur(10px);
  animation: slideUp 0.3s ease-out;
}

.orientation-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.orientation-close-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orientation-close-btn:hover {
  color: var(--accent);
}

@keyframes slideUp {
  from {
    transform: translate(-50%, 100px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

/* Mostra apenas em telas mobile na vertical (portrait) */
@media (max-width: 768px) and (orientation: portrait) {
  body:not(.orientation-dismissed) .orientation-banner {
    display: block !important;
  }
}

/* Correções de Scrollbars Múltiplas e Layout do Roteiro */
body.project-open {
  overflow: hidden !important;
}

#section-roteiro.active {
  display: flex !important;
  flex-direction: column;
  height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box;
  overflow: hidden;
  padding: 10px 14px !important;
}

#section-roteiro .mod-header {
  margin-bottom: 6px !important;
}

#section-roteiro .roteiro-layout {
  flex: 1;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

#section-roteiro .roteiro-view {
  padding: 16px 12px !important;
}

#section-roteiro .roteiro-paper-page {
  margin-bottom: 16px !important;
}

/* Aba expansora da barra lateral do roteiro */
.roteiro-expand-tab {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 140px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 0;
  box-sizing: border-box;
  z-index: 99;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}
.roteiro-expand-tab:hover {
  background: var(--surface);
  width: 28px;
}

.roteiro-expand-arrow {
  color: var(--accent);
  font-size: 14px;
  font-weight: bold;
  user-select: none;
  transition: transform 0.2s ease;
  line-height: 1;
}
.roteiro-expand-tab:hover .roteiro-expand-arrow {
  color: var(--accent2);
}

.roteiro-expand-label {
  font-family: "DM Mono", monospace;
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  user-select: none;
  line-height: 1;
}
.roteiro-expand-tab:hover .roteiro-expand-label {
  color: var(--accent2);
}

@keyframes roteiro-tab-pulse {
  0%, 100% {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
    border-color: var(--border);
  }
  50% {
    box-shadow: 0 0 12px rgba(232, 197, 71, 0.8), inset 0 0 4px rgba(232, 197, 71, 0.3);
    border-color: var(--accent);
  }
}

/* Mostra a aba de expansão quando a barra de cenas estiver oculta, com pulsação */
.roteiro-layout.sidebar-hidden #roteiro-sidebar-expand-btn {
  display: flex !important;
  animation: roteiro-tab-pulse 2s infinite ease-in-out;
}
.roteiro-layout.sidebar-hidden #roteiro-sidebar-expand-btn:hover {
  animation: none;
}


/* Responsividade da Folha do Roteiro (Preview) em Celulares e Tablets */
@media (max-width: 1024px) {
  .roteiro-paper, .roteiro-paper-page, .spe-paper-page-edit {
    width: 720px !important;
    min-width: 720px !important;
    max-width: 720px !important;
    height: 932px !important;
    min-height: 932px !important;
    padding: 80px 80px 80px 120px !important;
    font-size: 11pt !important;
    border-radius: 8px !important;
    margin-bottom: 32px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
  }
  .spe-page-textarea {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 80px 80px 80px 120px !important;
    font-size: 11pt !important;
  }
  .roteiro-paper::before, .roteiro-paper-page::before, .spe-paper-page-edit::before {
    left: 120px !important;
  }
  .roteiro-paper .rs-slugline,
  .roteiro-paper .rs-action,
  .roteiro-paper .rs-character,
  .roteiro-paper .rs-paren,
  .roteiro-paper .rs-dialogue,
  .roteiro-paper-page .rs-slugline,
  .roteiro-paper-page .rs-action,
  .roteiro-paper-page .rs-character,
  .roteiro-paper-page .rs-paren,
  .roteiro-paper-page .rs-dialogue {
    font-size: 11pt !important;
  }
  .roteiro-paper .rs-dialogue, .roteiro-paper-page .rs-dialogue {
    margin: 0 10% 10px 10% !important;
  }
}

@media (max-width: 768px) {
  .roteiro-view {
    padding: 16px 8px 32px !important;
  }
  .roteiro-paper, .roteiro-paper-page, .spe-paper-page-edit {
    width: 90vw !important;
    min-width: 90vw !important;
    max-width: 90vw !important;
    height: calc(90vw * 1.294) !important;
    min-height: calc(90vw * 1.294) !important;
    padding: 40px 30px 40px 50px !important;
    font-size: 9.5pt !important;
    border-radius: 6px !important;
    margin-bottom: 24px !important;
  }
  .spe-page-textarea {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 40px 30px 40px 50px !important;
    font-size: 9.5pt !important;
  }
  .roteiro-paper::before, .roteiro-paper-page::before, .spe-paper-page-edit::before {
    left: 50px !important;
  }
  .roteiro-paper .rs-slugline,
  .roteiro-paper .rs-action,
  .roteiro-paper .rs-character,
  .roteiro-paper .rs-paren,
  .roteiro-paper .rs-dialogue,
  .roteiro-paper-page .rs-slugline,
  .roteiro-paper-page .rs-action,
  .roteiro-paper-page .rs-character,
  .roteiro-paper-page .rs-paren,
  .roteiro-paper-page .rs-dialogue {
    font-size: 9.5pt !important;
  }
  .roteiro-paper .rs-dialogue, .roteiro-paper-page .rs-dialogue {
    margin: 0 5% 10px 5% !important;
  }
  .spe-fmt-hint {
    display: none !important;
  }
}

/* --- ART DEPARTMENT PHOTO UPLOAD & LIGHTBOX SYSTEM --- */
.arte-thumbnail-wrap {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: zoom-in;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
  flex-shrink: 0;
}
.arte-thumbnail-wrap:hover {
  transform: scale(1.08);
  border-color: var(--accent);
}
.arte-thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arte-photo-upload-wrapper {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.arte-photo-dropzone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  background: var(--surface2);
  transition: border-color 0.2s, background 0.2s, transform 0.1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.arte-photo-dropzone:hover {
  border-color: var(--accent);
  background: rgba(255, 107, 53, 0.04);
}
.arte-photo-dropzone:active {
  transform: scale(0.99);
}
.arte-photo-dropzone .upload-icon {
  font-size: 26px;
  color: var(--muted);
  transition: color 0.2s;
}
.arte-photo-dropzone .upload-text {
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  color: var(--muted);
  transition: color 0.2s;
  letter-spacing: 0.5px;
}
.arte-photo-dropzone:hover .upload-icon,
.arte-photo-dropzone:hover .upload-text {
  color: var(--accent);
}

.arte-photo-previews-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}
.arte-photo-preview-item {
  position: relative;
  display: inline-block;
  animation: slideDownFade 0.25s ease-out;
}
.arte-photo-preview-item img {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  cursor: zoom-in;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s, box-shadow 0.25s;
}
.arte-photo-preview-item img:hover {
  transform: scale(1.05);
  border-color: var(--accent2);
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.3);
}
.arte-photo-delete-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent2);
  color: #fff;
  border: 1.5px solid var(--surface2);
  font-size: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  transition: background 0.2s, transform 0.1s, border-color 0.2s;
  z-index: 10;
}
.arte-photo-delete-badge:hover {
  background: #ff473d;
  transform: scale(1.15);
  border-color: #fff;
}
.arte-photo-delete-badge:active {
  transform: scale(0.95);
}

@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Lightbox Navigation Carousel Arrows */
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  z-index: 1010;
  user-select: none;
  font-family: system-ui, sans-serif;
  line-height: 1;
}
.lightbox-arrow:hover {
  background: var(--accent2);
  border-color: var(--accent2);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 0 15px rgba(255, 107, 53, 0.4);
}
.lightbox-arrow:active {
  transform: translateY(-50%) scale(0.95);
}
.lightbox-arrow.prev {
  left: 24px;
}
.lightbox-arrow.next {
  right: 24px;
}

@media (max-width: 768px) {
  .lightbox-arrow {
    width: 44px;
    height: 44px;
    font-size: 28px;
  }
  .lightbox-arrow.prev {
    left: 12px;
  }
  .lightbox-arrow.next {
    right: 12px;
  }
}

/* ==========================================================================
   Cronograma Geral do Projeto
   ========================================================================== */

.crono-fases-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.crono-fases-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.crono-fase-card {
  flex: 1;
  min-width: 250px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

.crono-fase-title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.crono-fase-dates {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.crono-date-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crono-date-group label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  color: #6B7280;
}

.crono-date-group input[type="date"] {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 6px;
  font-size: 12px;
  font-family: inherit;
  width: 100%;
}

.crono-date-group input[type="date"]:focus {
  border-color: var(--accent);
  outline: none;
}

.crono-fase-duration {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #6B7280;
  text-align: right;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* Phase specific theme overrides for cards */
.crono-fase-card:nth-child(1) .crono-fase-title {
  color: #3b82f6 !important; /* Vivid Blue */
}
.crono-fase-card:nth-child(2) .crono-fase-title {
  color: #f59e0b !important; /* Vibrant Orange-Yellow */
}
.crono-fase-card:nth-child(3) .crono-fase-title {
  color: #ec4899 !important; /* Pink-Red */
}

.crono-fase-card:nth-child(1) .crono-date-input-trigger span:first-child {
  font-weight: bold;
  color: #60a5fa !important;
}
.crono-fase-card:nth-child(2) .crono-date-input-trigger span:first-child {
  font-weight: bold;
  color: #fbbf24 !important;
}
.crono-fase-card:nth-child(3) .crono-date-input-trigger span:first-child {
  font-weight: bold;
  color: #f472b6 !important;
}

/* Gantt Chart */
.crono-gantt-container {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

.crono-gantt-header-dates {
  display: flex;
  justify-content: space-between;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.crono-gantt-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crono-gantt-track {
  display: flex;
  align-items: center;
  height: 30px;
  position: relative;
  z-index: 2;
}

.crono-gantt-track-label {
  width: 75px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}

.crono-gantt-bar-container {
  flex: 1;
  position: relative;
  height: 100%;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.crono-gantt-no-date {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.15);
  margin-left: 10px;
}

.crono-gantt-bar {
  position: absolute;
  height: 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  white-space: nowrap;
}

.crono-gantt-bar.pre-prod {
  background: linear-gradient(90deg, #1e40af, #3b82f6) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

.crono-gantt-bar.prod {
  background: linear-gradient(90deg, #ea580c, #eab308) !important;
  border: 1px solid rgba(234, 179, 8, 0.4) !important;
  color: rgba(0, 0, 0, 0.85) !important;
  text-shadow: none !important;
}

.crono-gantt-bar.pos {
  background: linear-gradient(90deg, #ec4899, #ef4444) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

.crono-gantt-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 1;
}

.crono-gantt-bar span {
  padding: 0 8px;
}

.crono-gantt-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #ff5252;
  z-index: 10;
  box-shadow: 0 0 5px #ff5252;
  pointer-events: none;
}

.crono-gantt-today-marker {
  position: absolute;
  top: -15px;
  transform: translateX(-50%);
  background: #ff5252;
  color: #fff;
  font-size: 8px;
  font-family: 'DM Mono', monospace;
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.crono-gantt-empty {
  text-align: center;
  padding: 30px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
  background: rgba(255, 255, 255, 0.01);
}

/* Duas Colunas */
.crono-bottom-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
}

@media (max-width: 900px) {
  .crono-bottom-grid {
    grid-template-columns: 1fr;
  }
}

.crono-column {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

/* Cabeçalho Fixo do Orçamento e Elenco & Equipe */
#section-orcamento .mod-header,
#elenco-header {
  position: sticky;
  top: 10px;
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 100;
  padding: 16px 32px;
  margin: -28px -32px 20px -32px;
  border-bottom: 1px solid var(--border);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  #section-orcamento .mod-header,
  #elenco-header {
    top: 5px;
    padding: 12px 16px;
    margin: -12px -12px 16px -12px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
}

.crono-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.crono-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
}

.crono-empty-list {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  border: 1px dashed rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.crono-item-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.crono-item-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.crono-item-card.marco-item.concluido {
  border-color: rgba(100, 200, 100, 0.2);
  background: rgba(100, 200, 100, 0.02);
}

.crono-item-card.marco-item.concluido .crono-item-name {
  text-decoration: line-through;
  color: var(--muted);
}

.crono-item-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

.crono-item-date {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px;
}

.crono-item-desc {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
  white-space: pre-wrap;
}

.crono-badge-tag {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

.crono-btn-delete {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  line-height: 1;
  transition: color 0.2s;
}

.crono-btn-delete:hover {
  color: var(--accent2);
}

.crono-btn-edit {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  line-height: 1;
  transition: color 0.2s;
}

.crono-btn-edit:hover {
  color: var(--accent);
}

/* Modais Dinâmicos */
.crono-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
}

.crono-modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 90%;
  max-width: 440px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: crono-modal-fade 0.25s ease-out;
}

@keyframes crono-modal-fade {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.crono-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.crono-modal-title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
}

.crono-modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.crono-modal-close:hover {
  color: var(--text);
}

.crono-modal-body {
  padding: 20px;
}

.crono-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.crono-form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}

.crono-form-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 12px;
  width: 100%;
}

.crono-form-input:focus {
  border-color: var(--accent);
  outline: none;
}

.crono-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.crono-date-input-trigger {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 12px;
  font-family: 'DM Mono', monospace;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  min-height: 33px;
  box-sizing: border-box;
}

.crono-date-input-trigger:hover {
  border-color: var(--accent);
  background: var(--surface);
}

.crono-date-input-trigger.disabled {
  opacity: 0.7;
  cursor: not-allowed;
  border-color: var(--border);
}

.crono-date-input-trigger.disabled:hover {
  border-color: var(--border);
  background: var(--surface2);
}

.crono-date-group .crono-date-input-trigger {
  background: var(--bg);
  padding: 6px;
  min-height: 28px;
}

.crono-date-group .crono-date-input-trigger:hover {
  background: var(--surface2);
}

@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  header, nav, aside, .no-print, .btn-primary, .btn-secondary, #sidebar-tab-arrow {
    display: none !important;
  }
  .app {
    margin: 0 !important;
    padding: 0 !important;
  }
  .section {
    display: none !important;
  }
  #section-producao {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .prod-scene-card {
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    box-shadow: none !important;
    color: #000000 !important;
    page-break-inside: avoid;
  }
  .prod-scene-card * {
    color: #000000 !important;
  }
  .prod-scene-card div[style*="background:var(--surface2)"],
  .prod-scene-card div[style*="background: var(--surface2)"] {
    background: #f9f9f9 !important;
    border: 1px solid #dddddd !important;
  }
  .scene-type-badge {
    border: 1px solid #999999 !important;
    background: #eeeeee !important;
    color: #000000 !important;
  }
}

/* DEPARTAMENTO DE SOM — ESTILOS */
.som-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 24px;
  background: var(--surface2);
  border-radius: 8px;
  padding: 4px;
  width: fit-content;
  flex-wrap: wrap;
}
.som-tab {
  padding: 8px 20px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: none;
  color: var(--muted);
  transition: all 0.2s;
}
.som-tab.active {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
}
.som-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.som-card:hover {
  border-color: var(--accent);
}
.som-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.som-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.som-card-sub {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}
.som-badge {
  display: inline-block;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid;
}
.som-badge-rec {
  background: #1a1e28;
  color: #7aaed4;
  border-color: #253050;
}
.som-badge-mic {
  background: #1e1a10;
  color: #e8c547;
  border-color: #3a3020;
}
.som-badge-acc {
  background: #1e181e;
  color: #c47aff;
  border-color: #2e1e2e;
}
.som-badge-note {
  background: #181e18;
  color: #6ab88a;
  border-color: #253825;
}
.som-scene-chip {
  display: inline-block;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--muted);
  margin-right: 4px;
  margin-top: 4px;
}
.som-scene-chip-all {
  background: rgba(100,180,255,0.1);
  border-color: rgba(100,180,255,0.25);
  color: #7ab8f5;
  font-weight: 700;
}
.playlist-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.playlist-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.playlist-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.playlist-meta {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
}

/* Dashboard Tabs */
.dash-tabs-container {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.dash-tab {
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
.dash-tab.active {
  color: #000;
  background: var(--accent);
  border-color: var(--accent);
}

/* Custom Multi-column Form Grid and Modal Widths */
.form-grid-2col {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

#screen-login {
  transition: max-width 0.25s ease-in-out !important;
}

#screen-login.cadastro-wide {
  max-width: 640px !important;
}

@media (min-width: 768px) {
  .form-grid-2col {
    grid-template-columns: 1fr 1fr !important;
  }
  .grid-span-2 {
    grid-column: span 2 !important;
  }
}

@media (max-width: 1200px) {
  .od-meta-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .od-meta-locacao-card {
    grid-column: span 3 !important;
  }
  .weather-cards {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .modal-panel {
    padding: 16px 20px !important;
    max-width: 98vw !important;
    max-height: 95vh !important;
  }
  
  .form-grid-2col {
    grid-template-columns: 1fr !important;
  }

  .weather-cards {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.1) transparent !important;
  }
  .weather-cards::-webkit-scrollbar {
    height: 4px !important;
  }
  .weather-cards::-webkit-scrollbar-track {
    background: transparent !important;
  }
  .weather-cards::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.1) !important;
    border-radius: 4px !important;
  }
  .weather-card {
    flex: 0 0 100px !important;
    padding: 12px 8px !important;
    box-sizing: border-box !important;
  }
  .weather-card-status {
    flex: 0 0 130px !important;
  }
}

/* ============================================================
   Diretoria de Produção - Painel do Diretor
   ============================================================ */
.prod-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.prod-tab-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.prod-tab-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
.prod-tab-btn.active {
  color: #000;
  background: var(--accent);
  border-color: var(--accent);
}
.prod-tab-content {
  display: none;
  animation: fadeIn 0.2s ease-in-out;
}
.prod-tab-content.active {
  display: block;
}
.prod-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .prod-form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .prod-grid-span-2 {
    grid-column: span 2;
  }
}
.prod-form-field {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prod-form-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(232, 197, 71, 0.15);
}
.prod-field-label {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}
.prod-field-input, .prod-field-textarea {
  background: none;
  border: none;
  color: var(--text);
  font-size: 13px;
  width: 100%;
  outline: none;
  line-height: 1.5;
}
.prod-field-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}
.prod-field-input::placeholder, .prod-field-textarea::placeholder {
  color: var(--muted);
  opacity: 0.6;
}
.prod-time-container {
  display: flex;
  gap: 12px;
}
.prod-time-field {
  flex: 1;
}
.prod-time-input {
  background: none;
  border: none;
  color: var(--accent);
  font-family: "DM Mono", monospace;
  font-size: 15px;
  font-weight: 600;
  width: 100%;
  outline: none;
  padding: 2px 0;
  cursor: text;
  letter-spacing: 1px;
}
.prod-mode-tabs {
  display: flex;
  gap: 2px;
  background: var(--surface2);
  border-radius: 8px;
  padding: 4px;
  width: fit-content;
}
.prod-mode-tab {
  padding: 6px 14px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: none;
  color: var(--muted);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.prod-mode-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
.prod-mode-tab.active {
  background: var(--accent);
  color: #000;
  font-weight: 700;
}
.prod-time-input-styled {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--accent) !important;
  transition: all 0.2s ease !important;
}
.prod-time-input-styled:hover {
  border-color: rgba(232, 197, 71, 0.45) !important;
  box-shadow: 0 0 10px rgba(232, 197, 71, 0.05) !important;
}
.prod-time-input-styled:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(232, 197, 71, 0.2) !important;
}

/* ============================================================
   SELETOR DE HORÁRIOS PERSONALIZADO (TIMEPICKER)
   ============================================================ */

#timepicker-popup {
  position: absolute;
  background: rgba(17, 17, 20, 0.95);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  width: 240px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 100000;
  user-select: none;
  opacity: 0;
  transform: scale(0.95) translateY(-8px);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

#timepicker-popup.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.timepicker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.timepicker-title {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
}

.timepicker-clear-btn {
  background: none;
  border: none;
  color: var(--accent2);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}

.timepicker-clear-btn:hover {
  background: rgba(255, 107, 53, 0.1);
  color: #ff8b55;
}

.timepicker-cols-wrapper {
  position: relative;
  display: flex;
  gap: 16px;
  height: 180px;
  align-items: center;
  justify-content: center;
}

.timepicker-column {
  flex: 1;
  height: 180px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  padding: 72px 0; /* Permite rolar o primeiro/último elemento para o centro */
  box-sizing: border-box;
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timepicker-column::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.timepicker-cell {
  height: 36px;
  min-height: 36px;
  line-height: 36px;
  text-align: center;
  scroll-snap-align: center;
  cursor: pointer;
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  color: var(--muted);
  transition: color 0.15s ease, transform 0.15s ease, font-size 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timepicker-cell:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.timepicker-cell.active {
  color: var(--accent) !important; /* Ouro */
  font-size: 19px;
  font-weight: bold;
  transform: scale(1.1);
}

.timepicker-divider {
  font-family: 'DM Mono', monospace;
  font-size: 20px;
  font-weight: bold;
  color: var(--muted);
  line-height: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}

.timepicker-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 38px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}

.timepicker-footer {
  display: flex;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
}

.timepicker-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  transition: all 0.2s ease;
  text-align: center;
}

.timepicker-btn-cancel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.timepicker-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.timepicker-btn-ok {
  background: var(--accent);
  border: none;
  color: #000;
}

.timepicker-btn-ok:hover {
  background: #f0d055;
  box-shadow: 0 0 12px rgba(232, 197, 71, 0.25);
}

/* Adaptabilidade para Modo Claro */
body.light #timepicker-popup {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.02) inset;
}

body.light .timepicker-indicator {
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.light .timepicker-cell:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light .timepicker-btn-cancel {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

body.light .timepicker-btn-cancel:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Active User Indicator in Header/Dashboard */
.user-indicator-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  line-height: 1.3;
  margin-right: 8px;
}

.user-indicator-name {
  color: var(--text);
  font-weight: bold;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-indicator-email {
  color: var(--text-muted);
  font-size: 9px;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .user-indicator-wrapper {
    display: none !important;
  }
}

/* WhatsApp Web Button Styling */
.wa-btn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.35);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: #25D366;
}

.wa-btn-badge:hover {
  background: #25D366 !important;
  border-color: #25D366 !important;
  transform: scale(1.15) translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.4);
  color: #ffffff !important;
}

.wa-btn-badge svg {
  transition: fill 0.2s ease;
}

/* Responsive location grid in Production */
@media (max-width: 768px) {
  .prod-locations-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .prod-locations-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Sidebar action buttons inside Roteiro active scene row */
.roteiro-sidebar-action-btn-primary,
.roteiro-sidebar-action-btn-secondary {
  flex: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 28px !important;
  padding: 0 10px !important;
  font-family: "DM Sans", sans-serif;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  position: static !important;
  overflow: visible !important;
  transform: none !important;
}

.roteiro-sidebar-action-btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%) !important;
  color: #0a0a0b !important;
  border: none !important;
}
.roteiro-sidebar-action-btn-primary:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(232, 197, 71, 0.2) !important;
}

.roteiro-sidebar-action-btn-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.roteiro-sidebar-action-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--muted) !important;
}






/* ==========================================
   MODERN FLAT ORANGE/YELLOW THEME OVERRIDES (NO GLOWS)
   ========================================== */

/* 1. Design Tokens (Flat, Compact Dark Mode) */
:root {
  --bg: #0c0c0e !important;          /* Deep dark anthracite */
  --surface: #141416 !important;     /* Dark card background */
  --surface2: #1b1b1f !important;    /* Lighter surface for inputs and nested panels */
  --border: #242429 !important;      /* Soft, low-contrast borders */
  --accent: #f97316 !important;      /* Modern Vibrant Orange */
  --accent-hover: #ea580c !important;
  --accent2: #f59e0b !important;      /* Amber/Yellow Accent */
  --accent2-hover: #d97706 !important;
  --text: #f3f4f6 !important;        /* High contrast text */
  --muted: #8e929a !important;       /* Neutral gray for captions/labels */
  
  /* Compact & Balanced Font Sizes */
  --fs-xs: 10px !important;
  --fs-sm: 12.5px !important;
  --fs-md: 14px !important;
  --fs-lg: 16px !important;
  --fs-xl: 22px !important;
  
  /* Standard Low-Radius Corners (Rectangular theme) */
  --radius-sm: 4px !important;
  --radius-md: 6px !important;
  --radius-lg: 8px !important;
}

/* Ensure DM Sans is loaded and applied to general UI */
body {
  font-family: 'DM Sans', sans-serif !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.5 !important;
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* Disable aurora animated background and flows */
body::before,
body::after {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
}

/* Do not touch script fonts - protect Courier Prime and specific script views */
#roteiro-view,
#roteiro-textarea,
.roteiro-view,
.roteiro-area,
.rs-slugline,
.rs-action,
.rs-character,
.rs-dialogue,
.rs-paren,
.rs-transition,
.roteiro-paper-page,
.roteiro-pages-container,
.roteiro-pages-container * {
  font-family: 'Courier Prime', Courier, monospace !important;
}

/* 2. Standarized Cards & Items (Flat & Compact) */
.meta-card, 
.foto-card, 
.som-card, 
.day-item, 
.project-card, 
.weather-card,
.timing-cell,
.timing-grid .timing-cell,
.weather-block {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important; /* Remove all shadows */
  padding: 12px 14px !important;
  transition: border-color 0.15s, background-color 0.15s !important;
}

/* Project cards hover style (no glows) */
.project-card:hover, 
.day-item:hover, 
.foto-card:hover,
.weather-card:hover {
  border-color: var(--accent) !important;
  background-color: rgba(249, 115, 22, 0.02) !important;
}

/* Active Day Item in sidebar */
.day-item.active {
  background-color: rgba(249, 115, 22, 0.04) !important;
  border-color: var(--accent) !important;
}
.day-item.active::before {
  background: var(--accent) !important;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}

/* Day scenes grid layout in sidebar to prevent overlap */
.day-scenes {
  display: flex !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  margin-top: 6px !important;
  max-width: 100% !important;
}
.scene-chip {
  margin: 0 !important;
}

/* 3. Modals and Overlays (Rectangular & Simple Backdrop) */
.modal-panel, 
.modal-content, 
.modal-box, 
#np-modal, 
#ep-modal,
.lixeira-modal {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; /* Flat dark shadow, no colored glows */
  padding: 24px !important;
}

/* Ensure overlays cover screen properly and center content */
.overlay-base,
#np-overlay,
#ep-overlay,
#lixeira-overlay,
#trash-panel,
#sb-modal-overlay,
#cast-info-modal-overlay,
#member-modal-overlay,
#actor-modal-overlay,
#crew-modal-overlay,
#add-to-day-modal-overlay,
#scene-modal-overlay,
#od-scene-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.8) !important; /* Flat dark dim backdrop */
  z-index: 9000 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
}

/* Overlay open states */
.overlay-base.open,
#np-overlay.open,
#ep-overlay.open,
#lixeira-overlay.open,
#trash-panel.open,
#sb-modal-overlay.open,
#cast-info-modal-overlay.open,
#member-modal-overlay.open,
#actor-modal-overlay.open,
#crew-modal-overlay.open,
#add-to-day-modal-overlay.open,
#scene-modal-overlay.open,
#od-scene-modal-overlay.open {
  display: flex !important;
}

/* 4. Inputs, Selects and Focus States */
.meta-input, 
.card-input, 
.lform-input, 
.np-input, 
.member-form-input, 
.card-textarea,
select {
  background-color: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  padding: 8px 12px !important;
  font-size: var(--fs-sm) !important;
  font-family: 'DM Sans', sans-serif !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s !important;
}

/* Flat Focus State */
.meta-input:focus, 
.card-input:focus, 
.lform-input:focus, 
.np-input:focus, 
.member-form-input:focus, 
.card-textarea:focus,
select:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important; /* No glows */
}

/* 5. Buttons (Flat & Cohesive) */
.btn-primary, 
.btn-entrar,
#btn-cadastro,
#btn-salvar-senha,
.pm-cta-btn {
  background-color: var(--accent) !important;
  color: #000000 !important;
  font-weight: 700 !important;
  font-family: 'DM Sans', sans-serif !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 16px !important;
  font-size: var(--fs-sm) !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: none !important;
}

.btn-primary:hover, 
.btn-entrar:hover,
#btn-cadastro:hover,
#btn-salvar-senha:hover {
  background-color: var(--accent-hover) !important;
}

/* Special button styles for Ordem do Dia sidebar CTA */
.pm-cta-btn {
  background-color: rgba(232, 197, 71, 0.1) !important;
  border-left: 3px solid var(--accent) !important;
  color: var(--accent) !important;
  padding: 6px 12px !important;
  font-weight: 600 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.pm-cta-btn:hover {
  background-color: rgba(232, 197, 71, 0.18) !important;
}
.pm-cta-btn .pm-cta-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: var(--accent) !important;
  color: var(--bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.pm-cta-btn .pm-cta-icon svg {
  width: 14px !important;
  height: 14px !important;
}
.pm-cta-btn .pm-cta-arrow {
  color: var(--accent) !important;
  margin-left: auto !important;
}

/* Secondary Buttons */
.btn-secondary, 
.btn-close,
.btn-ghost {
  background-color: var(--surface2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 7px 13px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: var(--fs-sm) !important;
  cursor: pointer !important;
  transition: background-color 0.15s, border-color 0.15s !important;
}

.btn-secondary:hover, 
.btn-ghost:hover {
  background-color: var(--border) !important;
  border-color: var(--muted) !important;
}

/* 6. Section Labels (Left Accent Orange Bar) */
.section-label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: var(--fs-md) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin-bottom: 14px !important;
  margin-top: 18px !important;
  display: flex !important;
  align-items: center !important;
  border-left: 3px solid var(--accent) !important;
  padding-left: 10px !important;
  height: 16px !important;
}

/* Hide the old trailing border line */
.section-label::after {
  display: none !important;
}

/* 7. Navigation Tabs (Centered, Proportional & Flat Rectangular) */
nav {
  background-color: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 16px !important;
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  justify-content: center !important; /* Center the options */
  height: 40px !important; /* Slightly larger menu height as requested */
  overflow: visible !important; /* Critical to show absolute dropdown menus on hover */
}
.nav-item-wrapper {
  position: relative !important;
  display: inline-block !important;
  height: 100% !important;
}
nav .nav-tab {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important; /* Slightly larger font size */
  color: var(--muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  transition: all 0.15s ease !important;
  text-transform: uppercase !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}
nav .nav-tab:hover {
  background: var(--surface) !important;
  color: var(--text) !important;
}
nav .nav-tab.active {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-bottom: 2px solid var(--accent) !important;
  color: var(--accent) !important;
  border-radius: 4px 4px 0 0 !important;
}

/* Sub-menu Dropdowns (Subcategories on Hover) */
.sub-menu-dropdown {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45) !important;
  min-width: 180px !important;
  z-index: 9999 !important;
  padding: 4px 0 !important;
  margin-top: 2px !important;
}
.nav-item-wrapper:hover .sub-menu-dropdown {
  display: block !important;
}
.sub-menu-item {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10.5px !important;
  color: var(--muted) !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  transition: background-color 0.15s, color 0.15s !important;
  text-align: left !important;
}
.sub-menu-item:hover {
  background-color: var(--surface2) !important;
  color: var(--accent) !important;
}
.sub-menu-divider {
  height: 1px !important;
  background-color: var(--border) !important;
  margin: 4px 0 !important;
}
.sub-menu-header {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 8.5px !important;
  color: var(--accent) !important;
  padding: 6px 14px 2px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  opacity: 0.8 !important;
  pointer-events: none !important;
}
.sub-menu-item.action-item {
  color: var(--accent) !important;
}
.sub-menu-item.action-item:hover {
  background-color: var(--surface2) !important;
  color: var(--text) !important;
}


/* Hide wrappers if the child nav-tab has display: none */
.nav-item-wrapper:has(> .nav-tab[style*="display: none"]),
.nav-item-wrapper:has(> .nav-tab[style="display: none;"]) {
  display: none !important;
}

/* Header Compact Optimization */
header {
  height: 48px !important;
  padding: 0 16px !important;
}
header .logo {
  font-size: 20px !important;
}
header .logo span {
  font-size: 9px !important;
}
header button,
header .btn-ghost,
header .btn-equipe,
header .theme-btn {
  padding: 4px 8px !important;
  font-size: 10.5px !important;
}
header .user-indicator-wrapper {
  margin-right: 4px !important;
}
header .user-indicator-name {
  font-size: 11px !important;
}
header .user-indicator-email {
  font-size: 8.5px !important;
}
header .header-meta {
  font-size: 10.5px !important;
}

/* 8. Text Formatting and Typography Standardization */
.meta-label,
.lform-label,
.np-label,
.member-form-label,
.fr-flabel {
  font-family: 'DM Sans', sans-serif !important;
  font-size: var(--fs-xs) !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.logo {
  font-family: 'Bebas Neue', sans-serif !important;
  color: var(--accent) !important;
  font-size: var(--fs-xl) !important;
}
.logo span {
  font-family: 'DM Mono', monospace !important;
  color: var(--muted) !important;
  font-size: var(--fs-xs) !important;
}

/* 9. Header Optimization and Scaling down title sizes */
.od-header, 
.mod-header {
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
}
.od-title, 
.mod-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 1.5px !important;
  line-height: 1.1 !important;
}

/* 10. Table Spacing Refinements */
.crew-table td, 
.scenes-table td, 
.cast-table td, 
.orc-itens-tbl td {
  padding: 7px 10px !important;
  font-size: var(--fs-sm) !important;
}
.crew-table th, 
.scenes-table th, 
.cast-table th, 
.orc-itens-tbl th {
  padding: 7px 10px !important;
  font-size: var(--fs-xs) !important;
}

/* 11. Locations List layout grid restoration */
.mod-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}
.stat-item {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 14px !important;
  text-align: center !important;
}
.stat-num {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 28px !important;
  color: var(--accent) !important;
  line-height: 1.1 !important;
}
.stat-label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-top: 4px !important;
}

/* 12. Sidebar Days of Film Layout */
.day-num {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
  color: var(--text) !important;
}
.day-date {
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  color: var(--accent2) !important; /* Amber/Yellow for dates */
  margin-top: 2px !important;
}
.day-pages {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  color: var(--muted) !important;
}

/* ==========================================================================
   SELESTA CINE REDESIGN OVERRIDES (LOGIN & PROJECT CARDS)
   ========================================================================== */

/* 1. Login Layout Centering & Modern Styling */
.login-header-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 24px;
}
.login-logo-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.5));
  border-radius: 18px;
}
.login-header-centered .login-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 42px !important;
  color: var(--text) !important;
  letter-spacing: 2px !important;
  line-height: 1 !important;
  margin-bottom: 4px;
}
.login-header-centered .login-eyebrow {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  color: var(--accent) !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}

/* 2. Login Wrapper Background */
#login-wrapper {
  position: relative;
}

#login-wrapper:not(.in-dashboard) {
  overflow: hidden !important;
  --bg: #0a0a0b !important;
  --surface: #111114 !important;
  --surface2: #18181d !important;
  --border: #2a2a32 !important;
  --accent: #e8c547 !important;
  --accent2: #ff6b35 !important;
  --text: #e8e8ec !important;
  --muted: #6b6b7a !important;
  background:
    radial-gradient(ellipse at 25% 35%, rgba(66, 133, 244, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(155, 114, 203, 0.05) 0%, transparent 50%),
    #0c0c0e !important;
}

#login-wrapper.in-dashboard {
  background: var(--body-gradient), var(--bg) !important;
  overflow-y: auto !important;
}

#login-theme-btn {
  display: none !important;
}

/* O mosaico cinematográfico de fundo é ESTRITAMENTE da tela de login; NUNCA aparece na apresentação de projetos (dashboard) */
#login-wrapper.in-dashboard .login-mosaic-container {
  display: none !important;
}

/* ==========================================================================
   CARROSSÉIS DE FUNDO DA TELA DE LOGIN (Película de Filme 35mm em Movimento)
   ========================================================================== */
.login-mosaic-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: #070709;
}

/* ==========================================================================
   ILUMINAÇÃO DE SALA DE CINEMA (Projetor Dinâmico de Alta Intensidade)
   ========================================================================== */
/* 1. Lâmpada de Arco de Xenônio de Alta Potência (Otimizada via Hardware) */
.cinema-projector-lamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    #ffffff 0%,
    rgba(255, 255, 255, 0.95) 15%,
    rgba(235, 245, 255, 0.70) 30%,
    rgba(180, 220, 255, 0.35) 50%,
    rgba(160, 195, 255, 0.12) 70%,
    transparent 85%
  );
  filter: blur(12px);
  z-index: 0;
  opacity: 0.95;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: projectorFlicker 3s ease-in-out infinite alternate;
  pointer-events: none;
}

/* 2. Feixe de Luz Volumétrico com Alternância de Cores e Trocas de Cena */
.cinema-projector-beam {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140vw;
  height: 140vh;
  background:
    conic-gradient(
      from 200deg at 50% 50%,
      transparent 0deg,
      rgba(220, 240, 255, 0.28) 20deg,
      rgba(255, 255, 255, 0.55) 45deg,
      rgba(200, 220, 255, 0.25) 70deg,
      transparent 95deg,
      transparent 180deg,
      rgba(210, 225, 255, 0.25) 200deg,
      rgba(255, 255, 255, 0.55) 225deg,
      rgba(180, 230, 255, 0.30) 250deg,
      transparent 275deg,
      transparent 360deg
    ),
    radial-gradient(
      ellipse 80% 70% at 50% 50%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(200, 235, 255, 0.30) 25%,
      rgba(150, 180, 240, 0.18) 50%,
      rgba(130, 80, 220, 0.10) 70%,
      transparent 85%
    );
  filter: blur(20px);
  z-index: 0;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  pointer-events: none;
  animation: projectorColorShift 7s ease-in-out infinite alternate;
}

/* 3. Halo Amplo de Difusão e Contraluz na Sala */
.cinema-projector-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160vw;
  height: 160vh;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(230, 240, 255, 0.30) 0%,
    rgba(140, 195, 255, 0.18) 30%,
    rgba(210, 110, 235, 0.08) 55%,
    transparent 80%
  );
  filter: blur(40px);
  z-index: 0;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  pointer-events: none;
  animation: projectorHaloPulse 5s ease-in-out infinite alternate;
}

/* Oscilação Rápida e Leve (Usa apenas opacity e transform - 60fps leve) */
@keyframes projectorFlicker {
  0% {
    opacity: 0.84;
    transform: translate3d(-50%, -50%, 0) scale(0.97);
  }
  25% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1.04);
  }
  50% {
    opacity: 0.80;
    transform: translate3d(-50%, -50%, 0) scale(0.95);
  }
  75% {
    opacity: 0.98;
    transform: translate3d(-50%, -50%, 0) scale(1.02);
  }
  100% {
    opacity: 0.88;
    transform: translate3d(-50%, -50%, 0) scale(0.98);
  }
}

/* Rotação e pulso de luz do projetor */
@keyframes projectorColorShift {
  0% {
    opacity: 0.80;
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(0.98);
  }
  35% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) rotate(1.5deg) scale(1.03);
  }
  70% {
    opacity: 0.78;
    transform: translate3d(-50%, -50%, 0) rotate(-1.5deg) scale(0.96);
  }
  100% {
    opacity: 0.90;
    transform: translate3d(-50%, -50%, 0) rotate(0.5deg) scale(1.01);
  }
}

/* Pulso Atmosférico da Sala */
@keyframes projectorHaloPulse {
  0% {
    opacity: 0.65;
    transform: translate3d(-50%, -50%, 0) scale(0.96);
  }
  50% {
    opacity: 0.95;
    transform: translate3d(-50%, -50%, 0) scale(1.03);
  }
  100% {
    opacity: 0.75;
    transform: translate3d(-50%, -50%, 0) scale(0.98);
  }
}

.login-carousel-scene {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 230vw;
  transform: translate(-50%, -50%) rotate(-3deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px; /* Películas bem mais próximas uma da outra */
  will-change: transform;
  z-index: 1;
}

.carousel-row {
  display: flex;
  overflow: hidden;
  user-select: none;
  width: 100%;
  position: relative;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.9));
}

.carousel-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0;
  width: max-content;
  will-change: transform;
  position: relative;
  /* Bordas da película mais largas / amplas */
  padding: 46px 0;
  background: transparent;
}

/* Fita de Película com Furos Quadrados Reais 100% Vazados / Transparentes */
.carousel-track::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-top: 2px solid rgba(255, 255, 255, 0.14);
  border-bottom: 2px solid rgba(255, 255, 255, 0.14);
  /* 
     Desenho puro da fita com vazamento real:
     1. Borda externa superior sólida: 0 a 12px (#241c21)
     2. Linha de furos quadrados superiores: 12px a 32px (preenchido nos intervalos de 30px a 46px, vazado/transparente de 14px a 30px)
     3. Corpo central sólido atrás das fotos: 32px a calc(100% - 32px) (#241c21)
     4. Linha de furos quadrados inferiores: calc(100% - 32px) a calc(100% - 12px) (vazado/transparente nos furos)
     5. Borda externa inferior sólida: calc(100% - 12px) a 100% (#241c21)
  */
  background-image:
    /* Borda sólida superior extrema */
    linear-gradient(to bottom, #241c21 0, #241c21 12px, transparent 12px),
    /* Miolo sólido central onde ficam as fotos */
    linear-gradient(to bottom, transparent 0, transparent 32px, #241c21 32px, #241c21 calc(100% - 32px), transparent calc(100% - 32px)),
    /* Borda sólida inferior extrema */
    linear-gradient(to top, #241c21 0, #241c21 12px, transparent 12px),
    /* Fita entre os furos quadrados (topo e base): sólido no intervalo, vazio onde é furo */
    linear-gradient(to right, #241c21 0, #241c21 14px, transparent 14px, transparent 30px, #241c21 30px, #241c21 46px);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    46px 100%;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    repeat-x;
}

/* O pseudo-elemento ::after não desenha cor artificial: os furos são 100% transparentes, revelando o projetor */
.carousel-track::after {
  display: none;
}

/* Efeito Speedramp na entrada: dispara em alta velocidade e freia abruptamente no final dos 2 primeiros segundos */
.carousel-row-top {
  animation: speedRampIntroLeft 2s cubic-bezier(0.08, 0.95, 0.2, 1) forwards;
}

.carousel-row-bottom {
  animation: speedRampIntroRight 2s cubic-bezier(0.08, 0.95, 0.2, 1) forwards;
}

@keyframes speedRampIntroLeft {
  0% {
    transform: translate3d(2800px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes speedRampIntroRight {
  0% {
    transform: translate3d(-2800px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* Trilho Superior: desliza contínuo para a esquerda */
.track-left {
  animation: scrollMarqueeLeft 260s linear infinite;
}

/* Trilho Inferior: desliza contínuo para a direita */
.track-right {
  animation: scrollMarqueeRight 280s linear infinite;
}

@keyframes scrollMarqueeLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes scrollMarqueeRight {
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* Cada Fotograma Individual na Fita de Película (Bordas Mais Largas e Profundas) */
.carousel-card {
  position: relative;
  width: 660px;
  aspect-ratio: 16 / 10;
  flex-shrink: 0;
  background: #191317;
  /* Divisória mais encorpada e borda externa reforçada */
  margin: 0 24px;
  border: 6px solid #1a1418;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.6);
  opacity: 0.88;
  filter: brightness(0.95) contrast(1.03);
  transition: opacity 0.3s ease;
  z-index: 2;
}

.carousel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 2px;
}

@media (max-width: 1024px) {
  .login-carousel-scene {
    width: 250vw;
    gap: 32px;
  }
  .carousel-track {
    padding: 22px 0;
  }
  .carousel-track::before,
  .carousel-track::after {
    height: 16px;
    background-size: 20px 16px;
  }
  .carousel-card {
    width: 380px;
    margin: 0 12px;
  }
}

/* Máscara de Sala de Cinema Escurecida (Mais suave para destacar o movimento e a borda) */
.login-mosaic-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    ellipse 85% 75% at 50% 50%,
    rgba(7, 7, 9, 0.15) 0%,
    rgba(7, 7, 9, 0.40) 45%,
    rgba(7, 7, 9, 0.75) 75%,
    rgba(7, 7, 9, 0.90) 100%
  );
  pointer-events: none;
}

.login-main {
  position: relative !important;
  z-index: 2 !important;
}

/* 2. Login Card com Borda Animada Gemini (Estrutura Retangular Estática com Feixe Viajante) */
.login-card-wrap {
  position: relative !important;
  max-width: 550px !important;
  margin: 0 auto !important;
  padding: 5px !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.95) !important;
}

/* O gradiente gira internamente sem rotacionar o retângulo do card */
.login-card-wrap::before {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    transparent 190deg,
    rgba(66, 133, 244, 0.3) 230deg,
    #4285f4 270deg,
    #00e5ff 295deg,
    #9b72cb 325deg,
    #ff4081 345deg,
    #ff6e40 358deg,
    transparent 360deg
  ) !important;
  filter: drop-shadow(0 0 12px #4285f4) drop-shadow(0 0 24px #ff4081) !important;
  animation: geminiBeamSweep 4.5s linear infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

@keyframes geminiBeamSweep {
  0% {
    transform: rotate(0deg);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  68% {
    opacity: 1;
  }
  80% {
    transform: rotate(360deg);
    opacity: 0;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}

.login-card {
  position: relative !important;
  width: 100% !important;
  background: #0d0d12 !important;
  border-radius: 29px !important;
  padding: 32px 0 24px 0 !important;
  margin: 0 !important;
  z-index: 1 !important;
}

/* Fundo estático interno sutil escuro */
.login-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 29px;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(66, 133, 244, 0.09) 0%,
    rgba(155, 114, 203, 0.05) 40%,
    transparent 75%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 1;
}

.login-card > * {
  position: relative;
  z-index: 3;
}
.login-card .login-tabs {
  display: none !important; /* hidden superior tabs */
}
.login-card .login-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 28px 16px 28px !important;
}

/* 3. Badge information block inside panel */
.login-badge-info {
  background: #171718 !important;
  border: 1px solid #28282c !important;
  border-radius: 14px !important;
  padding: 14px 20px !important;
  text-align: center !important;
  margin: 8px 0 24px 0 !important;
}
.login-badge-title {
  color: var(--accent) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 4px;
}
.login-badge-sub {
  color: #888896 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 600;
}

/* 4. Labels and Inputs with SVG icons */
.login-card .lform-label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #888896 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  display: block !important;
}
.input-icon-wrapper {
  position: relative;
  width: 100%;
}
.login-card .input-field-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #2c2d30 !important;
  pointer-events: none;
  transition: color 0.2s;
  width: 18px !important;
  height: 18px !important;
  z-index: 2;
}
.login-card .lform-input {
  background-color: #e8f0fe !important;
  color: #0d0d0f !important;
  border: none !important;
  border-radius: 20px !important;
  height: 52px !important;
  padding: 10px 18px 10px 48px !important;
  font-size: 13px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  width: 100% !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s;
}
.login-card .lform-input::placeholder {
  color: #8a8a93 !important;
  font-weight: 500 !important;
}
.login-card .lform-input:focus {
  background-color: #ffffff !important;
  border-color: rgba(232, 197, 71, 0.85) !important;
  box-shadow: 0 0 0 2px rgba(232, 197, 71, 0.55), 0 0 10px rgba(232, 197, 71, 0.25) !important;
}
.input-icon-wrapper:focus-within .input-field-icon {
  color: var(--accent) !important;
}

/* 5. Sign up Form Grid */
.form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.grid-span-2 {
  grid-column: span 2;
}
@media (max-width: 480px) {
  .form-grid-2col {
    grid-template-columns: 1fr;
  }
  .grid-span-2 {
    grid-column: span 1;
  }
}

/* 6. Main Action Button and Footer Links */
.login-card .btn-entrar {
  background: #d1a33a !important;
  color: #000000 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 30px !important;
  height: 52px !important;
  width: 100% !important;
  margin: 24px 0 16px 0 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 15px rgba(209, 163, 58, 0.2) !important;
  box-sizing: border-box !important;
}
.login-card .btn-entrar:hover {
  background: #e2b348 !important;
  box-shadow: 0 6px 20px rgba(209, 163, 58, 0.35) !important;
  transform: translateY(-1px) !important;
}
.login-card .btn-entrar:active {
  transform: translateY(1px) !important;
}

.login-footer-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}
.login-nav-link {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #888896 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: color 0.2s;
  cursor: pointer;
}
.login-nav-link:hover {
  color: var(--accent) !important;
}
.login-nav-divider {
  width: 100%;
  border-top: 1px dashed #22222a;
  margin: 4px 0;
}
.login-footer-nav .g_id_signin {
  color-scheme: light !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 44px !important;
  background: transparent !important;
}
.login-footer-nav .g_id_signin,
.login-footer-nav .g_id_signin div,
.login-footer-nav .g_id_signin iframe {
  border-radius: 9999px !important;
  overflow: hidden !important;
  background: transparent !important;
  color-scheme: light !important;
}

.login-footer {
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  text-align: center !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 5 !important;
  overflow: hidden !important;
}

/* 5. Project Cards redesign (vertical movie style) */
.project-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 12px 14px 14px 14px !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: visible !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  height: 100% !important;
}
.project-card::before {
  display: none !important; /* disabled top accent line */
}
.project-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4), 0 0 30px rgba(209, 163, 58, 0.05) !important;
}

/* 6. Card cover elements */
.project-card-cover {
  position: relative;
  height: 100px !important;
  margin: -12px -14px 12px -14px !important;
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s;
}
.project-card-cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(21, 21, 24, 0.95) 100%);
  z-index: 1;
}
.cover-clapper {
  font-size: 26px;
  color: var(--accent);
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.project-card:hover .cover-clapper {
  transform: scale(1.15) rotate(-8deg);
}

/* 7. Card Badges */
.project-badge-gold,
.project-badge-blue,
.project-badge-gray,
.project-badge-orange {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  display: inline-flex;
  align-items: center;
}
.project-badge-gold {
  background: rgba(209, 163, 58, 0.12) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(209, 163, 58, 0.25) !important;
}
.project-badge-blue {
  background: rgba(77, 166, 255, 0.12) !important;
  color: #4da6ff !important;
  border: 1px solid rgba(77, 166, 255, 0.25) !important;
}
.project-badge-gray {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--muted) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.project-badge-orange {
  background: rgba(255, 107, 53, 0.12) !important;
  color: var(--accent2) !important;
  border: 1px solid rgba(255, 107, 53, 0.25) !important;
}

/* 8. Card metadata & dividers */
.project-meta-new {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  margin-top: 4px;
}
.project-meta-item-new {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  color: var(--muted) !important;
}
.project-meta-icon {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
}
.project-divider {
  border: none !important;
  border-top: 1px solid var(--border) !important;
  margin: 10px -14px 10px -14px !important;
  width: auto !important;
}

/* 9. Card footer with avatar and export button */
.project-footer-new {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.project-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.project-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  box-shadow: 0 0 10px rgba(209, 163, 58, 0.4);
  flex-shrink: 0;
}
.project-author-info {
  display: flex;
  flex-direction: column;
}
.project-author-name {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-author-role {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 9px !important;
  color: var(--muted) !important;
}
.project-export-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border) !important;
  background: var(--surface2) !important;
  color: var(--muted) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}
.project-export-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(209, 163, 58, 0.05) !important;
}

/* 10. New Project Card custom style */
.project-card.new-project {
  border: 1.5px dashed var(--border) !important;
  background: transparent !important;
  min-height: 180px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  opacity: 0.65 !important;
  padding: 14px !important;
  height: 100% !important;
}
.project-card.new-project:hover {
  border-color: var(--accent) !important;
  opacity: 1 !important;
  background: rgba(209, 163, 58, 0.02) !important;
}
.project-card.new-project .np-icon {
  font-size: 32px;
  color: var(--muted);
  transition: color 0.2s;
}
.project-card.new-project:hover .np-icon {
  color: var(--accent);
}

/* 11. Custom Cover Image styling overrides */
.project-card-cover.has-custom-cover .cover-clapper {
  display: none !important;
}
.project-card-cover.has-custom-cover {
  height: 110px !important;
}

/* 12. Editor Header & Nav Card Standardization */
#app-wrapper header {
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* 13. Dashboard Main Header (Meus Projetos panel) */
.dash-header {
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* =============================================
   14. MODAL SYSTEM REDESIGN — Selesta Cine Style
   ============================================= */

/* Overlay backdrop — blur + deeper dim */
.overlay-base,
.modal-overlay,
#np-overlay,
#ep-overlay,
#lixeira-overlay,
#trash-panel,
#sb-modal-overlay,
#cast-info-modal-overlay,
#member-modal-overlay,
#actor-modal-overlay,
#crew-modal-overlay,
#add-to-day-modal-overlay,
#scene-modal-overlay,
#od-scene-modal-overlay,
#roteiro-scene-modal-overlay,
#radios-modal-overlay,
#arte-cenario-modal-overlay,
#od-export-modal-overlay,
#foto-export-modal-overlay,
#arte-export-modal-overlay,
#som-export-modal-overlay {
  background: rgba(0, 0, 0, 0.82) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
}

/* Modal panel container */
.modal-panel {
  background: #111115 !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 20px !important;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* Modals with inline styles only (no .modal-panel class) */
#radios-modal,
#np-modal,
#ep-modal {
  background: #111115 !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 20px !important;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Internal info/detail cards */
.modal-panel .od-info-block,
.od-info-block {
  background: #1a1a22 !important;
  border: 1px solid #2a2a34 !important;
  border-radius: 12px !important;
}

/* Section eyebrow labels */
.modal-panel .od-info-label,
.od-info-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin-bottom: 4px !important;
}

/* Modal header titles */
.modal-panel .member-modal-title,
.member-modal-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 2px !important;
  color: var(--text) !important;
  margin-bottom: 24px !important;
}

/* Form inputs inside modals */
.modal-panel .member-form-input,
.modal-panel .lform-input,
.member-form-input {
  background: #1a1a22 !important;
  border: 1px solid #2e2e3a !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  transition: border-color 0.2s !important;
}
.modal-panel .member-form-input:focus,
.modal-panel .lform-input:focus,
.member-form-input:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
}

/* Form section separators */
.modal-panel .member-form-section {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-top: 20px !important;
  margin-top: 20px !important;
}

/* Light mode adaptations */
body.light .modal-panel,
body.light #radios-modal,
body.light #np-modal,
body.light #ep-modal {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}
body.light .overlay-base,
body.light .modal-overlay {
  background: rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
body.light .od-info-block {
  background: #f4f4f8 !important;
  border: 1px solid #e0e0e8 !important;
}

/* =============================================
   15. SELECTS & LISTS INSIDE MODALS
   ============================================= */

/* --- Custom Select — dark theme --- */
.modal-panel select,
.member-form-input[type="select"],
select.member-form-input,
select.lform-input,
select.arte-form-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #1a1a22 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888899' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  color: var(--text) !important;
  border: 1px solid #2e2e3a !important;
  border-radius: 10px !important;
  padding: 10px 36px 10px 12px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.modal-panel select:hover,
select.member-form-input:hover,
select.arte-form-input:hover {
  border-color: rgba(249, 115, 22, 0.5) !important;
}
.modal-panel select:focus,
select.member-form-input:focus,
select.arte-form-input:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
}

/* Option items — dark theme */
.modal-panel select option,
select.member-form-input option,
select.arte-form-input option {
  background-color: #1a1a22 !important;
  color: #e8e8f0 !important;
  padding: 8px 12px !important;
}
.modal-panel select option:hover,
select.member-form-input option:hover {
  background-color: #252530 !important;
}
.modal-panel select option:checked,
select.member-form-input option:checked {
  background-color: rgba(249, 115, 22, 0.25) !important;
  color: #f97316 !important;
}

/* --- List rows inside modals (actors, crew, items) --- */
.modal-panel .cast-list-item,
.modal-panel .crew-list-item,
.modal-panel .arte-list-item,
.modal-panel [class$="-list-item"],
.cast-list-item,
.crew-list-item {
  background: #1a1a22 !important;
  border: 1px solid #2a2a34 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.modal-panel .cast-list-item:hover,
.modal-panel .crew-list-item:hover,
.cast-list-item:hover,
.crew-list-item:hover {
  background: #222230 !important;
  border-color: rgba(249, 115, 22, 0.35) !important;
}

/* --- Checkboxes & radios inside modals --- */
.modal-panel input[type="checkbox"],
.modal-panel input[type="radio"] {
  accent-color: var(--accent) !important;
  width: 15px !important;
  height: 15px !important;
  cursor: pointer !important;
}

/* --- Textareas inside modals --- */
.modal-panel textarea,
textarea.member-form-input {
  background: #1a1a22 !important;
  border: 1px solid #2e2e3a !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  padding: 10px 12px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  resize: vertical !important;
  transition: border-color 0.2s !important;
}
.modal-panel textarea:focus,
textarea.member-form-input:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
}

/* ---- Light mode overrides ---- */
body.light .modal-panel select,
body.light select.member-form-input,
body.light select.arte-form-input {
  background-color: #f5f5fa !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555566' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  border-color: #d0d0de !important;
  color: #1a1a2e !important;
}
body.light .modal-panel select option,
body.light select.member-form-input option {
  background-color: #ffffff !important;
  color: #1a1a2e !important;
}
body.light .modal-panel select:focus,
body.light select.member-form-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12) !important;
}
body.light .modal-panel .cast-list-item,
body.light .modal-panel .crew-list-item,
body.light .cast-list-item,
body.light .crew-list-item {
  background: #f0f0f8 !important;
  border-color: #dcdce8 !important;
}
body.light .modal-panel .cast-list-item:hover,
body.light .cast-list-item:hover {
  background: #e8e8f4 !important;
  border-color: rgba(249, 115, 22, 0.35) !important;
}
body.light .modal-panel textarea,
body.light textarea.member-form-input {
  background: #f5f5fa !important;
  border-color: #d0d0de !important;
  color: #1a1a2e !important;
}

/* =============================================
   16. FLAT MODAL FORMS — "No boxes inside boxes"
   ============================================= */

/* Remove nested card look from info blocks */
.modal-panel .od-info-block,
.modal-panel .form-block,
.modal-panel .member-form-section,
.od-info-block,
.modal-form-block {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
}

/* Thin separator between logical groups */
.modal-panel .form-group-separator {
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  margin: 20px 0 !important;
}
body.light .modal-panel .form-group-separator {
  border-top-color: rgba(0, 0, 0, 0.07) !important;
}

/* Form field labels — clean, minimal */
.modal-panel label,
.modal-panel .od-info-label,
.modal-panel .member-form-label,
.modal-panel .lform-label,
.od-info-label,
.member-form-label {
  display: block !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #6b6b88 !important;
  margin-bottom: 6px !important;
}

/* Inputs flat on modal background — dark theme */
.modal-panel input[type="text"],
.modal-panel input[type="number"],
.modal-panel input[type="email"],
.modal-panel input[type="password"],
.modal-panel input[type="date"],
.modal-panel input[type="time"],
.modal-panel select,
.modal-panel textarea,
.member-form-input,
.arte-form-input,
select.member-form-input,
select.arte-form-input {
  background: #18181f !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 8px !important;
  color: #e4e4ef !important;
  padding: 10px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  width: 100% !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  box-sizing: border-box !important;
}
.modal-panel input::placeholder,
.modal-panel textarea::placeholder,
.member-form-input::placeholder {
  color: #45455a !important;
  font-style: italic !important;
}
.modal-panel input:hover,
.modal-panel select:hover,
.modal-panel textarea:hover,
.member-form-input:hover,
.arte-form-input:hover {
  border-color: rgba(249, 115, 22, 0.3) !important;
}
.modal-panel input:focus,
.modal-panel select:focus,
.modal-panel textarea:focus,
.member-form-input:focus,
.arte-form-input:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.13) !important;
}

/* Select custom arrow reset (dark) */
.modal-panel select,
select.member-form-input,
select.arte-form-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b88' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}
.modal-panel select option,
select.member-form-input option,
select.arte-form-input option {
  background: #18181f !important;
  color: #e4e4ef !important;
}

/* Form grid layout */
.modal-panel .form-grid,
.modal-panel .form-grid-2col,
.form-grid-2col {
  display: grid !important;
  gap: 16px !important;
}
.modal-panel .form-grid-2col,
.form-grid-2col {
  grid-template-columns: 1fr 1fr !important;
}
.modal-panel .form-grid-3col {
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 16px !important;
}
.modal-panel .form-grid-4col {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}
.modal-panel .grid-span-2 {
  grid-column: span 2 !important;
}
.modal-panel .grid-span-3 {
  grid-column: span 3 !important;
}
.modal-panel .grid-span-4 {
  grid-column: span 4 !important;
}

/* ---- Light mode — flat forms ---- */
body.light .modal-panel input[type="text"],
body.light .modal-panel input[type="number"],
body.light .modal-panel input[type="email"],
body.light .modal-panel input[type="password"],
body.light .modal-panel input[type="date"],
body.light .modal-panel input[type="time"],
body.light .modal-panel select,
body.light .modal-panel textarea,
body.light .member-form-input,
body.light .arte-form-input,
body.light select.member-form-input,
body.light select.arte-form-input {
  background: #f2f2f8 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #18181f !important;
}
body.light .modal-panel input::placeholder,
body.light .modal-panel textarea::placeholder,
body.light .member-form-input::placeholder {
  color: #9999aa !important;
}
body.light .modal-panel input:hover,
body.light .modal-panel select:hover,
body.light .modal-panel textarea:hover,
body.light .member-form-input:hover {
  border-color: rgba(249, 115, 22, 0.35) !important;
}
body.light .modal-panel input:focus,
body.light .modal-panel select:focus,
body.light .modal-panel textarea:focus,
body.light .member-form-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.10) !important;
}
body.light .modal-panel label,
body.light .modal-panel .od-info-label,
body.light .modal-panel .member-form-label,
body.light .od-info-label,
body.light .member-form-label {
  color: #8888aa !important;
}
body.light .modal-panel select,
body.light select.member-form-input,
body.light select.arte-form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239999aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
}
body.light .modal-panel select option,
body.light select.member-form-input option {
  background: #ffffff !important;
  color: #18181f !important;
}
body.light .modal-panel .od-info-block,
body.light .modal-panel .form-block,
body.light .modal-panel .member-form-section,
body.light .od-info-block {
  background: transparent !important;
  border: none !important;
}

/* =============================================
   17. META-CARD FLAT OVERRIDE — Scene Modal & Others
   ============================================= */

/* Remove nested card look from meta-card inside any modal */
.modal-panel .meta-card,
#scene-modal .meta-card,
#od-scene-modal .meta-card,
#roteiro-scene-modal .meta-card,
#add-to-day-modal .meta-card,
#orc-item-modal-overlay .meta-card,
#hotcost-modal-overlay .meta-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 4px 0 !important;
  box-shadow: none !important;
}

/* Estilo dos Labels nos modais de Orçamento para seguir o padrão do sistema */
#orc-item-modal-overlay .card-label,
#hotcost-modal-overlay .card-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #6b6b88 !important;
  margin-bottom: 6px !important;
}

/* Estilo dos Inputs nos modais de Orçamento para seguir o padrão do sistema (Flat field) */
#orc-item-modal-overlay .card-input,
#orc-item-modal-overlay .card-select,
#orc-item-modal-overlay .card-textarea,
#hotcost-modal-overlay .card-input,
#hotcost-modal-overlay .card-select,
#hotcost-modal-overlay .card-textarea {
  background: rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: 8px !important;
  color: #e4e4ef !important;
  padding: 10px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  outline: none !important;
}

#orc-item-modal-overlay .card-input:hover,
#orc-item-modal-overlay .card-select:hover,
#orc-item-modal-overlay .card-textarea:hover,
#hotcost-modal-overlay .card-input:hover,
#hotcost-modal-overlay .card-select:hover,
#hotcost-modal-overlay .card-textarea:hover {
  border-color: rgba(249, 115, 22, 0.3) !important;
}

#orc-item-modal-overlay .card-input:focus,
#orc-item-modal-overlay .card-select:focus,
#orc-item-modal-overlay .card-textarea:focus,
#hotcost-modal-overlay .card-input:focus,
#hotcost-modal-overlay .card-select:focus,
#hotcost-modal-overlay .card-textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.13) !important;
}

/* Custom arrow para selects nos modais de Orçamento */
#orc-item-modal-overlay select.card-select,
#hotcost-modal-overlay select.card-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b88' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}

#orc-item-modal-overlay select.card-select option,
#hotcost-modal-overlay select.card-select option {
  background: #18181f !important;
  color: #e4e4ef !important;
}

/* Light mode support para modais de Orçamento */
body.light #orc-item-modal-overlay .meta-card,
body.light #hotcost-modal-overlay .meta-card {
  background: transparent !important;
  border: none !important;
}

body.light #orc-item-modal-overlay .card-input,
body.light #orc-item-modal-overlay .card-select,
body.light #orc-item-modal-overlay .card-textarea,
body.light #hotcost-modal-overlay .card-input,
body.light #hotcost-modal-overlay .card-select,
body.light #hotcost-modal-overlay .card-textarea {
  background: rgba(255, 255, 255, 0.4) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #18181f !important;
}

/* Garante uniformidade e transparência no rodapé dos modais do departamento de Orçamento */
#orc-item-modal-overlay .gmodal-footer,
#hotcost-modal-overlay .gmodal-footer {
  background: transparent !important;
  background-color: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

/* Remove nested card look from meta-card inside Ordem do Dia section */
.od-meta-grid .meta-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 4px 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.light .od-meta-grid .meta-card {
  background: transparent !important;
  border: none !important;
}

/* meta-label — clean, minimal */
.modal-panel .meta-label,
#scene-modal .meta-label,
#od-scene-modal .meta-label,
#add-to-day-modal .meta-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #6b6b88 !important;
  margin-bottom: 6px !important;
}

/* meta-input — flat field with own background */
.modal-panel .meta-input,
#scene-modal .meta-input,
#od-scene-modal .meta-input,
#add-to-day-modal .meta-input {
  background: #18181f !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: #e4e4ef !important;
  padding: 10px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  outline: none !important;
}
.modal-panel .meta-input::placeholder,
#scene-modal .meta-input::placeholder {
  color: #45455a !important;
  font-style: italic !important;
}
.modal-panel .meta-input:hover,
#scene-modal .meta-input:hover {
  border-color: rgba(249, 115, 22, 0.3) !important;
}
.modal-panel .meta-input:focus,
#scene-modal .meta-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.13) !important;
}

/* select.meta-input custom arrow */
select.meta-input,
.modal-panel select.meta-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b88' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}
select.meta-input option,
.modal-panel select.meta-input option {
  background: #18181f !important;
  color: #e4e4ef !important;
}

/* Light mode — meta-card & meta-input */
body.light .modal-panel .meta-card,
body.light #scene-modal .meta-card,
body.light #od-scene-modal .meta-card {
  background: transparent !important;
  border: none !important;
}
body.light .modal-panel .meta-input,
body.light #scene-modal .meta-input,
body.light #od-scene-modal .meta-input {
  background: #f2f2f8 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #18181f !important;
}
body.light .modal-panel .meta-input::placeholder,
body.light #scene-modal .meta-input::placeholder {
  color: #9999aa !important;
}
body.light .modal-panel .meta-label,
body.light #scene-modal .meta-label {
  color: #8888aa !important;
}
body.light select.meta-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239999aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
}
body.light select.meta-input option {
  background: #ffffff !important;
  color: #18181f !important;
}

/* =============================================
   18. GLOBAL BUTTON REDESIGN — Rounded pill style
   ============================================= */

/* All primary/action buttons — pill corners */
.btn-primary,
.btn-entrar,
#btn-cadastro,
#btn-salvar-senha,
.pm-cta-btn,
.btn-save,
[class*="btn-save"],
[id*="btn-save"],
[id*="btn-salvar"] {
  border-radius: 20px !important;
}

/* Secondary / outline buttons */
.btn-secondary,
.btn-ghost,
.btn-outline,
.btn-cancel,
[class*="btn-cancel"],
[class*="btn-secondary"] {
  border-radius: 20px !important;
}

/* Danger buttons */
.btn-danger,
[class*="btn-danger"],
[class*="btn-delete"] {
  border-radius: 20px !important;
}

/* Small buttons */
.btn-sm,
.btn-xs,
[class*="btn-sm"] {
  border-radius: 16px !important;
}

/* Icon-only / close buttons — keep circular */
.btn-close,
.modal-close,
[class*="close-btn"],
[class*="btn-close"] {
  border-radius: 50% !important;
}

/* Generic button elements with btn classes */
button.btn-primary,
button.btn-secondary,
button.btn-ghost,
button.btn-danger,
a.btn-primary,
a.btn-secondary {
  border-radius: 20px !important;
}

/* Export/submit buttons in modals */
.modal-panel button[type="submit"],
.modal-panel button:not(.btn-close):not([class*="close"]):not(.tab-btn):not(.login-tab):not([class*="toggle"]) {
  border-radius: 20px !important;
}

/* Light mode buttons — no extra change needed, radius is universal */

/* =============================================
   19. CAST SEARCH FIELD FIX — Scene Modal
   ============================================= */

/* #sc-cast is an internal storage field — not needed visually.
   The search + dropdown UI handles actor selection.
   The value is still readable by JS (display:none doesn't remove value). */
#sc-cast {
  display: none !important;
}

/* Make the search field take full width of the container */
#sc-cast-search {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Generic fix: inputs inside flex containers should not force width:100% */
.modal-panel [style*="display:flex"] .meta-input,
.modal-panel [style*="display: flex"] .meta-input {
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* But direct grid children (not flex) should still be 100% */
.modal-panel [style*="display:grid"] .meta-input {
  width: 100% !important;
  flex: none !important;
}

/* Cast search field — full styling */
#sc-cast-search {
  background: #18181f !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: #e4e4ef !important;
  padding: 10px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  outline: none !important;
}
#sc-cast-search::placeholder {
  color: #45455a !important;
  font-style: normal !important;
}
#sc-cast-search:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.13) !important;
}

/* Light mode */
body.light #sc-cast-search {
  background: #f2f2f8 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #18181f !important;
}
body.light #sc-cast-search::placeholder {
  color: #9999aa !important;
}

/* =============================================
   20. FOLHA DE ROSTO — Flat Clean Design
   ============================================= */

/* Remove nested card box from each field */
.fr-field {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* fr-finput — flat input with own background */
.fr-finput {
  background: #18181f !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  padding: 10px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  outline: none !important;
}
.fr-finput:hover {
  border-color: rgba(249, 115, 22, 0.3) !important;
}
.fr-finput:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.13) !important;
}
.fr-finput::placeholder {
  color: #45455a !important;
  font-style: italic !important;
}

/* fr-fselect — flat select with custom arrow */
.fr-fselect {
  background: #18181f !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  padding: 10px 36px 10px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b88' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  cursor: pointer !important;
}
.fr-fselect:hover {
  border-color: rgba(249, 115, 22, 0.3) !important;
}
.fr-fselect:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.13) !important;
}
.fr-fselect option {
  background: #18181f !important;
  color: var(--text) !important;
}

/* fr-flabel — clean minimal label */
.fr-flabel {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #6b6b88 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Section separators — thin line style, no block bg */
.fr-sec {
  font-family: 'DM Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #6b6b88 !important;
  margin: 28px 0 16px 0 !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Grid gap consistency */
.fr-grid1,
.fr-grid2 {
  margin-bottom: 16px !important;
  gap: 16px !important;
}

/* ---- Light mode overrides ---- */
body.light .fr-finput {
  background: #f2f2f8 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #18181f !important;
}
body.light .fr-fselect {
  background-color: #f2f2f8 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #18181f !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239999aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
}
body.light .fr-finput::placeholder {
  color: #9999aa !important;
}
body.light .fr-finput:focus,
body.light .fr-fselect:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.10) !important;
}
body.light .fr-flabel {
  color: #8888aa !important;
}
body.light .fr-sec {
  color: #9999aa !important;
  border-bottom-color: rgba(0, 0, 0, 0.07) !important;
}
body.light .fr-fselect option {
  background: #ffffff !important;
  color: #18181f !important;
}
body.light .fr-field {
  background: transparent !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* SEÇÃO 21: SPLASH SCREEN DO MODAL DE IMPORTAÇÃO COM IA     */
/* ═══════════════════════════════════════════════════════════ */
#import-pdf-splash-container img {
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.08);
}
#import-pdf-splash-container img:hover {
  border-color: rgba(255,107,53,0.4);
}
body.light #import-pdf-splash-container img {
  box-shadow: 0 12px 36px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.08);
}
body.light #import-pdf-splash-container img:hover {
  border-color: rgba(255,107,53,0.5);
}

/* ═══════════════════════════════════════════════════════════ */
/* SEÇÃO 22: REDESENHO DO MENU SUPERIOR (TABS E DROPDOWNS)   */
/* ═══════════════════════════════════════════════════════════ */

/* Ajustes na barra de menu */
nav {
  background-color: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 16px !important;
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important; /* Altura ligeiramente maior para respirar */
}

/* Tabs do menu em formato de pílula flutuante */
nav .nav-tab {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12.5px !important;
  color: var(--muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 20px !important; /* Pill style */
  padding: 6px 14px !important;
  height: 32px !important; /* Altura fixa centralizada verticalmente */
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

nav .nav-tab:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text) !important;
}

/* Tab Ativa */
nav .nav-tab.active {
  background: rgba(255, 107, 53, 0.12) !important;
  border: 1px solid rgba(255, 107, 53, 0.3) !important;
  color: var(--accent) !important;
  border-radius: 20px !important; /* Mantém pill style */
  box-shadow: 0 2px 10px rgba(255, 107, 53, 0.08) !important;
}

/* Dropdown em Glassmorphism */
.sub-menu-dropdown {
  background: rgba(20, 20, 28, 0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
  padding: 6px !important;
  margin-top: 6px !important;
  min-width: 190px !important;
  transform: translateX(-50%) translateY(2px) !important;
}

/* Itens de Dropdown */
.sub-menu-item {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  transition: all 0.15s ease !important;
}

.sub-menu-item:hover {
  background-color: rgba(255, 107, 53, 0.1) !important;
  color: var(--accent) !important;
}

/* Divisores internos */
.sub-menu-divider {
  background-color: rgba(255, 255, 255, 0.06) !important;
  margin: 4px 0 !important;
}

/* Títulos/Headers dentro do dropdown */
.sub-menu-header {
  font-size: 9px !important;
  color: var(--muted) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  padding: 6px 14px 2px !important;
}

/* --- TEMA CLARO --- */
body.light nav .nav-tab:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

body.light nav .nav-tab.active {
  background: rgba(255, 107, 53, 0.08) !important;
  border-color: rgba(255, 107, 53, 0.25) !important;
  color: var(--accent2) !important;
  box-shadow: 0 2px 10px rgba(255, 107, 53, 0.04) !important;
}

body.light .sub-menu-dropdown {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12) !important;
}

body.light .sub-menu-item {
  color: rgba(0, 0, 0, 0.7) !important;
}

body.light .sub-menu-item:hover {
  background-color: rgba(255, 107, 53, 0.08) !important;
}

body.light .sub-menu-divider {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

/* Ponte invisível (pseudo-elemento) para evitar que o submenu feche ao mover o mouse pelo vão */
.sub-menu-dropdown::before {
  content: "" !important;
  position: absolute !important;
  top: -24px !important;
  left: 0 !important;
  right: 0 !important;
  height: 24px !important;
  background: transparent !important;
  z-index: -1 !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* SEÇÃO 23: GRADE DE SELEÇÃO DE CENAS NOS MODAIS (FOTO/SOM)  */
/* ═══════════════════════════════════════════════════════════ */

/* Grid unificada para os seletores de cena */
.scene-cb-grid,
.scene-cbs-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 8px !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  padding: 12px !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Label em formato card do grid */
.scene-cb-grid .scene-cb-label,
.scene-cbs-container .scene-cb-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.15s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important; /* Limpa margens antigas inline */
}

/* Hover e seleção do card */
.scene-cb-grid .scene-cb-label:hover,
.scene-cbs-container .scene-cb-label:hover {
  border-color: var(--accent) !important;
  background: rgba(255, 107, 53, 0.05) !important;
}

.scene-cb-grid .scene-cb-label:has(.scene-cb:checked),
.scene-cbs-container .scene-cb-label:has(.scene-cb:checked) {
  border-color: var(--accent) !important;
  background: rgba(255, 107, 53, 0.12) !important;
}

/* Número da cena */
.scene-cb-grid .scene-cb-num,
.scene-cbs-container .scene-cb-num {
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  line-height: 1 !important;
}

/* Descrição/Locação da cena com auto-truncamento responsivo */
.scene-cb-grid .scene-cb-loc,
.scene-cbs-container .scene-cb-loc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  color: var(--muted) !important;
  max-width: none !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* Card especial para "Marcar Todas" no topo da grade */
.scene-cb-grid .scene-cb-master,
.scene-cbs-container .scene-cb-master {
  grid-column: 1 / -1 !important; /* Ocupa a linha inteira */
  background: rgba(255, 107, 53, 0.04) !important;
  border: 1px dashed rgba(255, 107, 53, 0.3) !important;
  margin-bottom: 4px !important;
}

.scene-cb-grid .scene-cb-master:hover,
.scene-cbs-container .scene-cb-master:hover {
  background: rgba(255, 107, 53, 0.08) !important;
}

/* Ajustes no Modo Claro */
body.light .scene-cb-grid .scene-cb-label,
body.light .scene-cbs-container .scene-cb-label {
  background: #ffffff !important;
}

body.light .scene-cb-grid .scene-cb-label:hover,
body.light .scene-cbs-container .scene-cb-label:hover {
  background: rgba(255, 107, 53, 0.04) !important;
}

body.light .scene-cb-grid .scene-cb-label:has(.scene-cb:checked),
body.light .scene-cbs-container .scene-cb-label:has(.scene-cb:checked) {
  background: rgba(255, 107, 53, 0.08) !important;
}

/* ==========================================================================
   SEÇÃO 23: PADRONIZAÇÃO DAS SUB-ABAS (SUBCATEGORIAS) — ESTILO FLAT
   ========================================================================== */

.dist-tabs,
.arte-tabs,
.foto-tabs,
.som-tabs,
.elenco-tabs,
.member-modal-tabs,
.sbv-tab-bar,
.roteiro-tabs,
.orc-tabs,
.prod-mode-tabs,
.prod-tabs {
  display: flex !important;
  gap: 2px !important;
  margin-bottom: 24px !important;
  background: var(--surface2) !important;
  border-radius: 8px !important;
  padding: 4px !important;
  width: fit-content !important;
  flex-wrap: wrap !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Sub-abas individuais */
.dist-tab,
.arte-tab,
.foto-tab,
.som-tab,
.elenco-tab,
.member-modal-tab,
.sbv-tab,
.roteiro-tab,
.orc-tab,
.prod-mode-tab,
.prod-tab-btn {
  padding: 8px 20px !important;
  font-family: "DM Mono", monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  background: transparent !important;
  color: var(--muted) !important;
  transition: all 0.2s !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: auto !important;
}

.dist-tab:hover,
.arte-tab:hover,
.foto-tab:hover,
.som-tab:hover,
.elenco-tab:hover,
.member-modal-tab:hover,
.sbv-tab:hover,
.roteiro-tab:hover,
.orc-tab:hover,
.prod-mode-tab:hover,
.prod-tab-btn:hover {
  color: var(--text) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: none !important;
}

.dist-tab.active,
.arte-tab.active,
.som-tab.active,
.elenco-tab.active,
.member-modal-tab.active,
.sbv-tab.active,
.roteiro-tab.active,
.orc-tab.active,
.prod-mode-tab.active,
.prod-tab-btn.active,
.foto-tab.active {
  background: var(--accent) !important;
  color: var(--bg) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: none !important;
}

/* Ajuste específico para o Tema Claro */
body.light .dist-tab.active,
body.light .arte-tab.active,
body.light .foto-tab.active,
body.light .som-tab.active,
body.light .elenco-tab.active,
body.light .member-modal-tab.active,
body.light .sbv-tab.active,
body.light .roteiro-tab.active,
body.light .orc-tab.active,
body.light .prod-mode-tab.active,
body.light .prod-tab-btn.active {
  color: #000000 !important;
}

/* ==========================================================================
   SEÇÃO 24: PADRONIZAÇÃO DO MODAL DE CADASTRO DE LOCAÇÃO — ESTILO FLAT
   ========================================================================== */

/* Remove nested card look from meta-card and full-card inside the location modal */
#loc-modal-overlay .meta-card,
#loc-modal-overlay .full-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  transition: none !important;
}

#loc-modal-overlay .meta-card:hover,
#loc-modal-overlay .full-card:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Make form label styled minimally and clean */
#loc-modal-overlay .card-label {
  font-family: "DM Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #6b6b88 !important;
  margin-bottom: 6px !important;
}

/* Style fields flat with their own backgrounds */
#loc-modal-overlay .card-input,
#loc-modal-overlay .card-select,
#loc-modal-overlay .card-textarea {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: #e4e4ef !important;
  padding: 10px 14px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  outline: none !important;
}

/* Placeholders */
#loc-modal-overlay .card-input::placeholder,
#loc-modal-overlay .card-textarea::placeholder {
  color: #45455a !important;
  font-style: italic !important;
}

/* Hover and Focus */
#loc-modal-overlay .card-input:hover,
#loc-modal-overlay .card-select:hover,
#loc-modal-overlay .card-textarea:hover {
  border-color: rgba(249, 115, 22, 0.3) !important;
}

#loc-modal-overlay .card-input:focus,
#loc-modal-overlay .card-select:focus,
#loc-modal-overlay .card-textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.13) !important;
}

/* Custom select arrow for card-select in location modal */
#loc-modal-overlay select.card-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b88' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}

#loc-modal-overlay select.card-select option {
  background: #18181f !important;
  color: #e4e4ef !important;
}

/* Theme adaptation - Light mode */
body.light #loc-modal-overlay .meta-card {
  background: transparent !important;
  border: none !important;
}

body.light #loc-modal-overlay .card-input,
body.light #loc-modal-overlay .card-textarea {
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  color: #18181f !important;
  padding: 10px 14px !important;
}
body.light #loc-modal-overlay select.card-select {
  background-color: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  color: #18181f !important;
  padding: 10px 36px 10px 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239999aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
}

body.light #loc-modal-overlay .card-input:hover,
body.light #loc-modal-overlay .card-select:hover,
body.light #loc-modal-overlay .card-textarea:hover {
  border-color: rgba(249, 115, 22, 0.3) !important;
}

body.light #loc-modal-overlay .card-input:focus,
body.light #loc-modal-overlay .card-select:focus,
body.light #loc-modal-overlay .card-textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.13) !important;
}

body.light #loc-modal-overlay select.card-select option {
  background: #f2f2f8 !important;
  color: #18181f !important;
}

/* Seção 25: Ajustes do Botão Voltar e Status do Stripboard */
.btn-voltar-projetos {
  background: rgba(255, 107, 53, 0.08) !important;
  border: 1px solid rgba(255, 107, 53, 0.25) !important;
  border-radius: 8px !important;
  color: var(--accent2) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 8px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11.5px !important;
  height: 34px !important;
  box-sizing: border-box !important;
}

.btn-voltar-projetos:hover {
  background: var(--accent2) !important;
  color: #ffffff !important;
  border-color: var(--accent2) !important;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25) !important;
  transform: translateY(-1px) !important;
}

.btn-voltar-projetos .arrow-svg {
  transition: transform 0.25s ease !important;
}

.btn-voltar-projetos:hover .arrow-svg {
  transform: translateX(-3px) !important;
}

/* Modo claro para o botão de voltar */
body.light .btn-voltar-projetos {
  background: rgba(255, 107, 53, 0.06) !important;
  border-color: rgba(255, 107, 53, 0.2) !important;
}
body.light .btn-voltar-projetos:hover {
  background: var(--accent2) !important;
  color: #ffffff !important;
}

/* Botão de Status no Stripboard */
.btn-strip-status {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--muted) !important;
  border-radius: 12px !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 92px !important;
  justify-content: center !important;
}

.btn-strip-status:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--text) !important;
}

.btn-strip-status.filmada {
  background: rgba(58, 125, 90, 0.12) !important;
  border-color: rgba(58, 125, 90, 0.3) !important;
  color: #6ab88a !important;
}

.btn-strip-status.filmada:hover {
  background: rgba(58, 125, 90, 0.22) !important;
  border-color: rgba(58, 125, 90, 0.5) !important;
  color: #a7f3d0 !important;
}

/* Modo claro para o botão de status */
body.light .btn-strip-status {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #6b6b7a !important;
}
body.light .btn-strip-status:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #18181f !important;
}
body.light .btn-strip-status.filmada {
  background: rgba(58, 125, 90, 0.08) !important;
  border-color: rgba(58, 125, 90, 0.25) !important;
  color: #2e7d32 !important;
}
body.light .btn-strip-status.filmada:hover {
  background: rgba(58, 125, 90, 0.15) !important;
  border-color: rgba(58, 125, 90, 0.4) !important;
  color: #1b5e20 !important;
}

/* Clean styles for technical notes in Fotografia */
.foto-card .member-form-input {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  padding: 10px 14px !important;
  font-family: "DM Mono", monospace !important;
  font-size: 13px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  outline: none !important;
}

.foto-card .member-form-input::placeholder {
  color: var(--muted) !important;
  font-style: italic !important;
}

.foto-card .member-form-input:hover {
  border-color: rgba(249, 115, 22, 0.3) !important;
}

.foto-card .member-form-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.13) !important;
}

/* Light mode adaptation */
body.light .foto-card .member-form-input {
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: var(--text) !important;
}

body.light .foto-card .member-form-input::placeholder {
  color: #8b8b9f !important;
}

body.light .foto-card .member-form-input:hover {
  border-color: rgba(249, 115, 22, 0.4) !important;
}

body.light .foto-card .member-form-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
}

/* Casting/Casting-Char Cards (matching Project Cards concept) */
.casting-char-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 16px 20px 20px 20px !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: visible !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  min-height: 290px;
}

.casting-char-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4), 0 0 30px rgba(209, 163, 58, 0.05) !important;
}

.casting-char-card.is-escalado:hover {
  border-color: #6ab88a !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4), 0 0 30px rgba(106, 184, 138, 0.08) !important;
}

.casting-card-cover {
  position: relative;
  height: 120px;
  margin: -16px -20px 16px -20px;
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s;
  background: var(--surface2, #1d1d24);
}

.casting-card-cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(21, 21, 24, 0.95) 100%);
  z-index: 1;
}

.casting-cover-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.casting-cover-placeholder {
  font-size: 32px;
  color: var(--muted);
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.casting-char-card:hover .casting-cover-placeholder {
  transform: scale(1.15) rotate(-5deg);
}

.casting-badge-num {
  background: rgba(209, 163, 58, 0.12) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(209, 163, 58, 0.25) !important;
}

.casting-badge-escalado {
  background: rgba(106, 184, 138, 0.12) !important;
  color: #6ab88a !important;
  border: 1px solid rgba(106, 184, 138, 0.25) !important;
}

.casting-badge-definir {
  background: rgba(255, 107, 53, 0.12) !important;
  color: var(--accent2) !important;
  border: 1px solid rgba(255, 107, 53, 0.25) !important;
}

.casting-char-name {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.2px !important;
  color: var(--text) !important;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.casting-meta-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  margin-top: 4px;
}

.casting-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  color: var(--muted) !important;
}

.casting-meta-icon {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
}

.casting-divider {
  border: none !important;
  border-top: 1px solid var(--border) !important;
  margin: 12px -20px 12px -20px !important;
  width: auto !important;
}

.casting-options-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

@media (min-width: 1025px) {
  .projects-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Custom overrides for the redesigned Days of Filming sidebar */
.sidebar-header {
  padding: 12px 16px !important;
}
.sidebar-label {
  font-family: "DM Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  letter-spacing: 0.5px !important;
}
.trash-toggle {
  background: none !important;
  border: none !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  padding: 0 !important;
  transition: all 0.2s !important;
  box-sizing: border-box !important;
}
.trash-toggle:hover {
  background: rgba(248, 113, 113, 0.12) !important;
  border-color: transparent !important;
  color: #f87171 !important;
}
.trash-badge {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  background: #e63946 !important; /* small red pill */
  color: #fff !important;
  border-radius: 50% !important;
  min-width: 12px !important;
  height: 12px !important;
  font-size: 8px !important;
  display: none; /* hidden when 0 */
  align-items: center !important;
  justify-content: center !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: bold !important;
  border: 1px solid var(--surface) !important;
  padding: 0 2px !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}
.trash-badge.has-items {
  background: #e63946 !important;
  color: #fff !important;
  animation: badge-pop 0.25s ease !important;
}
.sidebar-header .btn-add {
  background: none !important;
  border: none !important;
  color: var(--accent) !important;
  font-weight: bold !important;
  font-size: 16px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
  padding: 0 !important;
  min-width: auto !important;
}
.sidebar-header .btn-add:hover {
  background: rgba(232, 197, 71, 0.12) !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  color: var(--accent) !important;
}
body.light .trash-toggle {
  background: none !important;
  border: none !important;
  color: #5a5a50 !important;
}
body.light .trash-toggle:hover {
  background: rgba(248, 113, 113, 0.1) !important;
  color: #c04040 !important;
}
body.light .sidebar-header .btn-add {
  background: none !important;
  border: none !important;
  color: #b8950a !important;
}
body.light .sidebar-header .btn-add:hover {
  background: rgba(184, 149, 10, 0.1) !important;
}
.day-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 4px 8px !important;
}

.chk-pill { display: inline-block; width: 20px; height: 20px; line-height: 18px; text-align: center; border-radius: 50%; font-size: 10px; font-weight: bold; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; }
.chk-pill:hover { transform: scale(1.1); }
.chk-pill.ok { background: #27ae60; color: #ffffff; border: 1px solid #27ae60; }
.chk-pill.pending { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }
.painel-alert-item:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.ensaio-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
.status-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: bold; text-transform: uppercase; }

/* 1AD Production Redesign Styles */
.prod-form-field {
  position: relative !important;
}

.prod-loc-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border: 1px solid #B8860B !important;
  border-radius: 20px !important;
  background: rgba(184, 134, 11, 0.08) !important;
  color: #B8860B !important;
  font-family: "DM Mono", monospace !important;
  font-size: 11px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  text-decoration: none !important;
}
.prod-loc-chip:hover {
  background: rgba(184, 134, 11, 0.16) !important;
  border-color: #d49a17 !important;
  color: #e5ab2b !important;
  transform: translateY(-1px) !important;
}

.prod-editable-textarea {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  color: var(--text) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  width: 100% !important;
  outline: none !important;
  line-height: 1.5 !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  resize: vertical !important;
  min-height: 80px !important;
  margin-top: 6px !important;
  margin-bottom: 12px !important;
  box-sizing: border-box !important;
}
.prod-editable-textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(232, 197, 71, 0.15) !important;
}

body.light .prod-editable-textarea {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #1f2937 !important;
}
body.light .prod-editable-textarea:focus {
  border-color: #b8950a !important;
  box-shadow: 0 0 0 2px rgba(184, 149, 10, 0.15) !important;
}

.prod-passive-container {
  background: rgba(0, 0, 0, 0.2) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px !important;
  color: var(--muted) !important;
  opacity: 0.85 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

body.light .prod-passive-container {
  background: #f3f4f6 !important;
  color: #4b5563 !important;
}

.prod-select-styled {
  margin: 0 !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  font-family: 'DM Mono', monospace !important;
  font-weight: bold !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  outline: none !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}
.prod-select-styled:hover {
  border-color: var(--accent) !important;
}
.prod-select-styled:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(232, 197, 71, 0.15) !important;
}
body.light .prod-select-styled {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #1f2937 !important;
}

/* ============================================================
   QUESTIONÁRIO DE AVALIAÇÃO TCC
   ============================================================ */
.q-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadeIn 0.25s ease-in-out;
}
.q-page div[style*="margin-top"] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.q-title-page {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 1.5px;
  color: var(--accent);
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.q-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.q-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}
.q-desc-p {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}
.q-subtitle {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--text);
  margin: 10px 0 4px;
}
.q-input, .q-select, .q-textarea {
  background-color: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  padding: 10px 12px !important;
  font-size: 12.5px !important;
  font-family: 'DM Sans', sans-serif !important;
  outline: none;
  transition: all 0.2s ease;
}
.q-input:focus, .q-select:focus, .q-textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15);
}
.q-textarea {
  display: block !important;
  width: 100% !important;
  margin-top: 8px !important;
  resize: vertical;
  min-height: 110px !important;
}
.q-options-vertical {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.q-option-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  line-height: 1.4;
}
.q-option-label input[type="radio"], 
.q-option-label input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--accent);
  cursor: pointer;
}
.q-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
}
.q-table th, .q-table td {
  border: 1px solid var(--border);
  padding: 10px;
  text-align: left;
}
.q-table th {
  background: var(--surface2);
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.q-table td:not(:first-child), .q-table th:not(:first-child) {
  text-align: center;
  width: 50px;
}

/* Escala de Notas de 0 a 10 (Item 4.6) */
.q-scale-container {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 10px;
  margin-bottom: 14px;
  width: 100%;
}
.q-scale-btn {
  flex: 1;
  position: relative;
  cursor: pointer;
}
.q-scale-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.q-scale-btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s ease;
}
.q-scale-btn:hover span {
  border-color: var(--accent);
  background: rgba(249, 115, 22, 0.05);
}
.q-scale-btn input[type="radio"]:checked + span {
  background: var(--accent) !important;
  color: #000 !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.25);
}

/* Botões de Ação Circulares (Editar e Excluir de Alto Contraste) */
.btn-action-circle {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--text) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.btn-action-circle:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: var(--text) !important;
  transform: scale(1.05);
}
.btn-action-circle.danger {
  color: var(--accent2) !important;
  border-color: rgba(230, 57, 70, 0.2) !important;
}
.btn-action-circle.danger:hover {
  background: rgba(230, 57, 70, 0.18) !important;
  border-color: var(--accent2) !important;
}

/* ==========================================================================
   COLOR WHEEL PICKER (SELETOR CROMÁTICO CIRCULAR COM BORDA DINÂMICA)
   ========================================================================== */
.color-wheel-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid var(--cor-selecionada, #ffffff);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 2px 5px rgba(0, 0, 0, 0.5);
  background-color: #ffffff;
  background-image: url('../src/img/color_wheel.png'), conic-gradient(from 90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  box-sizing: border-box;
  flex-shrink: 0;
  vertical-align: middle;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}

.color-wheel-picker.sm {
  width: 19px;
  height: 19px;
  border-width: 2px;
}

.color-wheel-picker:hover {
  transform: scale(1.14);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 10px var(--cor-selecionada, rgba(255, 255, 255, 0.5));
}

.color-wheel-picker input[type="color"] {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 300%;
  height: 300%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   SIMULADOR DE ILUMINAÇÃO: GRID DE 3 COLUNAS LADO A LADO
   ========================================================================== */
.sim-luz-main-grid {
  display: grid !important;
  grid-template-columns: minmax(320px, 1.25fr) 275px minmax(320px, 1.15fr) !important;
  gap: 16px !important;
  align-items: start !important;
  width: 100% !important;
}

.sim-luz-col-controles {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-height: 860px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

/* Telas mobile estreitas (< 768px) empilham verticalmente */
@media (max-width: 768px) {
  .sim-luz-main-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   SIMULADOR DE LUZ: CONTROLES SEGMENTADOS & BOTÕES COMPACTOS
   ========================================================================== */
.sim-segmented-control {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  gap: 2px;
}

.sim-gender-btn,
.sim-beard-btn {
  background: transparent;
  color: var(--muted);
  border: none;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  padding: 3px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sim-gender-btn:hover,
.sim-beard-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.sim-gender-btn.active,
.sim-beard-btn.active {
  background: var(--accent2) !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.sim-select-dark {
  width: 100%;
  background: rgba(20, 24, 33, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  color: #f0f2f5;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  padding: 6px 8px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease;
}

.sim-select-dark:focus {
  border-color: var(--accent);
}

.sim-luz-col1-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 900px) {
  .sim-luz-col1-bottom-grid {
    grid-template-columns: 1fr;
  }
}

.sim-input-dark {
  background: rgba(20, 24, 33, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  color: #f0f2f5;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  padding: 6px 8px;
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.sim-input-dark:focus {
  border-color: var(--accent);
}

@keyframes simLuzBlinkRec {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(0.9); }
}

/* Botão Flutuante de Reset de Câmera no Viewport 3D */
.sim-viewport-overlay-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background: rgba(12, 16, 26, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f0f2f5;
  border-radius: 5px;
  padding: 5px 9px;
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  transition: all 0.18s ease;
  pointer-events: auto;
}
.sim-viewport-overlay-btn:hover {
  background: var(--accent) !important;
  color: #111111 !important;
  border-color: var(--accent) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 107, 53, 0.45);
}

/* Seletor de Modo 360° / 2D do Cenário */
.sim-bg-mode-btn {
  background: transparent;
  color: var(--muted);
  border: none;
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.sim-bg-mode-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}
.sim-bg-mode-btn.active {
  background: var(--accent) !important;
  color: #111111 !important;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   SISTEMA DE GRIDS E CARDS COMPACTOS (PADRÃO FROTA / FIGURINOS)
   ========================================================================== */
.equip-grid-container,
#foto-lentes-list,
#foto-filtros-list,
#foto-equipluz-list,
#arte-list,
#makeup-list,
#sc-rec-extras,
#som-mics-list,
#som-acessorios-list,
#som-playlist-list,
#loc-list,
#foto-preprod-luzplan-list,
#foto-preprod-techscouts-list,
#foto-preprod-tests-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 20px;
}

@media (max-width: 640px) {
  .equip-grid-container,
  #foto-lentes-list,
  #foto-filtros-list,
  #foto-equipluz-list,
  #arte-list,
  #makeup-list,
  #sc-rec-extras,
  #som-mics-list,
  #som-acessorios-list,
  #som-playlist-list,
  #loc-list,
  #foto-preprod-luzplan-list,
  #foto-preprod-techscouts-list,
  #foto-preprod-tests-list {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* Card Compacto */
/* Card Compacto */
.equip-compact-card {
  background: var(--surface, #111114);
  border: 1px solid var(--border, #2a2a32);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 105px;
  box-sizing: border-box;
}

.equip-compact-card:hover {
  border-color: var(--accent, #e8c547);
  background: var(--surface2, #18181d);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(232, 197, 71, 0.1);
}

body.light .equip-compact-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #d4d2ca);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

body.light .equip-compact-card:hover {
  border-color: var(--accent, #b8950a);
  background: var(--surface2, #eceae4);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* Header */
.equip-compact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.equip-compact-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.equip-compact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 15px;
  flex-shrink: 0;
  background: var(--surface2, #18181d);
  border: 1px solid var(--border, #2a2a32);
}

.equip-compact-name {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #ffffff);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.equip-compact-cat {
  font-family: "DM Mono", monospace;
  font-size: 9.5px;
  color: var(--muted, #7e8b9b);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.equip-compact-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* Chips e Badges */
.equip-compact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.equip-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "DM Mono", monospace;
  font-size: 9.5px;
  padding: 2.5px 7px;
  border-radius: 5px;
  background: var(--surface2, #18181d);
  border: 1px solid var(--border, #2a2a32);
  color: var(--text, #eee);
  transition: all 0.15s ease;
}

.equip-chip-orange {
  background: rgba(255, 107, 53, 0.12);
  border-color: rgba(255, 107, 53, 0.35);
  color: var(--accent2, #ff8c5a);
  font-weight: 700;
}

.equip-chip-blue {
  background: #1a2030;
  border-color: #253050;
  color: #7aaed4;
}

.equip-chip-green {
  background: #1a2820;
  border-color: #253828;
  color: #6ab88a;
}

.equip-chip-purple {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
}

.equip-chip-yellow,
.equip-chip-accent {
  background: rgba(232, 197, 71, 0.12);
  border-color: rgba(232, 197, 71, 0.3);
  color: var(--accent, #e8c547);
  font-weight: 700;
}

.equip-chip-action {
  background: var(--surface2, #18181d);
  border: 1px solid var(--border, #2a2a32);
  color: var(--text, #eee);
  cursor: pointer;
  text-decoration: none;
}
.equip-chip-action:hover {
  border-color: var(--accent, #e8c547);
  color: var(--accent, #e8c547);
}

body.light .equip-chip {
  background: var(--surface2, #eceae4);
  border-color: var(--border, #d4d2ca);
  color: var(--text, #1e293b);
}

body.light .equip-chip-orange {
  background: #fde8d8;
  border-color: #f0b090;
  color: var(--accent2, #d44f1a);
}

body.light .equip-chip-blue {
  background: #dde8f8;
  border-color: #aac8e8;
  color: #2a5a8a;
}

body.light .equip-chip-green {
  background: #d8f2e4;
  border-color: #90d0b0;
  color: #1a6040;
}

body.light .equip-chip-yellow,
body.light .equip-chip-accent {
  background: #fef8d0;
  border-color: #e0d070;
  color: var(--accent, #8a6e00);
}

body.light .equip-chip-action:hover {
  border-color: var(--accent, #b8950a);
  color: var(--accent, #b8950a);
}

/* Footer / Meta */
.equip-compact-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border, #2a2a32);
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted, #7e8b9b);
}

body.light .equip-compact-footer {
  border-top-color: var(--border, #d4d2ca);
}

.equip-notes-text {
  font-family: "DM Mono", monospace;
  font-size: 9.5px;
  color: var(--muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* ==========================================================================
   CARDS COMPACTOS DE PLANO DE ILUMINAÇÃO (PADRÃO FIGURINOS / FROTA)
   ========================================================================== */
.luzplan-card,
.techscout-card,
.testecam-card {
  min-height: 130px;
}

.luzplan-watermark-num,
.techscout-watermark-num,
.testecam-watermark-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 38px;
  line-height: 1;
  color: var(--border);
  opacity: 0.45;
  position: absolute;
  top: 8px;
  right: 68px;
  pointer-events: none;
  user-select: none;
}

body.light .luzplan-watermark-num,
body.light .techscout-watermark-num,
body.light .testecam-watermark-num {
  color: #cbd5e1;
  opacity: 0.6;
}

/* Spinner de Carregamento de HDRI */
.sim-luz-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: simLuzSpin 0.8s linear infinite;
}

@keyframes simLuzSpin {
  to { transform: rotate(360deg); }
}

.luzplan-thumb-wrap {
  width: 100%;
  height: 112px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #07090e;
  border: 1px solid var(--border);
  box-sizing: border-box;
}

.luzplan-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.luzplan-thumb-wrap:hover .luzplan-thumb-img {
  transform: scale(1.03);
}

.luzplan-thumb-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  color: var(--accent);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.luzplan-thumb-overlay-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  color: var(--accent);
  backdrop-filter: blur(4px);
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.luzplan-thumb-wrap:hover .luzplan-thumb-overlay-btn {
  opacity: 1;
}

.luzplan-specs-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 9px;
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  box-sizing: border-box;
}

.luzplan-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
}

.luzplan-spec-lbl {
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.luzplan-spec-val {
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  max-width: 190px;
}

.luzplan-desc-clamp {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* ==========================================================================
   PAINEL DE NOTAS TÉCNICAS DE FOTOGRAFIA (PADRÃO DO SISTEMA)
   ========================================================================== */
.foto-notas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
}

.foto-notas-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 860px) {
  .foto-notas-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.foto-notas-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.foto-notas-card:hover {
  border-color: var(--accent);
}

body.light .foto-notas-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

.foto-notas-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.foto-notas-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
}

.foto-notas-fields-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 520px) {
  .foto-notas-fields-grid-2x2 {
    grid-template-columns: 1fr;
  }
}

.foto-notas-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.foto-notas-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.foto-notas-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s ease;
}

.foto-notas-input:focus {
  border-color: var(--accent);
  background: var(--surface2);
}

body.light .foto-notas-input {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

body.light .foto-notas-input:focus {
  background: #ffffff;
  border-color: var(--accent);
}

/* ==========================================================================
   DISTRIBUIÇÃO & PÓS-PRODUÇÃO - GRADE DE CARDS (Estilo Grade Figurinos)
   ========================================================================== */
.dist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.dist-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  box-sizing: border-box;
}

.dist-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(232, 197, 71, 0.08);
}

.dist-card-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 32px;
  color: var(--border);
  position: absolute;
  top: 12px;
  right: 16px;
  line-height: 1;
  opacity: 0.6;
  pointer-events: none;
}

.dist-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-right: 36px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dist-card-actor {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dist-card-body {
  margin-top: 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dist-card-field-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}

.dist-card-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dist-card-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  outline: none;
  font-family: "DM Mono", monospace;
  transition: border-color 0.2s;
}

.dist-card-input:focus {
  border-color: var(--accent);
}

.dist-card-btn-attach {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-family: "DM Mono", monospace;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: all 0.2s;
  flex-shrink: 0;
}

.dist-card-btn-attach:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
  color: var(--accent);
}

.dist-card-select {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12px;
  outline: none;
  cursor: pointer;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2214%22 height=%2214%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23888899%22 stroke-width=%222.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%226 9 12 15 18 9%22%3E%3C/polyline%3E%3C/svg%3E') !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
  padding-right: 28px !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.2s;
}

.dist-card-select:focus {
  border-color: var(--accent);
}

.dist-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.dist-card-count {
  font-family: "DM Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
}

.dist-card-badge {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.dist-card-badge.clickable {
  cursor: pointer;
  color: var(--accent);
  background: rgba(232, 197, 71, 0.08);
  border: 1px solid rgba(232, 197, 71, 0.25);
}

.dist-card-badge.clickable:hover {
  background: rgba(232, 197, 71, 0.18);
  border-color: var(--accent);
  color: #fff;
}

.dist-card-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 4px;
  transition: all 0.2s;
  z-index: 2;
}

.dist-card-delete:hover {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.15);
}

/* ==========================================================================
   DISTRIBUIÇÃO - MARKETING & DIVULGAÇÃO
   ========================================================================== */
.dist-mkt-synopsis-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s;
}

.dist-mkt-synopsis-panel:focus-within {
  border-color: rgba(232, 197, 71, 0.5);
}

.dist-mkt-synopsis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.dist-mkt-synopsis-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.dist-mkt-synopsis-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "DM Mono", monospace;
  font-size: 10.5px;
  color: var(--muted);
}

.dist-mkt-textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dist-mkt-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* ---------- Destaque de Campos Obrigatórios Faltantes (Sequencial) ---------- */
@keyframes campoFaltanteShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

@keyframes campoFaltantePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7);
    border-color: #ff4444;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 68, 68, 0.25);
    border-color: #ff6b35;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7);
    border-color: #ff4444;
  }
}

.campo-obrigatorio-faltante,
.input-required-missing {
  border: 2px solid #ff4444 !important;
  background-color: rgba(255, 68, 68, 0.08) !important;
  animation: campoFaltanteShake 0.35s ease, campoFaltantePulse 1.8s infinite ease-in-out !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.campo-obrigatorio-faltante:focus,
.input-required-missing:focus {
  border-color: #ff2222 !important;
  box-shadow: 0 0 12px rgba(255, 34, 34, 0.5) !important;
}

body.light .campo-obrigatorio-faltante,
body.light .input-required-missing {
  background-color: rgba(255, 68, 68, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* SEÇÃO 23: SISTEMA VISUAL DE UPLOAD & DRAG AND DROP          */
/* ═══════════════════════════════════════════════════════════ */

.app-dropzone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 16px 14px;
  background: rgba(255, 255, 255, 0.015);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
  position: relative;
  user-select: none;
}

.app-dropzone.compact {
  padding: 10px 12px;
  gap: 5px;
}

.app-dropzone:hover {
  border-color: var(--accent);
  background: rgba(255, 107, 53, 0.04);
}

.app-dropzone.is-dragover {
  border-color: #3b82f6 !important;
  background: rgba(59, 130, 246, 0.08) !important;
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.25) !important;
  transform: scale(1.01);
}

.app-dropzone.is-disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
  border-style: solid;
  background: rgba(0, 0, 0, 0.1);
}

.app-dropzone-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--accent);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.app-dropzone.compact .app-dropzone-badge {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

.app-dropzone:hover .app-dropzone-badge {
  background: rgba(255, 107, 53, 0.12);
  border-color: rgba(255, 107, 53, 0.35);
  transform: translateY(-2px);
}

.app-dropzone-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.app-dropzone-sub {
  font-size: 10px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.3px;
}

.app-dropzone-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}

.app-dropzone.compact .app-dropzone-btn {
  padding: 3px 9px;
  font-size: 10px;
}

.app-dropzone-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 107, 53, 0.08);
}

/* PRÉVIA DE ANEXO ÚNICO (Sem lista!) */
.app-single-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  margin-top: 6px;
  transition: border-color 0.2s, background 0.2s;
  animation: fadeIn 0.2s ease-out;
}

.app-single-preview:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.app-single-preview-thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #09090d;
  border: 1px solid var(--border);
}

.app-single-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.2s;
}

.app-single-preview-thumb img:hover {
  transform: scale(1.08);
}

.app-single-preview-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-single-preview-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.app-single-preview-name:hover {
  color: var(--accent);
}

.app-single-preview-meta {
  font-size: 10px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
}

.app-single-preview-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* LISTA DE MÚLTIPLOS ANEXOS */
.app-multi-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.app-multi-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
  animation: slideDownFade 0.2s ease-out;
}

.app-multi-item:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.app-multi-thumb {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #09090d;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.app-multi-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.2s;
}

.app-multi-thumb img:hover {
  transform: scale(1.08);
}

.app-multi-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.app-multi-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.app-multi-title:hover {
  color: var(--accent);
}

.app-multi-meta {
  font-size: 10px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  display: flex;
  align-items: center;
  gap: 6px;
}

.app-multi-badge {
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(66, 133, 244, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(66, 133, 244, 0.25);
  font-weight: 600;
}

.app-multi-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.app-btn-del {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  border: 1px solid rgba(255, 107, 53, 0.35);
  background: transparent;
  color: var(--accent2);
  cursor: pointer;
  transition: all 0.15s ease;
  font-weight: bold;
}

.app-btn-del:hover {
  background: rgba(255, 107, 53, 0.15);
  border-color: var(--accent2);
}

.app-upload-progress {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.app-upload-progress-bar {
  height: 100%;
  background: var(--accent);
  transition: width 0.2s ease;
}

/* Light Theme Overrides */
body.light .app-dropzone {
  background: #f8fafc;
  border-color: #cbd5e1;
}

body.light .app-dropzone:hover {
  background: rgba(255, 107, 53, 0.05);
  border-color: var(--accent);
}

body.light .app-dropzone-badge {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

body.light .app-dropzone-btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #1e293b;
}

body.light .app-single-preview,
body.light .app-multi-item {
  background: #ffffff;
  border-color: #e2e8f0;
}

body.light .app-single-preview:hover,
body.light .app-multi-item:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

body.light .app-single-preview-thumb,
body.light .app-multi-thumb {
  background: #f1f5f9;
  border-color: #e2e8f0;
}