/* ViLo v8.9.0 - Creator Studio, Safety Center, and collaboration brand unity */
:root {
  --v890-ink: #f6f9ff;
  --v890-muted: #aebfd3;
  --v890-bg: #071421;
  --v890-bg-2: #091a2b;
  --v890-panel: rgba(14, 35, 56, .92);
  --v890-panel-strong: #102a43;
  --v890-line: rgba(123, 164, 196, .28);
  --v890-purple: #8066ff;
  --v890-purple-2: #9b86ff;
  --v890-mint: #2ee6b3;
  --v890-cyan: #68d8ff;
  --v890-danger: #ff6f91;
  --v890-warning: #ffd166;
  --v890-shadow: 0 22px 56px rgba(0, 0, 0, .25);
}

/* Shared ViLo workspace language */
.creator-dashboard-layout,
.v880-safety-center,
.v880-policy-page,
.v880-report-page,
.v880-creator-safety,
.v880-admin-stack,
.v890-collaboration-shell,
.v890-public-collaboration {
  color: var(--v890-ink);
  color-scheme: dark;
}

.creator-dashboard-layout .creator-pro-sidebar,
.creator-dashboard-layout .creator-pro-main,
.v880-safety-center,
.v880-policy-page,
.v880-report-page,
.v890-public-collaboration {
  --text: var(--v890-ink);
  --muted: var(--v890-muted);
  --panel: var(--v890-panel-strong);
  --panel2: var(--v890-panel);
  --line: var(--v890-line);
  --accent: var(--v890-purple);
  --accent2: var(--v890-mint);
}

.creator-dashboard-layout .creator-pro-sidebar {
  border-color: var(--v890-line);
  background:
    radial-gradient(circle at 20% 0%, rgba(128, 102, 255, .18), transparent 35%),
    linear-gradient(180deg, rgba(12, 31, 50, .98), rgba(6, 19, 31, .98));
  box-shadow: var(--v890-shadow);
}

.creator-dashboard-layout .creator-pro-sidebar .side-title {
  color: var(--v890-ink);
  letter-spacing: -.02em;
}

.creator-dashboard-layout .creator-pro-sidebar .side-group {
  border-color: transparent;
}

.creator-dashboard-layout .creator-pro-sidebar .side-group > summary {
  color: var(--v890-muted);
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.creator-dashboard-layout .creator-pro-sidebar .side-group-links a {
  color: #dbe8f5;
  border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.creator-dashboard-layout .creator-pro-sidebar .side-group-links a:hover,
.creator-dashboard-layout .creator-pro-sidebar .side-group-links a:focus-visible {
  color: #fff;
  border-color: rgba(128, 102, 255, .34);
  background: rgba(128, 102, 255, .14);
  transform: translateX(2px);
  outline: none;
}

.creator-dashboard-layout .creator-pro-sidebar .side-group-links a.active {
  color: #fff;
  border-color: rgba(128, 102, 255, .5);
  background: linear-gradient(135deg, rgba(128, 102, 255, .34), rgba(46, 230, 179, .12));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

.creator-dashboard-layout .creator-pro-sidebar .side-note {
  color: var(--v890-muted);
  border-color: var(--v890-line);
  background: rgba(7, 20, 33, .66);
}

.creator-dashboard-layout .creator-pro-main {
  min-width: 0;
}

.creator-dashboard-layout .creator-pro-main > .card,
.creator-dashboard-layout .creator-pro-main section.card,
.creator-dashboard-layout .creator-pro-main article.card,
.creator-dashboard-layout .creator-pro-main form.card,
.creator-dashboard-layout .creator-pro-main details.card,
.v880-safety-center .card,
.v880-policy-page .card,
.v880-report-page .card,
.v880-creator-safety .card,
.v880-admin-stack .card {
  color: var(--v890-ink);
  border-color: var(--v890-line);
  background: linear-gradient(180deg, rgba(16, 42, 67, .96), rgba(8, 25, 41, .96));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .2);
}

.creator-dashboard-layout .creator-pro-main h1,
.creator-dashboard-layout .creator-pro-main h2,
.creator-dashboard-layout .creator-pro-main h3,
.creator-dashboard-layout .creator-pro-main h4,
.v880-safety-center h1,
.v880-safety-center h2,
.v880-safety-center h3,
.v880-policy-page h1,
.v880-policy-page h2,
.v880-report-page h1,
.v880-report-page h2,
.v880-creator-safety h1,
.v880-creator-safety h2,
.v880-admin-stack h1,
.v880-admin-stack h2 {
  color: var(--v890-ink);
}

.creator-dashboard-layout .creator-pro-main p,
.creator-dashboard-layout .creator-pro-main small,
.creator-dashboard-layout .creator-pro-main .muted,
.v880-safety-center p,
.v880-safety-center small,
.v880-policy-page p,
.v880-policy-page small,
.v880-report-page p,
.v880-report-page small,
.v880-creator-safety p,
.v880-creator-safety small,
.v880-admin-stack p,
.v880-admin-stack small {
  color: var(--v890-muted);
}

.creator-dashboard-layout .creator-pro-main input,
.creator-dashboard-layout .creator-pro-main select,
.creator-dashboard-layout .creator-pro-main textarea,
.v880-safety-center input,
.v880-safety-center select,
.v880-safety-center textarea,
.v880-policy-page input,
.v880-policy-page select,
.v880-policy-page textarea,
.v880-report-page input,
.v880-report-page select,
.v880-report-page textarea,
.v880-creator-safety input,
.v880-creator-safety select,
.v880-creator-safety textarea,
.v880-admin-stack input,
.v880-admin-stack select,
.v880-admin-stack textarea {
  color: var(--v890-ink);
  border-color: var(--v890-line);
  background: rgba(5, 17, 29, .82);
}

.creator-dashboard-layout .creator-pro-main input:focus,
.creator-dashboard-layout .creator-pro-main select:focus,
.creator-dashboard-layout .creator-pro-main textarea:focus,
.v880-safety-center input:focus,
.v880-safety-center select:focus,
.v880-safety-center textarea:focus,
.v880-creator-safety input:focus,
.v880-creator-safety select:focus,
.v880-creator-safety textarea:focus {
  border-color: rgba(46, 230, 179, .72);
  box-shadow: 0 0 0 3px rgba(46, 230, 179, .12);
  outline: none;
}

.creator-dashboard-layout .creator-pro-main table,
.v880-safety-center table,
.v880-admin-stack table {
  color: var(--v890-ink);
}

.creator-dashboard-layout .creator-pro-main th,
.v880-safety-center th,
.v880-admin-stack th {
  color: #d9e7f5;
  border-color: var(--v890-line);
  background: rgba(6, 20, 33, .72);
}

.creator-dashboard-layout .creator-pro-main td,
.v880-safety-center td,
.v880-admin-stack td {
  color: var(--v890-muted);
  border-color: var(--v890-line);
}

/* Safety Center now uses the same ViLo surface tokens as Creator Studio. */
.v880-policy-page,
.v880-safety-center,
.v880-report-page,
.v880-creator-safety,
.v880-admin-stack {
  --v881-safety-bg: var(--v890-bg);
  --v881-safety-panel: var(--v890-panel);
  --v881-safety-panel-strong: var(--v890-panel-strong);
  --v881-safety-border: var(--v890-line);
  --v881-safety-text: var(--v890-ink);
  --v881-safety-muted: var(--v890-muted);
  --v881-safety-primary: var(--v890-purple);
  --v881-safety-good: var(--v890-mint);
}

.v880-policy-hero,
.v880-safety-hero,
.v880-studio-hero,
.v880-admin-hero,
.v890-hero,
.v890-public-hero {
  position: relative;
  overflow: hidden;
  color: var(--v890-ink);
  border: 1px solid var(--v890-line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 13% 12%, rgba(128, 102, 255, .24), transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(46, 230, 179, .17), transparent 32%),
    linear-gradient(145deg, #102b46, #071522 72%);
  box-shadow: var(--v890-shadow);
}

.v880-safety-tabs {
  border: 1px solid var(--v890-line);
  background: rgba(6, 20, 33, .94);
  backdrop-filter: blur(14px);
}

.v880-safety-tabs a.active {
  background: linear-gradient(135deg, var(--v890-purple), #6d55ea);
}

.v880-safety-tabs a:hover,
.v880-safety-tabs a:focus-visible {
  background: rgba(128, 102, 255, .18);
  outline-color: var(--v890-mint);
}

/* Collaboration shell */
.v890-collaboration-shell {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.v890-hero,
.v890-public-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: clamp(24px, 4vw, 42px);
}

.v890-hero h1,
.v890-public-hero h1 {
  max-width: 820px;
  margin: 10px 0 12px;
  color: var(--v890-ink);
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: .98;
  letter-spacing: -.055em;
}

.v890-hero p,
.v890-public-hero p {
  max-width: 780px;
  margin: 0;
  color: var(--v890-muted);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
}

.v890-hero-actions { margin-top: 20px; }

.v890-hero-metrics {
  display: grid;
  gap: 10px;
  min-width: 180px;
}

.v890-hero-metrics span {
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  border: 1px solid var(--v890-line);
  border-radius: 18px;
  background: rgba(5, 17, 29, .58);
  color: var(--v890-muted);
}

.v890-hero-metrics strong {
  color: var(--v890-ink);
  font-size: 24px;
}

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

.v890-stat-grid article {
  display: grid;
  gap: 5px;
  padding: 18px;
  border: 1px solid var(--v890-line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(16, 42, 67, .9), rgba(8, 25, 41, .9));
}

.v890-stat-grid strong { color: var(--v890-ink); font-size: 26px; }
.v890-stat-grid span { color: var(--v890-muted); font-size: 13px; }

.v890-section {
  display: grid;
  gap: 16px;
}

.v890-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.v890-section-head.compact { align-items: start; }
.v890-section-head span { color: var(--v890-mint); font-size: 12px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.v890-section-head h2,
.v890-section-head h3 { margin: 5px 0 0; color: var(--v890-ink); letter-spacing: -.035em; }
.v890-section-head p { max-width: 720px; margin: 7px 0 0; color: var(--v890-muted); }

.v890-filter { display: grid; gap: 5px; min-width: min(320px, 100%); }
.v890-filter span { color: var(--v890-muted); font-size: 12px; }

.v890-invite-grid,
.v890-collaboration-grid,
.v890-promotion-grid,
.v890-public-item-grid,
.v890-public-creator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.v890-invite-card,
.v890-collaboration-card,
.v890-item-card,
.v890-promotion-grid > .card,
.v890-public-item-grid > .card,
.v890-public-creator-grid > .card,
.v890-admin-list > .card {
  border-color: var(--v890-line);
  background: linear-gradient(180deg, rgba(16, 42, 67, .96), rgba(8, 25, 41, .96));
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.v890-collaboration-card:hover,
.v890-public-creator-grid > .card:hover,
.v890-public-item-grid > a.card:hover {
  transform: translateY(-2px);
  border-color: rgba(128, 102, 255, .58);
  box-shadow: var(--v890-shadow);
}

.v890-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.v890-card-top h3,
.v890-card-top h4 { margin: 10px 0 6px; color: var(--v890-ink); }
.v890-card-top p { margin: 0; color: var(--v890-muted); }

.v890-card-meta,
.v890-public-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.v890-card-meta span,
.v890-public-meta span {
  padding: 7px 10px;
  border: 1px solid var(--v890-line);
  border-radius: 999px;
  color: var(--v890-muted);
  background: rgba(5, 17, 29, .44);
  font-size: 12px;
}

.v890-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: max-content;
  padding: 7px 10px;
  border: 1px solid var(--v890-line);
  border-radius: 999px;
  color: var(--v890-muted);
  background: rgba(5, 17, 29, .66);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.v890-status.active,
.v890-status.approved,
.v890-status.accepted { color: #b9ffe9; border-color: rgba(46, 230, 179, .42); background: rgba(46, 230, 179, .1); }
.v890-status.pending { color: #ffe7a3; border-color: rgba(255, 209, 102, .42); background: rgba(255, 209, 102, .1); }
.v890-status.paused { color: #c9bdff; border-color: rgba(128, 102, 255, .42); background: rgba(128, 102, 255, .1); }
.v890-status.rejected,
.v890-status.declined,
.v890-status.cancelled { color: #ffc2d0; border-color: rgba(255, 111, 145, .42); background: rgba(255, 111, 145, .1); }

.v890-create-panel,
.v890-details-panel,
.v890-audit {
  overflow: hidden;
}

.v890-create-panel > summary,
.v890-details-panel > summary,
.v890-audit > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  color: var(--v890-ink);
  list-style: none;
}

.v890-create-panel > summary::-webkit-details-marker,
.v890-details-panel > summary::-webkit-details-marker,
.v890-audit > summary::-webkit-details-marker { display: none; }

.v890-create-panel > summary span,
.v890-details-panel > summary span,
.v890-audit > summary span { display: grid; gap: 3px; }
.v890-create-panel > summary small,
.v890-details-panel > summary small,
.v890-audit > summary small { color: var(--v890-muted); }
.v890-create-panel > summary b,
.v890-details-panel > summary b,
.v890-audit > summary b { color: var(--v890-mint); font-size: 24px; transition: transform .18s ease; }
.v890-create-panel[open] > summary b,
.v890-details-panel[open] > summary b,
.v890-audit[open] > summary b { transform: rotate(45deg); }
.v890-create-panel > form,
.v890-details-panel > form,
.v890-audit > .v890-audit-list { margin-top: 20px; }

.v890-workspace {
  display: grid;
  gap: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--v890-line);
}

.v890-workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--v890-line);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(128, 102, 255, .16), rgba(46, 230, 179, .07));
}

.v890-workspace-head h2 { margin: 10px 0 8px; }
.v890-workspace-head p { max-width: 760px; margin: 0; }

.v890-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.v890-participant-list,
.v890-split-list,
.v890-item-list,
.v890-audit-list { display: grid; gap: 10px; }

.v890-participant {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--v890-line);
}

.v890-participant:last-child { border-bottom: 0; }
.v890-participant .avatar,
.v890-public-creator-grid .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #06121d;
  background: linear-gradient(135deg, var(--v890-purple-2), var(--v890-mint));
  font-weight: 950;
}
.v890-participant div { display: grid; gap: 2px; }
.v890-participant small { color: var(--v890-muted); }
.v890-participant b { color: var(--v890-mint); }

.v890-checklist { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.v890-checklist li { position: relative; padding-left: 28px; color: var(--v890-muted); }
.v890-checklist li::before { content: "○"; position: absolute; left: 0; color: var(--v890-warning); font-weight: 900; }
.v890-checklist li.done { color: var(--v890-ink); }
.v890-checklist li.done::before { content: "✓"; color: var(--v890-mint); }

.v890-split-panel [data-v890-split-total] { color: var(--v890-mint); font-size: 24px; }
.v890-split-panel [data-v890-split-total].invalid { color: var(--v890-danger); }
.v890-split-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v890-split-list label { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; align-items: center; gap: 10px; }
.v890-split-list small { color: var(--v890-muted); }

.v890-status-actions,
.v890-approval-row,
.v890-approval .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v890-status-actions { margin-top: 16px; }
.v890-approval-row { margin-top: 16px; }
.v890-approval {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--v890-line);
  border-radius: 14px;
  background: rgba(5, 17, 29, .52);
}

.v890-audit-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--v890-line);
}
.v890-audit-list > div:last-child { border-bottom: 0; }
.v890-audit-list span,
.v890-audit-list small { color: var(--v890-muted); }

.v890-admin-list { display: grid; gap: 14px; }

/* Public collaboration page */
.v890-public-collaboration {
  display: grid;
  gap: 34px;
  padding: 18px 0 44px;
}
.v890-public-hero > strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  aspect-ratio: 1;
  border: 1px solid var(--v890-line);
  border-radius: 50%;
  color: var(--v890-ink);
  background: rgba(5, 17, 29, .58);
}
.v890-public-creators,
.v890-public-work,
.v890-public-promotions { display: grid; gap: 16px; }
.v890-public-creator-grid > a { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.v890-public-creator-grid h3 { margin: 0 0 4px; }
.v890-public-creator-grid p { margin: 0; }
.v890-public-item-grid > a { color: inherit; text-decoration: none; }
.v890-public-item-grid strong { color: var(--v890-mint); }

@media (max-width: 980px) {
  .v890-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v890-hero,
  .v890-public-hero { grid-template-columns: 1fr; }
  .v890-hero-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
  .v890-public-hero > strong { width: 120px; }
}

@media (max-width: 760px) {
  .v890-invite-grid,
  .v890-collaboration-grid,
  .v890-promotion-grid,
  .v890-public-item-grid,
  .v890-public-creator-grid,
  .v890-two-column,
  .v890-split-list { grid-template-columns: 1fr; }
  .v890-section-head,
  .v890-workspace-head { align-items: stretch; flex-direction: column; }
  .v890-filter { width: 100%; }
  .v890-split-list label { grid-template-columns: minmax(0, 1fr) 110px; }
  .v890-split-list small { grid-column: 1 / -1; }
  .v890-audit-list > div { grid-template-columns: 1fr; gap: 3px; }
}

@media (max-width: 560px) {
  .v890-stat-grid,
  .v890-hero-metrics { grid-template-columns: 1fr; }
  .v890-hero,
  .v890-public-hero { padding: 22px; border-radius: 22px; }
  .v890-hero h1,
  .v890-public-hero h1 { font-size: 36px; }
  .v890-card-top { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .creator-dashboard-layout .creator-pro-sidebar .side-group-links a,
  .v890-invite-card,
  .v890-collaboration-card,
  .v890-item-card,
  .v890-promotion-grid > .card,
  .v890-public-item-grid > .card,
  .v890-public-creator-grid > .card,
  .v890-create-panel > summary b,
  .v890-details-panel > summary b,
  .v890-audit > summary b { transition: none !important; transform: none !important; }
}