/* =========================================================
   CLIPBOT SAAS
   Core interface styling
   ========================================================= */

/* ---------- Design tokens ---------- */

:root {
  --bg-main: #090b0f;
  --bg-sidebar: #0d1015;
  --bg-panel: #11151b;
  --bg-panel-hover: #171c23;

  --border: #222832;

  --text-main: #f5f5f5;
  --text-muted: #89929f;

  /* ClipBot accent */
  --accent: #00fff2;

  --sidebar-width: 220px;
  --topbar-height: 82px;

  --radius: 12px;
}

/* ---------- Reset ---------- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  background: var(--bg-main);
  color: var(--text-main);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

/* ---------- Main application shell ---------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
  position: fixed;

  top: 0;
  left: 0;
  bottom: 0;

  width: var(--sidebar-width);

  display: flex;
  flex-direction: column;

  background: var(--bg-sidebar);

  border-right: 1px solid var(--border);
}

/* ---------- ClipBot logo ---------- */

.brand {
  height: var(--topbar-height);

  display: flex;
  align-items: center;

  padding: 0 24px;

  font-size: 20px;
  font-weight: 800;

  letter-spacing: 2px;

  border-bottom: 1px solid var(--border);
}

.brand-clip {
  color: var(--text-main);
}

.brand-bot {
  color: var(--accent);
}

/* ---------- Navigation ---------- */

.nav {
  display: flex;
  flex-direction: column;

  flex: 1;

  padding: 18px 12px;
}

.nav-item {
  position: relative;

  width: 100%;

  padding: 11px 12px;

  border: none;
  border-radius: 8px;

  background: transparent;
  color: var(--text-muted);

  text-align: left;

  font-size: 14px;
  font-weight: 500;

  cursor: pointer;

  transition:
    background 120ms ease,
    color 120ms ease;
}

.nav-item:hover {
  background: var(--bg-panel-hover);
  color: var(--text-main);
}

.nav-item.active {
  background: rgba(0, 255, 242, 0.08);
  color: var(--accent);
}

/* Thin ClipBot accent beside selected page */

.nav-item.active::before {
  content: "";

  position: absolute;

  left: 0;
  top: 8px;
  bottom: 8px;

  width: 2px;

  border-radius: 2px;

  background: var(--accent);
}

/* ---------- Sidebar separators ---------- */

.nav-divider {
  height: 1px;

  margin: 14px 8px;

  background: var(--border);
}

.nav-spacer {
  flex: 1;
}

/* =========================================================
   DAVEY NOTIFICATION
   ========================================================= */

.notification-dot {
  position: absolute;

  right: 14px;
  top: 50%;

  width: 7px;
  height: 7px;

  transform: translateY(-50%);

  border-radius: 50%;

  background: var(--accent);

  box-shadow: 0 0 8px rgba(0, 255, 242, 0.8);
}

.notification-dot.hidden {
  display: none;
}

/* =========================================================
   MAIN AREA
   ========================================================= */

.main-area {
  width: calc(100% - var(--sidebar-width));

  min-height: 100vh;

  margin-left: var(--sidebar-width);
}

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;

  top: 0;
  z-index: 10;

  min-height: var(--topbar-height);

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 14px 28px;

  background: rgba(9, 11, 15, 0.94);

  border-bottom: 1px solid var(--border);

  backdrop-filter: blur(12px);
}

.topbar h1 {
  font-size: 20px;
  font-weight: 650;
}

.topbar p {
  margin-top: 4px;

  color: var(--text-muted);

  font-size: 12px;
}

/* ---------- Right side status ---------- */

.topbar-status {
  display: flex;
  align-items: center;

  gap: 20px;
}

.worker-status {
  display: flex;
  align-items: center;

  gap: 8px;

  color: var(--text-muted);

  font-size: 12px;
}

.status-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #555d68;
}

/* ---------- Account button ---------- */

.account-button {
  padding: 8px 12px;

  border: 1px solid var(--border);
  border-radius: 8px;

  background: var(--bg-panel);

  color: var(--text-main);

  cursor: pointer;
}

.account-button:hover {
  border-color: #39414d;
}

/* =========================================================
   CONTENT
   ========================================================= */

.content {
  padding: 28px;

  max-width: 1500px;
}

/* ---------- Initial welcome panel ---------- */

.welcome-card {
  max-width: 720px;

  padding: 32px;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  background: var(--bg-panel);
}

.eyebrow {
  margin-bottom: 10px;

  color: var(--accent);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 1.6px;
}

.welcome-card h2 {
  margin-bottom: 12px;

  font-size: 26px;
  font-weight: 650;
}

.welcome-card > p:last-child {
  max-width: 560px;

  color: var(--text-muted);

  line-height: 1.6;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {
  :root {
    --sidebar-width: 170px;
  }

  .content {
    padding: 20px;
  }

  .topbar {
    padding: 14px 20px;
  }

  .worker-status {
    display: none;
  }
}

/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard {
  display: flex;
  flex-direction: column;
  gap: 32px;

  width: 100%;
}

.dashboard-section {
  width: 100%;
}

/* ---------- Section heading ---------- */

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 14px;
}

.section-heading h2 {
  font-size: 18px;
  font-weight: 650;
}

.section-heading .eyebrow {
  margin-bottom: 5px;
}

.demo-badge {
  padding: 5px 8px;

  border: 1px solid var(--border);
  border-radius: 6px;

  color: var(--text-muted);

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 1px;
}

/* =========================================================
   PRIMARY STATUS CARDS
   ========================================================= */

.stats-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;
}

.stat-card {
  min-width: 0;

  padding: 18px;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  background: var(--bg-panel);
}

.stat-label {
  margin-bottom: 12px;

  color: var(--text-muted);

  font-size: 11px;
  font-weight: 650;

  letter-spacing: 0.7px;

  text-transform: uppercase;
}

.stat-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.stat-value {
  font-size: 30px;
  line-height: 1;

  font-weight: 700;
}

.stat-detail {
  margin-top: 11px;

  color: var(--text-muted);

  font-size: 11px;
}

/* ---------- Status labels ---------- */

.stat-status,
.stat-change {
  white-space: nowrap;

  font-size: 10px;
  font-weight: 650;
}

.stat-status.online,
.stat-change.positive {
  color: var(--accent);
}

.stat-status.processing {
  color: #e7c45b;
}

/* =========================================================
   PLATFORM CARDS
   ========================================================= */

.platform-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 14px;
}

.platform-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 235px;

  overflow: hidden;

  padding: 20px;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  background: var(--bg-panel);
}

/*
   Small platform accent instead of V1's large bright borders.
*/

.platform-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 2px;
}

.twitch-card::before {
  background: #9146ff;
}

.kick-card::before {
  background: #53fc18;
}

/* ---------- Platform header ---------- */

.platform-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 24px;
}

.platform-name {
  margin-bottom: 4px;

  font-size: 16px;
  font-weight: 700;
}

.twitch-text {
  color: #a970ff;
}

.kick-text {
  color: #53fc18;
}

.platform-subtitle {
  color: var(--text-muted);

  font-size: 11px;
}

.platform-live {
  display: flex;
  align-items: center;

  gap: 7px;

  color: var(--text-muted);

  font-size: 10px;
  font-weight: 600;
}

.live-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--accent);

  box-shadow: 0 0 6px rgba(0, 255, 242, 0.55);
}

/* ---------- Platform statistics ---------- */

.platform-metrics {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  margin-bottom: 22px;

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.platform-metric {
  min-width: 0;

  padding: 14px 12px;
}

.platform-metric:first-child {
  padding-left: 0;
}

.platform-metric + .platform-metric {
  border-left: 1px solid var(--border);
}

.platform-metric span,
.platform-metric strong {
  display: block;
}

.platform-metric span {
  margin-bottom: 6px;

  color: var(--text-muted);

  font-size: 10px;
}

.platform-metric strong {
  overflow: hidden;

  font-size: 13px;
  font-weight: 650;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Platform action ---------- */

.platform-action {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;

  margin-top: auto;
  padding: 10px 0 0;

  border: none;

  background: transparent;
  color: var(--text-muted);

  font-size: 11px;
  font-weight: 600;

  cursor: pointer;
}

.platform-action:hover {
  color: var(--text-main);
}

/* =========================================================
   DASHBOARD RESPONSIVE RULES
   ========================================================= */

@media (max-width: 1100px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

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

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

  .platform-metric:first-child {
    padding-left: 12px;
  }

  .platform-metric + .platform-metric {
    border-left: none;
    border-top: 1px solid var(--border);
  }
}

/* =========================================================
   RECENT CLIPS
   ========================================================= */

.section-action {
  border: none;
  background: transparent;

  color: var(--text-muted);

  font-size: 11px;
  font-weight: 600;

  cursor: pointer;
}

.section-action:hover {
  color: var(--text-main);
}

.recent-clips-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;
}

.clip-card {
  min-width: 0;

  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  background: var(--bg-panel);
}

.clip-preview {
  position: relative;

  height: 150px;

  background: linear-gradient(135deg, #151b22, #0c1015);

  border-bottom: 1px solid var(--border);
}

.preview-placeholder {
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #444d59;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 1px;
}

.clip-platform {
  position: absolute;

  top: 10px;
  left: 10px;

  z-index: 2;

  padding: 4px 6px;

  border-radius: 5px;

  background: rgba(9, 11, 15, 0.85);

  font-size: 8px;
  font-weight: 800;
}

.twitch-chip {
  color: #a970ff;
}

.kick-chip {
  color: #53fc18;
}

.clip-duration {
  position: absolute;

  right: 10px;
  bottom: 9px;

  padding: 3px 5px;

  border-radius: 4px;

  background: rgba(0, 0, 0, 0.75);

  color: var(--text-main);

  font-size: 9px;
}

.clip-info {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 14px;
}

.clip-title {
  overflow: hidden;

  color: var(--text-main);

  font-size: 12px;
  font-weight: 650;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.clip-creator {
  margin-top: 4px;

  color: var(--text-muted);

  font-size: 10px;
}

.davey-score {
  flex-shrink: 0;

  text-align: right;
}

.davey-score span {
  display: block;

  margin-bottom: 2px;

  color: var(--text-muted);

  font-size: 8px;
}

.davey-score strong {
  color: var(--accent);

  font-size: 14px;
}

.clip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding: 10px 14px;

  border-top: 1px solid var(--border);

  color: var(--text-muted);

  font-size: 9px;
}

.publish-state {
  font-weight: 650;
}

.publish-state.published,
.publish-state.ready {
  color: var(--accent);
}

.publish-state.processing {
  color: #e7c45b;
}

.publish-state.review {
  color: #aeb6c2;
}

/* =========================================================
   DAVEY + SYSTEM
   ========================================================= */

.dashboard-bottom-grid {
  display: grid;

  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);

  gap: 14px;
}

.intelligence-card,
.system-card {
  display: flex;
  flex-direction: column;

  min-height: 285px;

  padding: 20px;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  background: var(--bg-panel);
}

.card-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 22px;
}

.card-heading-row h2 {
  font-size: 18px;
}

.new-discovery-badge {
  padding: 5px 8px;

  border: 1px solid rgba(0, 255, 242, 0.25);
  border-radius: 6px;

  background: rgba(0, 255, 242, 0.06);

  color: var(--accent);

  font-size: 9px;
  font-weight: 700;
}

.worker-offline-badge {
  padding: 5px 8px;

  border: 1px solid var(--border);
  border-radius: 6px;

  color: var(--text-muted);

  font-size: 9px;
  font-weight: 650;
}

.discovery-content {
  max-width: 680px;
}

.discovery-title {
  margin-bottom: 8px;

  font-size: 15px;
  font-weight: 600;

  line-height: 1.45;
}

.discovery-description {
  color: var(--text-muted);

  font-size: 11px;

  line-height: 1.6;
}

.discovery-meta {
  display: flex;

  gap: 36px;

  margin-top: 20px;
}

.discovery-meta span,
.discovery-meta strong {
  display: block;
}

.discovery-meta span {
  margin-bottom: 4px;

  color: var(--text-muted);

  font-size: 9px;
}

.discovery-meta strong {
  font-size: 12px;
}

.system-list {
  display: flex;
  flex-direction: column;
}

.system-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 0;

  border-bottom: 1px solid var(--border);

  font-size: 11px;
}

.system-row span {
  color: var(--text-muted);
}

.system-row strong {
  font-weight: 650;
}

.system-offline {
  color: var(--text-muted);
}

.card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;

  margin-top: auto;
  padding-top: 16px;

  border: none;

  background: transparent;
  color: var(--text-muted);

  font-size: 11px;
  font-weight: 600;

  cursor: pointer;
}

.card-action:hover {
  color: var(--text-main);
}

/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
  .recent-clips-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

@media (max-width: 650px) {
  .recent-clips-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   STREAMERS
   ========================================================= */

.streamers-page {
  display: flex;
  flex-direction: column;

  gap: 32px;
}

/* ---------- Monitoring summary ---------- */

.streamer-stats-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;
}

.mini-stat-card {
  position: relative;

  overflow: hidden;

  padding: 16px 18px;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  background: var(--bg-panel);
}

.mini-stat-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 2px;

  background: var(--border);
}

.twitch-stat::before {
  background: #9146ff;
}

.kick-stat::before {
  background: #53fc18;
}

.mini-stat-card span,
.mini-stat-card strong {
  display: block;
}

.mini-stat-card span {
  margin-bottom: 9px;

  color: var(--text-muted);

  font-size: 10px;
  font-weight: 650;

  text-transform: uppercase;

  letter-spacing: 0.6px;
}

.mini-stat-card strong {
  font-size: 21px;
}

/* =========================================================
   MONITORING CONTROLS
   ========================================================= */

.monitoring-control-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 14px;
}

.monitoring-card {
  position: relative;

  overflow: hidden;

  padding: 20px;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  background: var(--bg-panel);
}

.monitoring-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 2px;
}

.twitch-monitoring::before {
  background: #9146ff;
}

.kick-monitoring::before {
  background: #53fc18;
}

.monitoring-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 24px;
}

.monitor-count {
  padding: 5px 8px;

  border: 1px solid var(--border);
  border-radius: 6px;

  color: var(--text-muted);

  font-size: 9px;
}

/* ---------- Input controls ---------- */

.monitor-form {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.monitor-form label {
  margin-top: 6px;

  color: var(--text-muted);

  font-size: 10px;
  font-weight: 600;
}

.monitor-input-row {
  display: grid;

  grid-template-columns: 1fr auto;

  gap: 8px;
}

.monitor-input-row input {
  width: 100%;

  padding: 10px 11px;

  border: 1px solid var(--border);
  border-radius: 7px;

  outline: none;

  background: #0b0f14;
  color: var(--text-main);

  font: inherit;
  font-size: 11px;
}

.monitor-input-row input::placeholder {
  color: #555e6a;
}

.monitor-input-row input:focus {
  border-color: rgba(0, 255, 242, 0.45);
}

.monitor-input-row button {
  min-width: 58px;

  padding: 0 13px;

  border: 1px solid var(--border);
  border-radius: 7px;

  background: #161b22;
  color: var(--text-main);

  font-size: 10px;
  font-weight: 650;

  cursor: pointer;
}

.monitor-input-row button:hover {
  border-color: #39424e;
  background: #1b2129;
}

/* ---------- Priority tags ---------- */

.monitoring-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 18px;
  padding-top: 16px;

  border-top: 1px solid var(--border);
}

.monitor-tag {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding: 5px 7px 5px 9px;

  border: 1px solid var(--border);
  border-radius: 999px;

  background: #0c1015;
  color: var(--text-muted);

  font-size: 9px;
}

.monitor-tag button {
  width: 15px;
  height: 15px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: none;
  border-radius: 50%;

  background: #1a2028;
  color: var(--text-muted);

  font-size: 11px;

  cursor: pointer;
}

.monitor-tag button:hover {
  color: var(--text-main);
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .streamer-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitoring-control-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .streamer-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ACTIVE SCOUTS
   ========================================================= */

.scout-update-status {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  color: var(--text-muted);

  font-size: 10px;
  font-weight: 650;
}

.scout-table-card {
  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  background: var(--bg-panel);
}

.scout-table-scroll {
  width: 100%;

  overflow-x: auto;
}

.scout-table {
  width: 100%;
  min-width: 1050px;

  border-collapse: collapse;

  font-size: 10px;
}

.scout-table th {
  padding: 11px 14px;

  border-bottom: 1px solid var(--border);

  color: var(--text-muted);

  font-size: 9px;
  font-weight: 650;

  letter-spacing: 0.5px;

  text-align: left;
  text-transform: uppercase;
}

.scout-table td {
  padding: 12px 14px;

  border-bottom: 1px solid var(--border);

  color: #cbd2dc;

  white-space: nowrap;
}

.scout-table tbody tr:last-child td {
  border-bottom: none;
}

.scout-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.018);
}

.creator-cell {
  color: var(--text-main) !important;

  font-weight: 650;
}

/* ---------- Platform ---------- */

.table-platform {
  font-weight: 700;
}

.twitch-table {
  color: #a970ff;
}

.kick-table {
  color: #53fc18;
}

/* ---------- Assignment ---------- */

.assignment-badge {
  display: inline-flex;

  padding: 4px 6px;

  border: 1px solid var(--border);
  border-radius: 5px;

  font-size: 8px;
  font-weight: 700;

  text-transform: uppercase;
}

.assignment-badge.pinned {
  color: #e7c45b;

  border-color: rgba(231, 196, 91, 0.25);

  background: rgba(231, 196, 91, 0.05);
}

.assignment-badge.automatic {
  color: var(--text-muted);
}

/* ---------- Activity ---------- */

.activity-cell {
  display: flex;
  align-items: center;

  gap: 8px;
}

.activity-bar {
  width: 72px;
  height: 4px;

  overflow: hidden;

  border-radius: 999px;

  background: #252c35;
}

.activity-bar span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background: var(--accent);
}

.activity-cell strong {
  min-width: 28px;

  color: var(--text-main);

  font-size: 9px;
}

/* ---------- Monitoring state ---------- */

.monitoring-state {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color: var(--text-muted);

  font-size: 9px;
}

/* =========================================================
   LIVE SCOUT PREVIEWS
   ========================================================= */

.preview-summary {
  color: var(--text-muted);

  font-size: 10px;
}

.live-scout-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;
}

.live-scout-card {
  position: relative;

  min-width: 0;

  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  background: var(--bg-panel);
}

.live-scout-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  z-index: 3;

  height: 2px;
}

.twitch-scout-card::before {
  background: #9146ff;
}

.kick-scout-card::before {
  background: #53fc18;
}

/* ---------- Preview ---------- */

.scout-preview {
  position: relative;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  border-bottom: 1px solid var(--border);

  background: linear-gradient(135deg, #171d25, #0b0f14);
}

.preview-live-badge {
  position: absolute;

  top: 10px;
  right: 10px;

  display: inline-flex;
  align-items: center;

  gap: 5px;

  padding: 4px 6px;

  border-radius: 5px;

  background: rgba(5, 8, 11, 0.88);

  color: var(--text-main);

  font-size: 8px;
  font-weight: 750;
}

.preview-platform {
  position: absolute;

  top: 10px;
  left: 10px;

  padding: 4px 6px;

  border-radius: 5px;

  background: rgba(5, 8, 11, 0.88);

  font-size: 8px;
  font-weight: 800;
}

/* ---------- Scout information ---------- */

.scout-preview-info {
  padding: 14px;
}

.scout-preview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;
}

.scout-preview-heading > div strong,
.scout-preview-heading > div span {
  display: block;
}

.scout-preview-heading > div strong {
  color: var(--text-main);

  font-size: 11px;
}

.scout-preview-heading > div span {
  margin-top: 3px;

  color: var(--text-muted);

  font-size: 9px;
}

.preview-activity {
  color: var(--accent);

  font-size: 14px;
}

.preview-category {
  margin-top: 12px;

  overflow: hidden;

  color: var(--text-muted);

  font-size: 9px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Activity ---------- */

.preview-activity-bar {
  width: 100%;
  height: 4px;

  margin-top: 8px;

  overflow: hidden;

  border-radius: 999px;

  background: #252c35;
}

.preview-activity-bar span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background: var(--accent);
}

/* ---------- Bottom statistics ---------- */

.preview-stats {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  margin-top: 14px;

  border-top: 1px solid var(--border);
}

.preview-stats div {
  padding-top: 11px;
}

.preview-stats span,
.preview-stats strong {
  display: block;
}

.preview-stats span {
  margin-bottom: 3px;

  color: var(--text-muted);

  font-size: 8px;
}

.preview-stats strong {
  color: var(--text-main);

  font-size: 9px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1250px) {
  .live-scout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .live-scout-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   SCOUT DISCOVERY
   ========================================================= */

.auto-discovery-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  color: var(--text-muted);

  font-size: 10px;
  font-weight: 650;
}

.discovery-card {
  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  background: var(--bg-panel);
}

.discovery-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 24px;

  padding: 18px 20px;

  border-bottom: 1px solid var(--border);
}

.discovery-card-header strong {
  display: block;

  margin-bottom: 5px;

  font-size: 12px;
}

.discovery-card-header p {
  max-width: 700px;

  color: var(--text-muted);

  font-size: 10px;

  line-height: 1.5;
}

.opportunity-table-scroll {
  width: 100%;

  overflow-x: auto;
}

.opportunity-table {
  width: 100%;

  min-width: 720px;

  border-collapse: collapse;

  font-size: 10px;
}

.opportunity-table th {
  padding: 10px 20px;

  border-bottom: 1px solid var(--border);

  color: var(--text-muted);

  font-size: 8px;
  font-weight: 650;

  letter-spacing: 0.5px;

  text-align: left;
  text-transform: uppercase;
}

.opportunity-table td {
  padding: 12px 20px;

  border-bottom: 1px solid var(--border);

  color: #cbd2dc;
}

.opportunity-table tbody tr:last-child td {
  border-bottom: none;
}

.opportunity-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.018);
}

.opportunity-rank {
  color: var(--text-muted) !important;

  font-weight: 650;
}

.opportunity-category {
  color: var(--text-main) !important;

  font-weight: 650;
}

/* ---------- Opportunity strength ---------- */

.opportunity-signal {
  display: inline-flex;

  min-width: 50px;

  justify-content: center;

  padding: 4px 7px;

  border-radius: 5px;

  font-size: 8px;
  font-weight: 750;

  text-transform: uppercase;
}

.opportunity-signal.high {
  border: 1px solid rgba(0, 255, 242, 0.25);

  background: rgba(0, 255, 242, 0.06);

  color: var(--accent);
}

.opportunity-signal.medium {
  border: 1px solid rgba(231, 196, 91, 0.25);

  background: rgba(231, 196, 91, 0.05);

  color: #e7c45b;
}

/* ---------- Discovery footer ---------- */

.discovery-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 11px 20px;

  border-top: 1px solid var(--border);

  color: var(--text-muted);

  font-size: 9px;
}

@media (max-width: 650px) {
  .discovery-card-header,
  .discovery-card-footer {
    flex-direction: column;
  }
}

/* =========================================================
   CLIPS — CANDIDATE REVIEW
   ========================================================= */

.clips-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.clips-page .section-block {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}

.clips-page .section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.clips-page .section-heading h2 {
  margin: 4px 0 4px;
  font-size: 20px;
}

.clips-page .section-heading p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* ---------- Summary ---------- */

.clip-review-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.clips-page .status-card {
  display: flex;
  flex-direction: column;
  min-height: 108px;
  padding: 16px;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.clips-page .status-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.clips-page .status-card strong {
  margin: 7px 0 3px;
  color: var(--text-main);
  font-size: 26px;
  line-height: 1;
}

.clips-page .status-detail {
  margin-top: auto;
  color: var(--text-muted);
  font-size: 11px;
}

/* ---------- Candidate List ---------- */

.candidate-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.candidate-card {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  overflow: hidden;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.candidate-card:hover {
  border-color: #303845;
}

/* ---------- Preview ---------- */

.candidate-preview {
  min-width: 0;
  padding: 14px 0 14px 14px;
}

.candidate-video-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: radial-gradient(circle at center, #171d24 0%, #0c0f14 70%);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.candidate-video-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(255, 255, 255, 0.02)
  );
  pointer-events: none;
}

.preview-play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding-left: 3px;
  color: var(--text-main);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid #343c48;
  border-radius: 50%;
  font-size: 14px;
}

.platform-badge {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 9px;
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.platform-badge.twitch {
  color: #ffffff;
  background: #9146ff;
}

.platform-badge.kick {
  color: #071005;
  background: #53fc18;
}

.candidate-duration {
  position: absolute;
  z-index: 2;
  right: 9px;
  bottom: 9px;
  padding: 3px 6px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}

/* ---------- Candidate Information ---------- */

.candidate-content {
  min-width: 0;
  padding: 16px 18px;
}

.candidate-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.candidate-creator {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.candidate-title-row h3 {
  margin: 4px 0;
  color: var(--text-main);
  font-size: 16px;
  line-height: 1.3;
}

.candidate-category {
  color: var(--text-muted);
  font-size: 11px;
}

/* ---------- Davey Score ---------- */

.davey-score {
  flex: 0 0 auto;
  min-width: 66px;
  padding: 8px 10px;
  text-align: center;
  background: rgba(0, 255, 242, 0.04);
  border: 1px solid rgba(0, 255, 242, 0.16);
  border-radius: 8px;
}

.davey-score span {
  display: block;
  margin-bottom: 2px;
  color: var(--text-muted);
  font-size: 9px;
}

.davey-score strong {
  color: var(--accent);
  font-size: 18px;
}

/* ---------- Davey Reasoning ---------- */

.davey-reasoning {
  margin-top: 14px;
  padding: 12px 14px;
  background: #0d1116;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.davey-reasoning p {
  margin: 5px 0 9px;
  color: #c5ccd5;
  font-size: 12px;
  line-height: 1.5;
}

.signal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.signal-tag {
  padding: 4px 7px;
  color: #aab3be;
  background: #151a21;
  border: 1px solid #272e38;
  border-radius: 5px;
  font-size: 9px;
}

/* ---------- User Decision ---------- */

.candidate-decision {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 13px;
}

.decision-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.decision-copy strong {
  color: var(--text-main);
  font-size: 11px;
}

.decision-copy span {
  color: var(--text-muted);
  font-size: 10px;
}

.decision-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.clips-page .decision-actions .btn {
  min-width: 72px;
  padding: 7px 11px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

.clips-page .candidate-preview-btn {
  color: #c7ced7;
  background: #151a21;
  border: 1px solid #303743;
}

.clips-page .reject {
  color: #ff8b92;
  background: rgba(255, 77, 88, 0.06);
  border: 1px solid rgba(255, 77, 88, 0.24);
}

.clips-page .approve {
  color: #061311;
  background: var(--accent);
  border: 1px solid var(--accent);
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .clip-review-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .candidate-card {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}

@media (max-width: 850px) {
  .candidate-card {
    grid-template-columns: 1fr;
  }

  .candidate-preview {
    padding: 14px 14px 0;
  }

  .candidate-decision {
    align-items: flex-start;
    flex-direction: column;
  }

  .decision-actions {
    width: 100%;
  }

  .clips-page .decision-actions .btn {
    flex: 1;
  }
}

@media (max-width: 600px) {
  .clip-review-stats {
    grid-template-columns: 1fr;
  }

  .clips-page .section-block {
    padding: 16px;
  }

  .candidate-title-row {
    gap: 10px;
  }
}

/* =========================================================
   CLIPS — DAVEY DECISION / TEACHING PANEL
   ========================================================= */

.clip-decision-panel:not([hidden]) {
  display: block;
  margin-top: 14px;
}

.clip-decision-panel[hidden] {
  display: none;
}

.clip-decision-panel .decision-panel-inner {
  padding: 16px;
  background: #0d1116;
  border: 1px solid #27303a;
  border-radius: 9px;
}

.clip-decision-panel .decision-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.clip-decision-panel .decision-panel-heading h4 {
  margin: 4px 0 0;
  color: var(--text-main);
  font-size: 14px;
}

/* ---------- Quick Reasons ---------- */

.clip-decision-panel .decision-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.clip-decision-panel .decision-reason {
  padding: 6px 9px;
  color: #b5bec9;
  background: #151a21;
  border: 1px solid #303844;
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.clip-decision-panel .decision-reason:hover {
  color: var(--text-main);
  border-color: #46515f;
}

.clip-decision-panel .decision-reason.selected {
  color: var(--accent);
  background: rgba(0, 255, 242, 0.07);
  border-color: rgba(0, 255, 242, 0.45);
}

/* ---------- Written Feedback ---------- */

.clip-decision-panel .decision-notes {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.clip-decision-panel .decision-notes > span {
  color: #c6ced8;
  font-size: 11px;
  font-weight: 600;
}

.clip-decision-panel .decision-notes em {
  color: var(--text-muted);
  font-style: normal;
  font-weight: 400;
}

.clip-decision-panel .decision-notes textarea {
  box-sizing: border-box;

  /* Large Davey feedback area */
  width: 100%;
  min-height: 165px;
  padding: 12px 14px;

  color: var(--text-main);
  background: #080b0f;
  border: 1px solid #303844;
  border-radius: 7px;
  outline: none;

  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;

  resize: vertical;
}

.clip-decision-panel .decision-notes textarea::placeholder {
  color: #59636f;
}

.clip-decision-panel .decision-notes textarea:focus {
  border-color: rgba(0, 255, 242, 0.55);
  box-shadow: 0 0 0 2px rgba(0, 255, 242, 0.05);
}

/* ---------- Panel Actions ---------- */

.clip-decision-panel .decision-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.clip-decision-panel .decision-panel-actions .btn {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

.clip-decision-panel .decision-cancel {
  color: #c5ccd5;
  background: #151a21;
  border: 1px solid #303844;
}

.clip-decision-panel .decision-submit.approve {
  color: #061311;
  background: var(--accent);
  border: 1px solid var(--accent);
}

.clip-decision-panel .decision-submit.reject {
  color: #ff8b92;
  background: rgba(255, 77, 88, 0.07);
  border: 1px solid rgba(255, 77, 88, 0.35);
}

/* ---------- Narrow Screens ---------- */

@media (max-width: 650px) {
  .clip-decision-panel .decision-notes textarea {
    min-height: 190px;
  }

  .clip-decision-panel .decision-panel-actions {
    flex-direction: column-reverse;
  }

  .clip-decision-panel .decision-panel-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   DAVEY — PERSONAL INTELLIGENCE PROGRESS
   ========================================================= */

.davey-progress {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---------- Confidence / Phase Header ---------- */

.davey-progress .davey-phase-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.davey-progress .davey-progress-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.davey-progress .davey-phase-badge {
  padding: 5px 8px;
  color: var(--accent);
  background: rgba(0, 255, 242, 0.05);
  border: 1px solid rgba(0, 255, 242, 0.25);
  border-radius: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Confidence ---------- */

.davey-progress .davey-confidence-row {
  margin-top: 4px;
}

.davey-progress .davey-confidence-row strong {
  color: var(--text-main);
  font-size: 18px;
}

.davey-progress .davey-confidence-track {
  width: 100%;
  height: 6px;
  margin-top: 7px;
  overflow: hidden;
  background: #080b0f;
  border: 1px solid #242b34;
  border-radius: 999px;
}

.davey-progress .davey-confidence-fill {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 0.35s ease;
}

/* ---------- Evidence ---------- */

.davey-progress .davey-evidence-row {
  display: flex;
  gap: 22px;
  margin-top: 9px;
  color: var(--text-muted);
  font-size: 9px;
}

.davey-progress .davey-evidence-row strong {
  margin-right: 3px;
  color: #cbd3dc;
  font-size: 10px;
}

/* ---------- Current Phase ---------- */

.davey-progress .davey-phase-summary {
  margin-top: 14px;
  padding: 10px 12px;
  background: #0d1116;
  border: 1px solid var(--border);
  border-radius: 7px;
}

.davey-progress .davey-phase-summary strong {
  display: block;
  margin-bottom: 3px;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.davey-progress .davey-phase-summary p {
  margin: 0;
  color: #bcc5cf;
  font-size: 10px;
  line-height: 1.45;
}

/* ---------- Next Phase ---------- */

.davey-progress .davey-next-phase {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}

.davey-progress .davey-next-phase span {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.davey-progress .davey-next-phase p {
  margin: 0;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.4;
}

/* ---------- Responsive ---------- */

@media (max-width: 650px) {
  .davey-progress .davey-phase-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .davey-progress .davey-evidence-row {
    flex-direction: column;
    gap: 4px;
  }
}

/* =========================================================
   CLIPS — FINAL DECISION RESULT
   ========================================================= */

.decision-result {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  padding: 10px 12px;

  background: #0d1116;
  border: 1px solid var(--border);
  border-radius: 7px;
}

.decision-result > div {
  min-width: 0;
}

.decision-result strong {
  display: block;
  margin-bottom: 3px;

  font-size: 11px;
  font-weight: 700;
}

.decision-result span {
  display: block;

  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.4;
}

/* ---------- Approved ---------- */

.decision-result.approved {
  background: rgba(0, 255, 242, 0.025);
  border-color: rgba(0, 255, 242, 0.22);
}

.decision-result.approved strong {
  color: var(--accent);
}

.decision-result.approved .decision-result-status {
  flex: 0 0 auto;

  padding: 5px 8px;

  color: var(--accent);
  background: rgba(0, 255, 242, 0.06);
  border: 1px solid rgba(0, 255, 242, 0.28);
  border-radius: 6px;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Rejected ---------- */

.decision-result.rejected {
  background: rgba(255, 77, 88, 0.02);
  border-color: rgba(255, 77, 88, 0.2);
}

.decision-result.rejected strong {
  color: #ff7d85;
}

.decision-result.rejected .decision-result-status {
  flex: 0 0 auto;

  padding: 5px 8px;

  color: #ff8b92;
  background: rgba(255, 77, 88, 0.05);
  border: 1px solid rgba(255, 77, 88, 0.25);
  border-radius: 6px;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Responsive ---------- */

@media (max-width: 650px) {
  .decision-result {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }
}

/* =========================================================
   CLIPS — WORKSPACE NAVIGATION
   ========================================================= */

.clips-workspace-nav {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 5px;

  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.clips-workspace-tab {
  display: flex;
  align-items: center;
  gap: 7px;

  padding: 8px 13px;

  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;

  cursor: pointer;

  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
}

.clips-workspace-tab:hover {
  color: var(--text-main);
  background: var(--bg-panel-hover);
}

.clips-workspace-tab.active {
  color: #061311;
  background: var(--accent);
}

.clips-workspace-tab span {
  min-width: 18px;
  padding: 2px 5px;

  text-align: center;

  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;

  font-size: 9px;
}

.clips-workspace-tab.active span {
  background: rgba(0, 0, 0, 0.14);
}

.clips-workspace-panel[hidden] {
  display: none;
}

.clips-empty-workspace {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 260px;

  color: var(--text-muted);
  background: var(--bg-main);
  border: 1px dashed #29313b;
  border-radius: 9px;

  text-align: center;
}

.clips-empty-workspace strong {
  margin-bottom: 5px;
  color: var(--text-main);
  font-size: 13px;
}

.clips-empty-workspace span {
  font-size: 10px;
}

/* =========================================================
   CLIPS — CORE EDITOR
   ========================================================= */

.clip-editor {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  min-height: 620px;
}

.clip-editor-list,
.clip-editor-main {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.clip-editor-list {
  padding: 10px;
}

.editor-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 5px 12px;
}

.editor-list-header strong {
  font-size: 11px;
}

.editor-list-header span {
  color: var(--text-muted);
  font-size: 9px;
}

.editor-clip {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

  margin-bottom: 6px;
  padding: 10px;

  color: var(--text-main);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;

  text-align: left;
  cursor: pointer;
}

.editor-clip:hover {
  background: var(--bg-panel-hover);
}

.editor-clip.active {
  background: rgba(0, 255, 242, 0.06);
  border-color: rgba(0, 255, 242, 0.28);
}

.editor-clip div {
  min-width: 0;
}

.editor-clip strong,
.editor-clip span {
  display: block;
}

.editor-clip strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-clip div span,
.editor-clip-duration {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 9px;
}

.clip-editor-main {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(340px, 1.2fr);
  overflow: hidden;
}

.editor-preview-area {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 580px;
  padding: 22px;

  background: #080b0e;
  border-right: 1px solid var(--border);
}

.editor-video-placeholder {
  aspect-ratio: 9 / 16;
  width: min(100%, 280px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 25px;

  background: #050708;
  border: 1px solid #242c33;
  border-radius: 9px;

  text-align: center;
}

.editor-video-placeholder strong {
  margin: 10px 0 6px;
  font-size: 13px;
}

.editor-video-placeholder > span:last-child {
  max-width: 190px;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.5;
}

.editor-controls {
  padding: 18px;
}

.editor-control-section {
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
}

.editor-control-section:first-child {
  padding-top: 0;
}

.editor-control-heading {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
}

.editor-control-heading strong,
.editor-control-heading span {
  display: block;
}

.editor-control-heading strong {
  font-size: 11px;
}

.editor-control-heading div span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 9px;
}

.editor-control-heading > span {
  color: var(--accent);
  font-size: 10px;
}

.editor-time-controls {
  display: flex;
  align-items: end;
  gap: 10px;
}

.editor-time-controls label,
.editor-title-field {
  display: flex;
  flex-direction: column;
  gap: 6px;

  color: var(--text-muted);
  font-size: 9px;
}

.editor-time-controls input {
  width: 90px;
}

.editor-time-controls input,
.editor-title-field input,
.editor-option-row select {
  padding: 8px 9px;

  color: var(--text-main);
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 6px;

  font-family: inherit;
  font-size: 10px;
}

.editor-option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.editor-option {
  padding: 7px 10px;

  color: var(--text-muted);
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 6px;

  font-family: inherit;
  font-size: 9px;
  cursor: pointer;
}

.editor-option.active {
  color: var(--accent);
  border-color: rgba(0, 255, 242, 0.4);
  background: rgba(0, 255, 242, 0.06);
}

.editor-title-field input {
  width: 100%;
}

.editor-final-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding-top: 18px;
}

@media (max-width: 1000px) {
  .clip-editor {
    grid-template-columns: 1fr;
  }

  .clip-editor-main {
    grid-template-columns: 1fr;
  }

  .editor-preview-area {
    min-height: 420px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

/* =========================================================
   PROCESSING — CONTROL CENTER
   ========================================================= */

.processing-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---------------------------------------------------------
   Summary
   --------------------------------------------------------- */

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

/* ---------------------------------------------------------
   Main configuration grid
   --------------------------------------------------------- */

.processing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.processing-card {
  padding: 18px;

  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.processing-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.processing-card-heading h3 {
  margin: 3px 0 0;
  font-size: 14px;
}

.processing-description {
  margin: 7px 0 16px;

  color: var(--text-muted);

  font-size: 10px;
  line-height: 1.5;
}

/* ---------------------------------------------------------
   Detection rules
   --------------------------------------------------------- */

.detection-rules {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.detection-rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;

  padding: 10px 11px;

  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 7px;
}

.rule-main {
  min-width: 0;
}

.rule-main strong,
.rule-main span {
  display: block;
}

.rule-main strong {
  color: var(--text-main);
  font-size: 11px;
}

.rule-main span {
  margin-top: 3px;

  color: var(--text-muted);

  font-size: 9px;
}

.rule-priority {
  padding: 4px 7px;

  color: var(--accent);
  background: rgba(0, 255, 242, 0.06);
  border: 1px solid rgba(0, 255, 242, 0.18);
  border-radius: 999px;

  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.rule-action {
  padding: 5px 7px;

  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;

  font-family: inherit;
  font-size: 9px;

  cursor: pointer;
}

.rule-action:hover {
  color: var(--text-main);
  background: var(--bg-panel-hover);
  border-color: var(--border);
}

/* ---------------------------------------------------------
   Detection behavior
   --------------------------------------------------------- */

.processing-range {
  padding: 13px 0;

  border-bottom: 1px solid var(--border);
}

.processing-range-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 8px;
}

.processing-range-heading strong {
  font-size: 10px;
}

.processing-range-heading span {
  color: var(--accent);
  font-size: 9px;
}

.processing-range input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--accent);
}

.range-labels {
  display: flex;
  justify-content: space-between;

  margin-top: 4px;

  color: var(--text-muted);

  font-size: 8px;
}

.processing-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 13px 0;

  border-bottom: 1px solid var(--border);
}

.processing-setting > div:first-child {
  min-width: 0;
}

.processing-setting strong,
.processing-setting > div:first-child span {
  display: block;
}

.processing-setting strong {
  font-size: 10px;
}

.processing-setting > div:first-child span {
  margin-top: 3px;

  color: var(--text-muted);

  font-size: 8px;
}

.processing-setting select,
.confidence-setting input {
  color: var(--text-main);
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 6px;

  font-family: inherit;
  font-size: 9px;
}

.processing-setting select {
  min-width: 160px;
  padding: 7px 9px;
}

.confidence-setting {
  display: flex;
  align-items: center;
  gap: 5px;
}

.confidence-setting input {
  width: 55px;
  padding: 7px;
  text-align: center;
}

.confidence-setting span {
  color: var(--text-muted);
  font-size: 9px;
}

/* ---------------------------------------------------------
   Live analysis
   --------------------------------------------------------- */

.analysis-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.analysis-item {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 150px;
  align-items: center;
  gap: 16px;

  padding: 13px 14px;

  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.analysis-source strong,
.analysis-source span {
  display: block;
}

.analysis-source strong {
  font-size: 11px;
}

.analysis-source span {
  margin-top: 3px;

  color: var(--text-muted);

  font-size: 9px;
}

.analysis-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.analysis-signals span {
  padding: 4px 7px;

  color: var(--text-muted);
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 999px;

  font-size: 8px;
}

.analysis-result {
  text-align: right;
}

.analysis-result > * {
  display: block;
}

.analysis-score {
  margin-bottom: 3px;

  color: var(--text-main);

  font-size: 16px;
  font-weight: 700;
}

.analysis-result strong {
  font-size: 9px;
}

.analysis-approved {
  color: var(--accent);
}

.analysis-filtered {
  color: #e47878;
}

.analysis-result > span:last-child {
  margin-top: 3px;

  color: var(--text-muted);

  font-size: 8px;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1000px) {
  .processing-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .analysis-item {
    grid-template-columns: 110px minmax(0, 1fr);
  }

  .analysis-result {
    grid-column: 1 / -1;
    text-align: left;
  }
}

@media (max-width: 650px) {
  .processing-stats {
    grid-template-columns: 1fr;
  }

  .detection-rule {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .processing-setting {
    align-items: flex-start;
    flex-direction: column;
  }

  .analysis-item {
    grid-template-columns: 1fr;
  }

  .analysis-result {
    grid-column: auto;
  }
}

/* =========================================================
   PROCESSING — RULE EDITOR
   ========================================================= */

.rule-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 110px;
  gap: 8px;

  margin-bottom: 10px;
  padding: 12px;

  background: var(--bg-main);
  border: 1px solid rgba(0, 255, 242, 0.25);
  border-radius: 7px;
}

.rule-editor[hidden] {
  display: none;
}

.rule-editor label {
  display: flex;
  flex-direction: column;
  gap: 5px;

  color: var(--text-muted);
  font-size: 8px;
}

.rule-editor input,
.rule-editor select {
  min-width: 0;
  padding: 8px;

  color: var(--text-main);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;

  font-family: inherit;
  font-size: 9px;
}

.rule-editor-actions {
  grid-column: 1 / -1;

  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

@media (max-width: 750px) {
  .rule-editor {
    grid-template-columns: 1fr;
  }

  .rule-editor-actions {
    grid-column: auto;
  }
}

/* Publishing styles stay scoped to preserve the established views. */
.publishing-page .publishing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.publishing-page .publishing-card { padding: 24px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.publishing-page h3 { margin: 8px 0 16px; }
.publishing-page p { color: var(--text-muted); line-height: 1.6; margin: 12px 0; }
.publishing-page .publishing-notice { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.publishing-page .publishing-accounts { list-style: none; }
.publishing-page .publishing-accounts li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.publishing-page .publishing-accounts li span { flex: 1; color: var(--text-muted); }
.publishing-page label { display: block; margin: 16px 0 8px; }
.publishing-page select, .publishing-page textarea { width: 100%; padding: 12px; color: var(--text-main); background: var(--bg-main); border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.publishing-page textarea { resize: vertical; }
.publishing-page .publishing-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.publishing-page button:disabled { opacity: .5; cursor: not-allowed; }
.publishing-page :is(button, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 1000px) { .publishing-page .publishing-grid { grid-template-columns: 1fr; } }

/* Davey / Logs / Settings share scoped workspace styling. */
.workspace-page { display: grid; gap: 20px; }
.workspace-page .workspace-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.workspace-page .workspace-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.workspace-page .workspace-card { min-width: 0; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.workspace-page .workspace-notice { padding: 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; color: var(--text-muted); line-height: 1.6; }
.workspace-page h3 { margin-bottom: 16px; }
.workspace-page p { margin: 12px 0; color: var(--text-muted); line-height: 1.6; overflow-wrap: anywhere; }
.workspace-page label { display: block; margin: 14px 0 8px; }
.workspace-page input, .workspace-page textarea, .workspace-page select { width: 100%; padding: 12px; color: var(--text-main); background: var(--bg-main); border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.workspace-page textarea { resize: vertical; }
.workspace-page .workspace-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.workspace-page .workspace-checklist { padding-left: 22px; color: var(--text-muted); line-height: 2; margin: 16px 0; }
.workspace-page .workspace-toolbar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.workspace-page .workspace-toolbar label { flex: 1; min-width: 140px; }
.workspace-page .workspace-feedback article, .workspace-page .workspace-log-entry { padding: 16px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.workspace-page .workspace-feedback span, .workspace-page time { color: var(--text-muted); font-size: 12px; }
.workspace-page .workspace-log-level { display: inline-block; padding: 4px 8px; margin: 0 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }
.workspace-page .workspace-log-level.warning { color: #f9cb62; }
.workspace-page .workspace-log-level.error { color: #ff8181; }
.workspace-page .workspace-log-level.info { color: var(--accent); }
.workspace-page :is(button,input,select,textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.workspace-page button:disabled { opacity: .5; cursor: wait; }
@media (max-width: 1000px) { .workspace-page .workspace-grid { grid-template-columns: 1fr; } .workspace-page .workspace-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 500px) { .workspace-page .workspace-stats { grid-template-columns: 1fr; } .workspace-page .workspace-card { padding: 16px; } }
.workspace-page .workspace-toolbar { display: grid; grid-template-columns: auto minmax(130px,1fr) auto minmax(100px,1fr) auto minmax(110px,1fr) auto auto; align-items: center; }
.workspace-page .workspace-toolbar label { min-width: 0; margin: 0; }
@media (max-width: 1150px) { .workspace-page .workspace-toolbar { grid-template-columns: auto minmax(0,1fr); } }

/* Buttons on these workspaces use the same dark theme and accent as Clip review. */
:is(.workspace-page,.publishing-page) .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 9px 14px; margin: 4px 6px 4px 0; border: 1px solid #303743; border-radius: 8px; background: #151a21; color: #c7ced7; cursor: pointer; font: inherit; font-size: 13px; font-weight: 650; }
:is(.workspace-page,.publishing-page) .btn.approve { background: var(--accent); border-color: var(--accent); color: #061311; }
:is(.workspace-page,.publishing-page) .btn:hover:not(:disabled) { filter: brightness(1.15); }
.workspace-page .status-card { gap: 10px; }
.workspace-page .status-card span { color: var(--text-muted); font-size: 13px; }
.workspace-page .status-card strong { font-size: 26px; }
.workspace-page .status-card { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; overflow-wrap: anywhere; }

/* On phones the navigation becomes a horizontal strip instead of occupying half the screen. */
@media (max-width: 620px) {
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar .brand { padding: 18px; height: auto; }
  .sidebar .nav { flex-direction: row; gap: 6px; overflow-x: auto; padding: 8px; }
  .sidebar .nav-item { flex: 0 0 auto; width: auto; white-space: nowrap; }
  .sidebar .nav-divider, .sidebar .nav-spacer { display: none; }
  .main-area { width: 100%; margin-left: 0; min-width: 0; }
  .content { padding: 16px; }
  .topbar { padding: 12px 16px; gap: 12px; }
  :is(.workspace-page,.publishing-page) .section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  :is(.workspace-page,.publishing-page) .demo-badge { white-space: normal; }
}

.settings-tabs { display: flex; gap: 8px; padding: 6px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; }
.settings-tabs button { border: 0; padding: 12px 18px; border-radius: 7px; background: transparent; color: var(--text-muted); font: inherit; cursor: pointer; }
.settings-tabs button.active { color: var(--accent); background: rgba(0,255,242,.08); }
.settings-page [role="tabpanel"]:not([hidden]) { display: grid; gap: 20px; }
.plan-options { border: 0; min-width: 0; padding: 12px 0; }
.plan-options legend { font-weight: 650; padding: 12px 0; }
.plan-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.settings-page .plan-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; margin: 0; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; min-width: 0; }
.settings-page .plan-card:has(input:checked) { border-color: var(--accent); background: #102022; }
.settings-page .plan-card input { width: 18px; height: 18px; accent-color: var(--accent); }
.plan-price { font-size: 32px; }
.plan-price small { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.plan-card ul { padding-left: 18px; line-height: 1.8; color: var(--text-muted); font-size: 13px; }
.plan-card p { flex: 1; margin: 0; }
.plan-card > span:last-child { font-size: 12px; color: var(--accent); }
.readable-error { padding: 20px 0; border-top: 1px solid var(--border); }
.error-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.error-heading strong { color: #ffaaa8; font-size: 16px; }
.readable-error > span { display: block; color: var(--text-muted); font-size: 12px; margin: 10px 0; }
.readable-error summary { cursor: pointer; color: var(--text-muted); font-size: 13px; }
.readable-error pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg-main); padding: 12px; margin-top: 10px; border-radius: 8px; font-size: 12px; }
.error-empty { padding: 24px 0; }
.error-empty strong { color: var(--accent); }
.workspace-page .error-toolbar { grid-template-columns: auto minmax(130px,1fr) auto minmax(100px,1fr) auto auto; }
@media(max-width:1200px) { .plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .plan-grid { grid-template-columns:1fr; } .workspace-page .error-toolbar { grid-template-columns:auto minmax(0,1fr); } }

.settings-page .patreon-price { color: var(--accent); font-size: 13px; line-height: 1.5; }

.custom-slider-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin: 24px 0; }
.custom-slider-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.workspace-page .custom-slider-heading label { margin: 0 0 12px; }
.custom-slider output { color: var(--accent); font-weight: 700; }
.workspace-page .custom-slider input[type="range"] { width: 100%; padding: 0; height: 24px; accent-color: var(--accent); border: 0; cursor: pointer; }
.custom-range-ends { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 12px; }
.custom-price-summary { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--accent); border-radius: var(--radius); margin: 20px 0; }
.custom-price-summary strong { font-size: 32px; color: var(--accent); }
.custom-price-summary span { color: var(--text-muted); }
@media(max-width:650px) { .custom-slider-grid { grid-template-columns: 1fr; } }
/* Pre-launch account flow and real usage views. */
[hidden]{display:none!important}
.auth-page{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;max-width:1100px;margin:auto;padding:48px 28px}
.auth-brand h2{font-size:clamp(36px,5vw,62px);line-height:1.1;letter-spacing:-2px;margin:24px 0;color:#edf7f8}
.auth-brand p{color:#a5b5bf;max-width:430px;font-size:18px;line-height:1.7}
.auth-benefits{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.auth-benefits span{border:1px solid #26333d;padding:8px 12px;border-radius:20px;font-size:12px;color:#a5b5bf}
.auth-card{padding:32px!important}.auth-card h2{font-size:26px}.auth-card form input{display:block;width:100%;box-sizing:border-box;background:#0b1017;color:#eef6f7;border:1px solid #2a3945;padding:12px;border-radius:8px;margin:8px 0 18px}.auth-card label{display:block;margin-top:16px}.auth-card .approve{width:100%;margin:12px 0}.subtle{font-size:12px;color:#8a9cac}.loading-message{padding:48px;text-align:center}
.davey-hero{display:flex;align-items:center;gap:32px;padding:32px!important;background:radial-gradient(circle at 0% 10%,#083332 0%,#10151d 55%)}.davey-orb{width:90px;height:90px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,#05ddc4,#115678);display:grid;place-items:center;font-size:40px;font-weight:700;color:#001918;box-shadow:0 0 40px #00dcc520}.davey-overview{flex:1}.davey-overview h3{font-size:24px;margin:12px 0}.progress-track{height:10px;border-radius:10px;background:#060c12;border:1px solid #26333d;overflow:hidden;margin:16px 0}.progress-track span{display:block;height:100%;background:linear-gradient(90deg,#00cbb7,#12e5d1);border-radius:10px}.usage-meter{margin:16px 0 28px}.usage-meter>div:first-child{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.token-activity{display:grid;grid-template-rows:repeat(7,16px);grid-auto-flow:column;grid-auto-columns:16px;gap:5px;width:max-content;max-width:100%;margin:20px 0}.activity-cell{display:block;border-radius:3px;background:#263039}.activity-cell.level-1{background:#07526a}.activity-cell.level-2{background:#08799a}.activity-cell.level-3{background:#079cbe}.activity-cell.level-4{background:#37d7e6}.account-page .section-heading{margin-bottom:24px}.workspace-page select{width:100%;box-sizing:border-box}
@media(max-width:760px){.auth-page{grid-template-columns:1fr;gap:28px;padding:28px 18px}.auth-brand h2{font-size:36px}.auth-brand p{font-size:15px}.auth-benefits{display:none}.davey-hero{align-items:flex-start;gap:18px;padding:22px!important}.davey-orb{width:48px;height:48px;font-size:24px}.davey-overview h3{font-size:20px}}

.development-bypass{border:1px solid #00d8c6!important;color:#00eee0!important;padding:12px 22px!important;margin-bottom:8px}.auth-brand>.subtle{font-size:12px;margin:0 0 24px}

.pricing-notice{margin:auto;width:min(520px,calc(100% - 32px));max-height:calc(100vh - 48px);overflow:auto;border:1px solid #284b4c;border-radius:16px;background:#11151b;color:#f5f5f5;padding:32px;box-shadow:0 24px 90px #0009}.pricing-notice::backdrop{background:#020709cc;backdrop-filter:blur(4px)}.pricing-notice h3{font-size:24px;line-height:1.3;margin:12px 0 20px}.pricing-notice p{color:#a9b5c3;font-size:15px;line-height:1.65;margin-bottom:16px}.pricing-notice form{margin-top:24px}.pricing-notice button{width:100%}

.report-dialog{width:min(640px,calc(100vw - 32px))}.report-dialog label{display:block;margin:14px 0 6px}.report-dialog input,.report-dialog select,.report-dialog textarea{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:10px;background:#0b1117;color:#eaf5f5;border:1px solid #30424c;border-radius:8px;font:inherit}.report-dialog textarea{resize:vertical}.report-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}