:root {
        --zinc-25: #fcfcfc;
        --zinc-50: #fafafa;
        --zinc-100: #f4f4f5;
        --zinc-200: #e4e4e7;
        --zinc-300: #d4d4d8;
        --zinc-400: #a1a1aa;
        --zinc-500: #71717a;
        --zinc-600: #52525b;
        --zinc-700: #3f3f46;
        --zinc-800: #27272a;
        --zinc-900: #18181b;
        --border: 1px solid var(--zinc-200);
        --radius: 3px;
    }

    /* Monospace typography for data */
    .mono {
        font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', 'Monaco', monospace;
        font-size: 0.8125rem;
        letter-spacing: -0.02em;
    }

    /* ─────────────────────────────────────────────────────────────────────
       LAYOUT: Canvas + Sidebar
    ───────────────────────────────────────────────────────────────────── */
    .detail-layout {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 1.25rem;
        max-width: 1280px;
        margin: 0 auto;
        align-items: start;
    }

    @media (max-width: 1024px) {
        .detail-layout {
            grid-template-columns: 1fr;
        }
        .metadata-sidebar {
            order: -1;
        }
    }

    /* ─────────────────────────────────────────────────────────────────────
       BREADCRUMBS
    ───────────────────────────────────────────────────────────────────── */
    .breadcrumbs {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.75rem 0;
        font-size: 0.875rem;
    }

    .breadcrumbs a {
        color: var(--zinc-500);
        text-decoration: none;
    }

    .breadcrumbs a:hover {
        color: var(--zinc-800);
        text-decoration: underline;
    }

    .breadcrumbs .sep {
        color: var(--zinc-300);
    }

    .breadcrumbs .current {
        color: var(--zinc-700);
        font-weight: 500;
    }

    /* ─────────────────────────────────────────────────────────────────────
       CANVAS (Main Content Area)
    ───────────────────────────────────────────────────────────────────── */
    .canvas {
        background: #fff;
        border: var(--border);
        border-radius: var(--radius);
    }

    .canvas-header {
        padding: 1.25rem 1.5rem;
        border-bottom: var(--border);
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
    }

    .canvas-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: #0F172A;
        letter-spacing: -0.025em;
        margin: 0;
        line-height: 1.3;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .canvas-meta {
        font-size: 0.8125rem;
        color: var(--zinc-500);
        margin-top: 0.25rem;
    }

    .canvas-body {
        padding: 1.5rem;
    }

    /* ─────────────────────────────────────────────────────────────────────
       BUTTONS
    ───────────────────────────────────────────────────────────────────── */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.5rem 0.875rem;
        font-size: 0.75rem;
        font-weight: 500;
        border: var(--border);
        border-radius: var(--radius);
        background: #fff;
        color: var(--zinc-700);
        cursor: pointer;
        text-decoration: none;
        transition: all 0.15s ease;
        white-space: nowrap;
    }

    .btn:hover {
        background: var(--zinc-50);
        border-color: var(--zinc-300);
    }

    .btn-primary {
        background: var(--zinc-800);
        color: #fff;
        border-color: var(--zinc-800);
    }

    .btn-primary:hover {
        background: var(--zinc-700);
    }


/* Company Badges Container (matching list view style) */
/* Canvas badges container (below canvas-title) */
.canvas-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  align-items: center;
}

.meta-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.meta-badge-blue {
  background: #eff6ff;
  color: #1e40af;
}

.meta-badge-gray {
  background: #f9fafb;
  color: #374151;
}

.meta-badge-purple {
  background: #faf5ff;
  color: #7c3aed;
}

.meta-badge-green {
  background: #f0fdf4;
  color: #166534;
}

.company-badge-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: #eff6ff;
  color: #1e40af;
  font-size: 0.75rem;
  font-weight: 500;
}

.company-badge-gray {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: #f9fafb;
  color: #374151;
  font-size: 0.75rem;
  font-weight: 500;
}

.company-badge-purple {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: #faf5ff;
  color: #7c3aed;
  font-size: 0.75rem;
  font-weight: 500;
}

.company-badge-green {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: #f0fdf4;
  color: #166534;
  font-size: 0.75rem;
  font-weight: 500;
}

.company-badge-linkedin {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: #f0fdf4;
  color: #166534;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
  border: 1px solid #bbf7d0;
}

.company-badge-linkedin:hover {
  background: #dcfce7;
  border-color: #86efac;
}

.company-badge-website {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: #eff6ff;
  color: #1e40af;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
  border: 1px solid #bfdbfe;
}

.company-badge-website:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

    /* ─────────────────────────────────────────────────────────────────────
       SUMMARY BLOCK
    ───────────────────────────────────────────────────────────────────── */
    .summary-block {
        padding: 1rem 1.25rem;
        background: var(--zinc-50);
        border-left: 3px solid var(--zinc-400);
        border-radius: 0 var(--radius) var(--radius) 0;
        margin-bottom: 1.5rem;
    }

    .summary-block p {
        font-size: 0.875rem;
        color: var(--zinc-700);
        line-height: 1.65;
        margin: 0;
    }

    /* ─────────────────────────────────────────────────────────────────────
       CONTACT SOURCING CARD
    ───────────────────────────────────────────────────────────────────── */
    .contact-sourcing-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
        overflow: hidden;
    }

    .contact-sourcing-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.875rem 1.25rem;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-bottom: 1px solid #e2e8f0;
        font-size: 0.9375rem;
        font-weight: 600;
        color: #334155;
    }

    .contact-sourcing-header svg {
        color: #6366f1;
        flex-shrink: 0;
    }

    .contact-sourcing-body {
        padding: 1rem 1.25rem;
    }

    /* ─────────────────────────────────────────────────────────────────────
       LEGEND (Always Visible)
    ───────────────────────────────────────────────────────────────────── */
    .legend {
        padding: 0.75rem 1rem;
        background: var(--zinc-50);
        border: var(--border);
        border-radius: var(--radius);
        margin-bottom: 1rem;
    }

    .legend-title {
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--zinc-500);
        margin-bottom: 0.625rem;
    }

    .legend-items {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid;
  border-radius: 0.25rem;
}

    .badge .material-icons {
        font-size: 0.75rem;
    }

    .badge-green {
        background: #ecfdf5;
        color: #166534;
        border-color: #a7f3d0;
    }

    .badge-yellow {
        background: #fefce8;
        color: #854d0e;
        border-color: #fde047;
    }

    .badge-orange {
        background: #fff7ed;
        color: #9a3412;
        border-color: #fdba74;
    }

    .badge-red {
        background: #fef2f2;
        color: #991b1b;
        border-color: #fecaca;
    }

    .badge-blue {
        background: #eff6ff;
        color: #1e40af;
        border-color: #93c5fd;
    }

    .badge-purple {
        background: #faf5ff;
        color: #7c3aed;
        border-color: #c4b5fd;
    }

    .badge-gray {
        background: var(--zinc-100);
        color: var(--zinc-600);
        border-color: var(--zinc-300);
    }

    /* ─────────────────────────────────────────────────────────────────────
       BENEFITS LIST
    ───────────────────────────────────────────────────────────────────── */
    .benefits-list {
        border: var(--border);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .benefit-item {
        border-bottom: 1px solid var(--zinc-100);
    }

    .benefit-item:last-child {
        border-bottom: none;
    }

    .benefit-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.875rem 1rem;
        cursor: pointer;
        background: #fff;
        transition: background 0.1s ease;
        list-style: none;
    }

    .benefit-header::-webkit-details-marker {
        display: none;
    }

    .benefit-header:hover {
        background: var(--zinc-25);
    }

    .benefit-title-group {
        display: flex;
        align-items: center;
        gap: 0.625rem;
    }

    .benefit-chevron {
        width: 1rem;
        height: 1rem;
        color: var(--zinc-400);
        transition: transform 0.15s ease;
        flex-shrink: 0;
    }

    .benefit-item[open] .benefit-chevron {
        transform: rotate(90deg);
    }

    .benefit-name {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--zinc-800);
    }

    .benefit-body {
        padding: 0 1rem 1rem 2.625rem;
        background: var(--zinc-25);
        border-top: 1px solid var(--zinc-100);
    }

    .benefit-description {
        font-size: 0.8125rem;
        color: var(--zinc-600);
        line-height: 1.6;
        margin: 1rem 0;
    }

    .benefit-fields {
        margin-top: 0.75rem;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 0.5rem;
    }

    .field-card {
        padding: 0.625rem 0.75rem;
        background: #fff;
        border: var(--border);
        border-radius: var(--radius);
    }

    .field-card.wide {
        grid-column: span 2;
    }

    .field-label {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--zinc-800);
        margin-bottom: 0.25rem;
    }

    .field-value {
        font-size: 0.875rem;
        color: var(--zinc-900);
        font-weight: 400;
    }

    /* ─────────────────────────────────────────────────────────────────────
       SIDEBAR
    ───────────────────────────────────────────────────────────────────── */
    .metadata-sidebar {
        position: sticky;
        top: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .sidebar-card {
        background: #fff;
        border: var(--border);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .sidebar-header {
        padding: 0.625rem 0.875rem;
        background: var(--zinc-50);
        border-bottom: var(--border);
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--zinc-500);
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .sidebar-header-icon {
        width: 1rem;
        height: 1rem;
        color: var(--zinc-500);
        flex-shrink: 0;
    }

    .sidebar-body {
        padding: 0.625rem 0.875rem;
    }

    .meta-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 0.375rem 0;
        gap: 0.5rem;
    }

    .meta-row:not(:last-child) {
        border-bottom: 1px solid var(--zinc-100);
    }

    .meta-label {
        font-size: 0.75rem;
        color: var(--zinc-500);
        flex-shrink: 0;
    }

    .meta-value {
        font-size: 0.75rem;
        color: var(--zinc-800);
        text-align: right;
        word-break: break-word;
    }

    /* Benefits Summary in Sidebar */
    .benefit-summary-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 0;
        gap: 0.5rem;
    }

    .benefit-summary-item:not(:last-child) {
        border-bottom: 1px solid var(--zinc-100);
    }

    .benefit-summary-name {
        font-size: 0.75rem;
        color: var(--zinc-700);
        font-weight: 500;
    }

    /* ─────────────────────────────────────────────────────────────────────
       TECHNICAL SECTION
    ───────────────────────────────────────────────────────────────────── */
    .tech-section {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: var(--border);
    }

    .tech-header {
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--zinc-500);
        margin-bottom: 0.75rem;
    }

    .tech-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

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

    .tech-card {
        padding: 0.625rem 0.75rem;
        background: var(--zinc-50);
        border: 1px solid var(--zinc-100);
        border-radius: var(--radius);
    }

    .tech-label {
        font-size: 0.625rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--zinc-500);
    }

    .tech-value {
        font-size: 0.8125rem;
        color: var(--zinc-800);
        margin-top: 0.125rem;
    }

    /* ─────────────────────────────────────────────────────────────────────
       CODE BLOCKS (Light Theme, Constrained)
    ───────────────────────────────────────────────────────────────────── */
    .code-block {
        margin-top: 0.5rem;
        border: var(--border);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .code-toggle {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.625rem 0.875rem;
        background: var(--zinc-50);
        border: none;
        cursor: pointer;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--zinc-600);
        text-align: left;
        transition: background 0.1s ease;
    }

    .code-toggle:hover {
        background: var(--zinc-100);
        color: var(--zinc-800);
    }

    .code-toggle .chevron {
        width: 0.875rem;
        height: 0.875rem;
        transition: transform 0.15s ease;
        flex-shrink: 0;
    }

    .code-block[open] .code-toggle .chevron {
        transform: rotate(90deg);
    }

    .code-content {
        max-height: 300px;
        overflow: auto;
        padding: 1rem;
        background: var(--zinc-50);
        border-top: var(--border);
    }

    .code-content pre {
        margin: 0;
        font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
        font-size: 0.75rem;
        line-height: 1.5;
        color: var(--zinc-700);
        white-space: pre-wrap;
        word-break: break-word;
    }

    /* ─────────────────────────────────────────────────────────────────────
       LOCKED SECTIONS (Staff Only)
    ───────────────────────────────────────────────────────────────────── */
    .locked-section {
        opacity: 0.5;
        user-select: none;
    }

    .locked-toggle {
        cursor: not-allowed !important;
        background: var(--zinc-50);
        color: var(--zinc-400);
    }

    .locked-toggle:hover {
        background: var(--zinc-50) !important;
        color: var(--zinc-400) !important;
    }

    .locked-badge {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.125rem 0.5rem;
        font-size: 0.625rem;
        font-weight: 600;
        color: var(--zinc-400);
        background: var(--zinc-100);
        border: 1px solid var(--zinc-200);
        border-radius: 0.25rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    /* ─────────────────────────────────────────────────────────────────────
       UTILITIES
    ───────────────────────────────────────────────────────────────────── */
    .pb-8 { padding-bottom: 2rem; }