/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* The universal reset above wipes the UA stylesheet's `margin: auto` on
   <dialog> — the ONLY thing that centers a showModal() dialog inside its
   fixed inset:0 box. Without this, every workspace modal renders pinned to
   the top-left corner. */
dialog {
    margin: auto;
}

/* Geist is the UI face (DESIGN.md §4). Both families are variable fonts, so one
   @font-face each covers every weight. Self-hosted from the pinned vendor tree:
   the CSP allows font-src 'self' only, and an air-gapped instance has no CDN. */
@font-face {
    font-family: "Geist";
    src: url("../vendor/geist-1.7.2/Geist-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist Mono";
    src: url("../vendor/geist-1.7.2/GeistMono-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: var(--font);
    line-height: 1.6;
    color: var(--white);
    /* The sidebar's ground, so overscroll and any gap beside it match it. */
    background-color: var(--bg-primary);
}

:root {
    /* Sidebar palette, DESIGN.md §3 "Sidebar (black chrome)". These tokens theme
       the black chrome only; none of them belongs on the white content card. */
    --bg-primary: #111113;
    --bg-secondary: #0a0a0a;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-light: #f0f0f0;
    --bg-active: rgba(255, 255, 255, 0.08);
    --text-primary: #F4F4F5;
    --text-secondary: #9A9AA2;
    /* --text-muted stays #666666: the customer-app contract class .text-muted
       resolves through it (test/htmlbaseline/contract_test.go). */
    --text-muted: #666666;
    --accent: #FF6600;
    --border: #1F1F23;
    --font: "Geist", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --transition-fast: 150ms ease;
    --transition-medium: 250ms ease;
    /* Global stacking layers, values frozen at what the code used. Only these
       bands are GLOBAL; small values (1..90) are component-local stacking
       inside their own context and stay literal on purpose — naming them here
       would promise an ordering across components that does not exist.
       Deliberately three distinct modal values via calc: overlay, content and
       its escapees layer against each other, and collapsing them would reorder
       real overlaps. 1500 (chat template picker) and 10000 (PII overlay) are
       one-off escalations left literal; they are the audit's B4 cleanup case
       for the redesign, not for the freeze. */
    --z-dropdown: 100;
    --z-modal: 1000;
    --z-modal-nested: 1100;
    --z-sheet: 1200;
    --z-overlay: 2000;
    --z-toast: 9999;

    /* ------------------------------------------------------------------
       Frozen palette. Every token below carries EXACTLY the value its
       call sites used as a literal before tokenization — the name IS the
       value, because during the freeze the value is a colour's only
       meaning. Changing a value here restyles every use of the token.

       Tokens under a "family" comment are near-duplicates of each other
       (channel distance <= 8): visually near-identical, kept distinct
       because merging is a VISIBLE change. The consolidation step merges
       a family by aliasing — --c-xxxxxx: var(--c-yyyyyy); — one line per
       decision, with the HTML baseline naming every affected page.

       One-off colours (used once in the whole corpus) are deliberately
       absent: they stay literal at their single call site until the
       consolidation decides their fate. */

    --white: #ffffff;
    --black: #000000;
    /* family 1: 19 near-duplicates */
    --c-fafafa: #fafafa;  /* 63x */
    --c-f3f4f6: #f3f4f6;  /* 56x */
    --c-f4f4f5: #f4f4f5;  /* 33x */
    --c-fef2f2: #fef2f2;  /* 23x */
    --c-f9fafb: #f9fafb;  /* 23x */
    --c-f5f5f5: #f5f5f5;  /* 18x */
    --c-f7f7f8: #f7f7f8;  /* 13x */
    --c-fcfcfd: #fcfcfd;  /* 9x */
    --c-f8f8f8: #f8f8f8;  /* 5x */
    --c-fff9f4: #fff9f4;  /* 4x */
    --c-fdf2f2: #fdf2f2;  /* 4x */
    --c-fff7f2: #fff7f2;  /* 4x */
    --c-fcfaf9: #fcfaf9;  /* 3x */
    --c-fffaf7: #fffaf7;  /* 3x */
    --c-f7f7f7: #f7f7f7;  /* 3x */
    --c-fff5f5: #fff5f5;  /* 3x */
    --c-fafaf9: #fafaf9;  /* 3x */
    --c-fffbf8: #fffbf8;  /* 2x */
    --c-fdf3f3: #fdf3f3;  /* 2x */
    /* family 2: 2 near-duplicates */
    --c-f0fdf4: #f0fdf4;  /* 7x */
    --c-ecfdf5: #ecfdf5;  /* 2x */
    /* family 3: 8 near-duplicates */
    --c-fff5eb: #fff5eb;  /* 12x */
    --c-fff5ed: #fff5ed;  /* 11x */
    --c-fffbeb: #fffbeb;  /* 7x */
    --c-fff4ec: #fff4ec;  /* 5x */
    --c-fff7f0: #fff7f0;  /* 3x */
    --c-ffeeee: #ffeeee;  /* 3x */
    --c-fff0f0: #fff0f0;  /* 3x */
    --c-fff7ed: #fff7ed;  /* 2x */
    --c-dcfce7: #dcfce7;  /* 2x */
    --c-fef3c7: #fef3c7;  /* 5x */
    /* family 4: 2 near-duplicates */
    --c-e6f7e6: #e6f7e6;  /* 3x */
    --c-e6f4ea: #e6f4ea;  /* 2x */
    --c-eef2ff: #eef2ff;  /* 3x */
    /* family 5: 7 near-duplicates */
    --c-f0f0f0: #f0f0f0;  /* 46x */
    --c-eeeeee: #eeeeee;  /* 22x */
    --c-eeeef0: #eeeef0;  /* 5x */
    --c-ecf0f1: #ecf0f1;  /* 3x */
    --c-f0f0f1: #f0f0f1;  /* 3x */
    --c-f1f1f2: #f1f1f2;  /* 2x */
    --c-f1f3f5: #f1f3f5;  /* 2x */
    /* family 6: 2 near-duplicates */
    --c-fee2e2: #fee2e2;  /* 3x */
    --c-fde8e8: #fde8e8;  /* 2x */
    --c-bbf7d0: #bbf7d0;  /* 6x */
    /* family 7: 2 near-duplicates */
    --c-e0e7ff: #e0e7ff;  /* 3x */
    --c-dbeafe: #dbeafe;  /* 2x */
    /* family 8: 5 near-duplicates */
    --c-e5e7eb: #e5e7eb;  /* 151x */
    --c-ececee: #ececee;  /* 36x */
    --c-e4e4e7: #e4e4e7;  /* 32x */
    --c-e5e5e5: #e5e5e5;  /* 8x */
    --c-e8e8e8: #e8e8e8;  /* 2x */
    --c-d4edda: #d4edda;  /* 2x */
    --c-fde68a: #fde68a;  /* 4x */
    --c-f4dede: #f4dede;  /* 2x */
    --c-fbddc9: #fbddc9;  /* 8x */
    /* family 9: 4 near-duplicates */
    --c-e0e0e0: #e0e0e0;  /* 90x */
    --c-dddddd: #dddddd;  /* 9x */
    --c-e5e4e1: #e5e4e1;  /* 3x */
    --c-dddcd8: #dddcd8;  /* 2x */
    --c-c3e6cb: #c3e6cb;  /* 2x */
    --c-fed7aa: #fed7aa;  /* 3x */
    /* family 10: 2 near-duplicates */
    --c-f3d3d3: #f3d3d3;  /* 3x */
    --c-f8d7da: #f8d7da;  /* 2x */
    --c-ddd8d3: #ddd8d3;  /* 2x */
    --c-bfdbfe: #bfdbfe;  /* 4x */
    /* family 11: 2 near-duplicates */
    --c-fecaca: #fecaca;  /* 12x */
    --c-ffcccc: #ffcccc;  /* 5x */
    /* family 12: 4 near-duplicates */
    --c-d1d5db: #d1d5db;  /* 23x */
    --c-d4d4d8: #d4d4d8;  /* 17x */
    --c-d8d8d5: #d8d8d5;  /* 2x */
    --c-d5d5d5: #d5d5d5;  /* 2x */
    --c-86efac: #86efac;  /* 2x */
    --c-c7d2fe: #c7d2fe;  /* 3x */
    /* family 13: 2 near-duplicates */
    --c-f5c6c6: #f5c6c6;  /* 3x */
    --c-f5c6cb: #f5c6cb;  /* 2x */
    /* family 14: 5 near-duplicates */
    --c-cccccc: #cccccc;  /* 24x */
    --c-d0d0d0: #d0d0d0;  /* 20x */
    --c-d4d4d4: #d4d4d4;  /* 7x */
    --c-c4c4c8: #c4c4c8;  /* 5x */
    --c-c4c4cc: #c4c4cc;  /* 2x */
    --c-fdba74: #fdba74;  /* 2x */
    /* family 15: 3 near-duplicates */
    --c-bbbbbb: #bbbbbb;  /* 5x */
    --c-c0c0c0: #c0c0c0;  /* 4x */
    --c-c0bfb9: #c0bfb9;  /* 2x */
    --c-fca5a5: #fca5a5;  /* 9x */
    --c-aaaaaa: #aaaaaa;  /* 17x */
    --c-f59e0b: #f59e0b;  /* 7x */
    --c-2ecc71: #2ecc71;  /* 3x */
    /* family 16: 2 near-duplicates */
    --c-9ca3af: #9ca3af;  /* 51x */
    --c-a1a1aa: #a1a1aa;  /* 48x */
    --c-95a5a6: #95a5a6;  /* 2x */
    --c-ff8a3d: #ff8a3d;  /* 2x */
    --c-60a5fa: #60a5fa;  /* 2x */
    --c-22c55e: #22c55e;  /* 12x */
    --c-9a9aa2: #9a9aa2;  /* 15x */
    /* family 17: 2 near-duplicates */
    --c-999999: #999999;  /* 104x */
    --c-a0a0a0: #a0a0a0;  /* 12x */
    --c-35b37e: #35b37e;  /* 3x */
    --c-4caf50: #4caf50;  /* 2x */
    --c-10b981: #10b981;  /* 6x */
    --c-ff7a1a: #ff7a1a;  /* 3x */
    /* family 18: 2 near-duplicates */
    --c-888888: #888888;  /* 75x */
    --c-8a8a8f: #8a8a8f;  /* 2x */
    --c-3498db: #3498db;  /* 3x */
    --c-d97706: #d97706;  /* 13x */
    --c-ff6a00: #ff6a00;  /* 3x */
    --c-16a34a: #16a34a;  /* 10x */
    --c-3b82f6: #3b82f6;  /* 6x */
    --c-ee5555: #ee5555;  /* 5x */
    --c-8a63d2: #8a63d2;  /* 2x */
    /* family 19: 4 near-duplicates */
    --c-e65c00: #e65c00;  /* 26x */
    --c-e55b00: #e55b00;  /* 6x */
    --c-e55a00: #e55a00;  /* 3x */
    --c-e55c00: #e55c00;  /* 3x */
    --c-b5690d: #b5690d;  /* 2x */
    /* family 20: 3 near-duplicates */
    --c-71717a: #71717a;  /* 59x */
    --c-6b7280: #6b7280;  /* 47x */
    --c-777777: #777777;  /* 9x */
    --c-2d8a2d: #2d8a2d;  /* 3x */
    --c-ef4444: #ef4444;  /* 27x */
    --c-2e7d32: #2e7d32;  /* 4x */
    --c-cc5200: #cc5200;  /* 2x */
    --c-666666: #666666;  /* 87x */
    --c-8250df: #8250df;  /* 2x */
    /* family 21: 2 near-duplicates */
    --c-15803d: #15803d;  /* 7x */
    --c-1a7f37: #1a7f37;  /* 3x */
    --c-1e7e34: #1e7e34;  /* 5x */
    --c-d64545: #d64545;  /* 4x */
    --c-b45309: #b45309;  /* 10x */
    --c-e53e3e: #e53e3e;  /* 20x */
    --c-2563eb: #2563eb;  /* 4x */
    --c-0969da: #0969da;  /* 2x */
    --c-c2410c: #c2410c;  /* 3x */
    --c-0e6b5a: #0e6b5a;  /* 4x */
    /* family 22: 3 near-duplicates */
    --c-555555: #555555;  /* 40x */
    --c-52525b: #52525b;  /* 32x */
    --c-57534e: #57534e;  /* 3x */
    --c-c0392b: #c0392b;  /* 7x */
    --c-4b5563: #4b5563;  /* 20x */
    --c-cc3333: #cc3333;  /* 21x */
    --c-7c4a1e: #7c4a1e;  /* 4x */
    --c-166534: #166534;  /* 6x */
    --c-92400e: #92400e;  /* 5x */
    --c-1d4ed8: #1d4ed8;  /* 4x */
    --c-dc2626: #dc2626;  /* 21x */
    --c-065f46: #065f46;  /* 3x */
    --c-c62828: #c62828;  /* 2x */
    --c-cf222e: #cf222e;  /* 2x */
    --c-9a3412: #9a3412;  /* 3x */
    --c-155724: #155724;  /* 2x */
    --c-78350f: #78350f;  /* 2x */
    --c-374151: #374151;  /* 12x */
    /* family 23: 3 near-duplicates */
    --c-3f3f46: #3f3f46;  /* 18x */
    --c-444444: #444444;  /* 6x */
    --c-3a3a3e: #3a3a3e;  /* 2x */
    /* family 24: 2 near-duplicates */
    --c-b91c1c: #b91c1c;  /* 24x */
    --c-b42318: #b42318;  /* 7x */
    --c-2c3e50: #2c3e50;  /* 8x */
    --c-4a3a1f: #4a3a1f;  /* 3x */
    --c-3730a3: #3730a3;  /* 3x */
    --c-991b1b: #991b1b;  /* 12x */
    --c-333333: #333333;  /* 89x */
    --c-7f1d1d: #7f1d1d;  /* 2x */
    --c-721c24: #721c24;  /* 2x */
    --c-cc0000: #cc0000;  /* 5x */
    /* family 25: 2 near-duplicates */
    --c-2a2a2a: #2a2a2a;  /* 5x */
    --c-2a2a2e: #2a2a2e;  /* 3x */
    --c-aa0000: #aa0000;  /* 2x */
    --c-1f2024: #1f2024;  /* 2x */
    /* family 26: 7 near-duplicates */
    --c-1a1a1a: #1a1a1a;  /* 141x */
    --c-18181b: #18181b;  /* 63x */
    --c-1f1f1f: #1f1f1f;  /* 17x */
    --c-141414: #141414;  /* 14x */
    --c-161618: #161618;  /* 4x */
    --c-222222: #222222;  /* 3x */
    --c-1b1b1e: #1b1b1e;  /* 2x */
    --c-111827: #111827;  /* 5x */
    /* family 27: 3 near-duplicates */
    --c-0a0a0a: #0a0a0a;  /* 12x */
    --c-0a0a0b: #0a0a0b;  /* 4x */
    --c-111111: #111111;  /* 3x */
    /* translucent layers, same rule: value-frozen */
    --accent-a00: rgba(255, 102, 0, 0);
    --accent-a05: rgba(255, 102, 0, 0.05);
    --accent-a06: rgba(255, 102, 0, 0.06);
    --accent-a08: rgba(255, 102, 0, 0.08);
    --accent-a10: rgba(255, 102, 0, 0.1);
    --accent-a15: rgba(255, 102, 0, 0.15);
    --accent-a25: rgba(255, 102, 0, 0.25);
    --accent-a30: rgba(255, 102, 0, 0.3);
    --accent-a35: rgba(255, 102, 0, 0.35);
    --black-a04: rgba(0, 0, 0, 0.04);
    --black-a06: rgba(0, 0, 0, 0.06);
    --black-a08: rgba(0, 0, 0, 0.08);
    --black-a10: rgba(0, 0, 0, 0.1);
    --black-a12: rgba(0, 0, 0, 0.12);
    --black-a15: rgba(0, 0, 0, 0.15);
    --black-a18: rgba(0, 0, 0, 0.18);
    --black-a20: rgba(0, 0, 0, 0.2);
    --black-a25: rgba(0, 0, 0, 0.25);
    --black-a30: rgba(0, 0, 0, 0.3);
    --black-a35: rgba(0, 0, 0, 0.35);
    --black-a40: rgba(0, 0, 0, 0.4);
    --black-a50: rgba(0, 0, 0, 0.5);
    --c-10b981-a15: rgba(16, 185, 129, 0.15);
    --c-140f0a-a06: rgba(20, 15, 10, 0.06);
    --c-16a34a-a10: rgba(22, 163, 74, 0.1);
    --c-3b82f6-a15: rgba(59, 130, 246, 0.15);
    --c-3b82f6-a25: rgba(59, 130, 246, 0.25);
    --c-3b82f6-a40: rgba(59, 130, 246, 0.4);
    --c-d93025-a00: rgba(217, 48, 37, 0);
    --white-a15: rgba(255, 255, 255, 0.15);

}
.dv-text-primary {
  color: var(--text-primary);
}
.dv-text-secondary {
  color: var(--text-secondary);
}
.dv-text-muted,.text-muted {
  color: var(--text-muted);
}
.dv-text-accent,.text-accent {
  color: var(--accent);
}
.dv-icon {
  color: var(--text-primary);
  width: 14px;
  height: 14px;
}

/* Hero Section */
.dv-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 2rem;
}

.dv-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.dv-hero p {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* Cards */
.dv-card,.card {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px var(--black-a10);
}

.dv-card--compact {
    padding: 1vh 1vw !important;
    margin: 0 !important;
}

.dv-card h2,.card h2 {
    color: var(--c-2c3e50);
    margin-bottom: 1rem;
}
.dv-card h3,.card h3 {
    color: var(--c-2c3e50);
}
.dv-card-item{
    display: flex;
    width: 200px;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 1px 3px var(--black-a10);
    background: black;
    list-style: none;
    color: white;
    text-decoration: none;
}

.dv-dashboard-grid-section{
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.dv-card-item-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    flex-direction: column;
    gap: 2vw;
}

/* Buttons */
.dv-btn,.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.dv-btn-primary,.btn-primary {
    background-color: var(--c-3498db);
    color: white;
}

.dv-btn-primary:hover,.btn-primary:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

.dv-btn-success {
    background-color: var(--c-2ecc71);
    color: white;
}

.dv-btn-success:hover {
    background-color: #27ae60;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3);
}

.dv-btn-info {
    background-color: #9b59b6;
    color: white;
}

.dv-btn-info:hover {
    background-color: #8e44ad;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(155, 89, 182, 0.3);
}
.dv-btn-disabled {
    background-color: #bdc3c7 !important;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Result Box */
.dv-result-box {
    margin-top: 1rem;
    padding: 1.5rem;
    border-radius: 4px;
    background-color: var(--c-ecf0f1);
    border-left: 4px solid var(--c-95a5a6);
}

.dv-result-box.dv-success {
    background-color: #d5f4e6;
    border-left-color: var(--c-2ecc71);
}

.dv-result-box.dv-info {
    background-color: #dfe6e9;
    border-left-color: var(--c-3498db);
}

.dv-result-box h3 {
    margin-bottom: 0.5rem;
    color: var(--c-2c3e50);
}

.dv-result-box p {
    margin-bottom: 0.5rem;
}

/* Progress Bar */
.dv-progress-bar {
    width: 100%;
    height: 20px;
    background-color: var(--c-ecf0f1);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 1rem;
}

.dv-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-3498db) 0%, var(--c-2ecc71) 100%);
    transition: width 0.5s ease;
}

/* Content */
.dv-content {
    background: white;
    border-radius: 8px;
    padding: 1rem;
}

.dv-content h1 {
    color: var(--c-2c3e50);
    margin-bottom: 1rem;
}

.dv-content h2 {
    color: #34495e;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.dv-content ul {
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.dv-content li {
    margin-bottom: 0.5rem;
}

/* Code Block */
.dv-code-block {
    background-color: var(--c-2c3e50);
    color: var(--c-ecf0f1);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1rem 0;
}

.dv-code-block pre {
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
}

/* Dashboard */
.dv-dashboard-controls {
    margin-bottom: 2rem;
}

.dv-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.dv-stat-card {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--black-a10);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.dv-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px var(--black-a15);
}

.dv-stat-card h3 {
    color: #7f8c8d;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.dv-stat-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--c-2c3e50);
    margin: 1rem 0;
}

.dv-stat-label {
    color: var(--c-95a5a6);
    font-size: 0.9rem;
}

.dv-footer p {
    margin: 0;
}



/* NAVIGATION BAR */

.dv-sidebar {
    width: 260px;
    height: 100vh;
    background: var(--bg-primary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    box-shadow: 2px 0 10px var(--black-a30);
    transition: transform 0.3s ease;
}

.dv-sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

/* Part of the sidebar, so it sits on the sidebar's own ground: no fill of its
   own at rest, the nav's white-alpha on hover. */
.dv-sidebar-close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.dv-sidebar-close svg { width: 18px; height: 18px; }

.dv-sidebar-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dv-sidebar-close:focus-visible,
.dv-sidebar-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.dv-logo {
    display: flex;
    align-items: end;
    justify-content: flex-start;
    text-decoration: none;
}
.dv-logo-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin-right: 8px;
}
.dv-logo p {
    font-size: 10px;
    margin: 2.4px;
    color: var(--text-muted);
}

/* Navigation */
.dv-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 12px;
}

.dv-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.dv-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.dv-sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.dv-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: var(--c-333333);
}

/* Nav Sections */
.dv-nav-section {
    margin-bottom: 8px;
}

.dv-nav-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: background var(--transition-fast);
    user-select: none;
}

.dv-nav-section-header:hover {
    background: var(--bg-hover);
}

.dv-nav-section-header.dv-active {
    background: var(--bg-active);
}

.dv-nav-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.dv-nav-section-icon {
    width: 18px;
    height: 18px;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.dv-nav-section-header:hover .dv-nav-section-icon {
    opacity: 1;
}

.dv-nav-section-chevron {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform var(--transition-medium);
}

.dv-nav-section.dv-expanded .dv-nav-section-chevron {
    transform: rotate(90deg);
}

/* Nav Items */
.dv-nav-items {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--transition-medium);
}

.dv-nav-section.dv-expanded .dv-nav-items {
    max-height: 500px;
}

.dv-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px 9px 42px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 8px;
    transition: all var(--transition-fast);
    position: relative;
}

.dv-nav-item::before {
    content: '';
    position: absolute;
    left: 24px;
    width: 4px;
    height: 4px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all var(--transition-fast);
}

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

.dv-nav-item:hover::before {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}

.dv-nav-item.dv-active {
    background: var(--bg-active);
    color: var(--text-primary);
}

.dv-nav-item.dv-active::before {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}

/* Single Nav Items (no nesting) */
.dv-nav-single {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 8px;
    transition: all var(--transition-fast);
    margin-bottom: 4px;
}

.dv-nav-single:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dv-nav-single:hover .dv-nav-section-icon {
    opacity: 1;
}

/* The page you are on: orange label and icon, plus the marker below. The same
   for a platform page (.dv-nav-single) and for the workspace whose page is open
   (.dv-nav-workspace). */
.dv-nav-single.dv-active,
.dv-nav-workspace.dv-active {
    background: var(--bg-hover);
    color: var(--accent);
    position: relative;
}

/* The active marker of DESIGN.md §6: a 3px orange bar bleeding off the sidebar's
   left edge (the nav's own 12px padding is what it bleeds across). */
.dv-nav-single.dv-active::before,
.dv-nav-workspace.dv-active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    width: 3px;
    height: 18px;
    margin-top: -9px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

/* Hover and the open flyout restate a light label further down at the same
   specificity; the active row stays orange through both. */
.dv-nav-single.dv-active:hover,
.dv-nav-workspace.dv-active:hover,
.dv-nav-workspace.dv-active.dv-open { color: var(--accent); }

/* A row inside a group — one of the user's app groups, or the platform's fixed
   pseudo-group — is indented by the group's 18px margin, 1px rule and 6px
   padding; the marker still sits on the sidebar edge. */
.dv-nav-group-items .dv-nav-workspace.dv-active::before,
.dv-nav-group-items .dv-nav-single.dv-active::before { left: -37px; }

.dv-nav-single.dv-active .dv-nav-section-icon,
.dv-nav-single.dv-active .dv-icon,
.dv-nav-workspace.dv-active .dv-nav-workspace-header .dv-icon {
    opacity: 1;
    color: var(--accent);
}

/* Workspace Nav Items */
.dv-nav-workspace {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: 4px;
    user-select: none;
}

.dv-nav-workspace:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dv-nav-workspace-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dv-nav-chevron {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    transition: transform var(--transition-medium);
}

/* Cascading flyout submenus. Each workspace row lives in a .nav-flyout-root;
   hovering it opens the .nav-flyout panel to the right (positioned by
   nav_flyout.js). The panel is position:fixed so it escapes the sidebar's
   overflow:hidden; it stays a DOM child of its root so pointer enter/leave
   containment keeps it open while the mouse is inside. Nested
   .nav-flyout-root elements inside a panel cascade the same way. */
.dv-nav-workspace.dv-open {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dv-nav-flyout {
    position: fixed;
    min-width: 200px;
    max-width: 300px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 32px var(--black-a35);
    opacity: 0;
    visibility: hidden;
    transform: translateX(4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
    z-index: 90;
}

.dv-nav-flyout.dv-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Inside a flyout the items are menu entries: no accordion indent, no dot. */
.dv-nav-flyout .dv-nav-item {
    padding: 9px 10px;
}

.dv-nav-flyout .dv-nav-item::before {
    display: none;
}

/* Pin button on workspace rows: hidden until the row is hovered (or the
   workspace is pinned). Pinned workspaces are reordered to the top of their
   section by nav_pins.js, persisted per user on the server. */
.dv-nav-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-right: 2px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    flex-shrink: 0;
    transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.dv-nav-pin svg {
    width: 13px;
    height: 13px;
}

.dv-nav-workspace:hover .dv-nav-pin,
.dv-nav-pin:focus-visible {
    opacity: 1;
}

.dv-nav-pin:hover {
    color: var(--text-primary);
    background: var(--bg-active);
}

.dv-nav-workspace.dv-pinned .dv-nav-pin {
    opacity: 1;
    color: var(--accent);
}

/* Personal app groups (nav_groups.js, persisted per user on the server). Rows of
   the Apps list get a "Move to group" button beside the pin; groups render
   before the ungrouped rows as a collapsible header with hover actions. */
.dv-nav-group-btn,
.dv-nav-group-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-right: 2px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    flex-shrink: 0;
    transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.dv-nav-group-btn svg,
.dv-nav-group-action svg {
    width: 13px;
    height: 13px;
}

.dv-nav-workspace:hover .dv-nav-group-btn,
.dv-nav-group-btn:focus-visible,
.dv-nav-group-btn[aria-expanded="true"],
.dv-nav-group-header:hover .dv-nav-group-action,
.dv-nav-group-header:focus-within .dv-nav-group-action {
    opacity: 1;
}

.dv-nav-group-btn:hover,
.dv-nav-group-btn[aria-expanded="true"],
.dv-nav-group-action:hover {
    color: var(--text-primary);
    background: var(--bg-active);
}

.dv-nav-group {
    margin-bottom: 4px;
}

.dv-nav-group-header {
    display: flex;
    align-items: center;
    border-radius: 8px;
}

.dv-nav-group-toggle {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.dv-nav-group-toggle:hover,
.dv-nav-group-toggle:focus-visible {
    color: var(--text-primary);
    background: var(--bg-hover);
    outline: none;
}

.dv-nav-group-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform var(--transition-medium);
}

.dv-nav-group-toggle[aria-expanded="false"] .dv-nav-group-chevron {
    transform: rotate(-90deg);
}

.dv-nav-group-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dv-nav-group-header.dv-renaming .dv-nav-group-toggle {
    display: none;
}

.dv-nav-group-items {
    margin-left: 18px;
    padding-left: 6px;
    border-left: 1px solid var(--border);
}

.dv-nav-group-empty {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.dv-nav-group-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-hover);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
}

.dv-nav-group-input:focus-visible {
    outline: none;
    border-color: var(--accent);
}

/* "Move to group" menu — hoisted to <body> and placed by nav_groups.js,
   styled like the flyout panels it replaces while open. */
.dv-nav-menu {
    position: fixed;
    min-width: 200px;
    max-width: 280px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 32px var(--black-a35);
    opacity: 0;
    visibility: hidden;
    transform: translateX(4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
    z-index: var(--z-dropdown);
}

/* Visible at once when opening (only the fade animates): nav_groups.js moves
   focus into the menu right away, and a still-hidden element refuses focus. */
.dv-nav-menu.dv-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s;
}

.dv-nav-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.dv-nav-menu-item:hover,
.dv-nav-menu-item:focus-visible {
    color: var(--text-primary);
    background: var(--bg-hover);
    outline: none;
}

.dv-nav-menu-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.dv-nav-menu-item[aria-checked="false"] .dv-nav-menu-check {
    visibility: hidden;
}

.dv-nav-menu-item[aria-checked="true"] .dv-nav-menu-check {
    color: var(--accent);
}

.dv-nav-menu-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dv-nav-menu-sep {
    height: 1px;
    margin: 4px 2px;
    background: var(--border);
}

/* Non-interactive header showing the parent's full name; only rendered
   visible (.show-head) when the row label is actually truncated. */
.dv-nav-flyout-head {
    display: none;
    padding: 8px 10px 9px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    cursor: default;
    word-break: break-word;
}

.dv-nav-flyout.dv-show-head .dv-nav-flyout-head {
    display: block;
}

/* Long-label handling: labels truncate with an ellipsis instead of being
   clipped by the sidebar edge. nav_tooltip.js detects rows that actually
   overflow and shows the full name in a .nav-tip bubble on hover. */
.dv-nav-single .dv-icon,
.dv-nav-item .dv-icon,
.dv-nav-workspace-header .dv-icon {
    flex-shrink: 0;
}

.dv-nav-workspace-header {
    flex: 1;
    min-width: 0;
}

.dv-nav-chevron {
    flex-shrink: 0;
}

.dv-nav-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Full-name popup for truncated nav rows. position:fixed (placed by
   nav_tooltip.js) so it escapes the sidebar's overflow:hidden; pill style
   matches the .metric-info tooltip. */
.dv-nav-tip {
    position: fixed;
    max-width: 320px;
    background: var(--c-18181b);
    color: var(--c-fafafa);
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.45;
    padding: 7px 11px;
    border-radius: 9px;
    box-shadow: 0 8px 24px var(--black-a20);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    z-index: var(--z-dropdown);
    pointer-events: none;
    word-break: break-word;
}

.dv-nav-tip.dv-visible {
    opacity: 1;
    visibility: visible;
}

/* Section Labels */
.dv-nav-label {
    padding: 20px 12px 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* The nav has no headings; one gap keeps its two blocks apart — the platform's
   pseudo-group, then the apps. The pseudo-group is the only .nav-group that is
   a direct child of the nav (the user's own sit inside the Apps list), so it is
   the only one that takes the wider gap. */
.dv-sidebar-nav > .dv-nav-group {
    margin-bottom: 12px;
}

/* Badge */
.dv-nav-badge {
    margin-left: auto;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    background: var(--accent);
    color: white;
    border-radius: 10px;
}

.dv-nav-badge.dv-warning {
    background: var(--c-f59e0b);
}

/* Sidebar Footer */
.dv-sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--border);
}

/* Version badge on the left, language + help icon buttons on the right. */
.dv-sidebar-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.dv-sidebar-footer-row .dv-version-badge {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dv-sidebar-utils {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.dv-sidebar-util {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.dv-sidebar-util:hover { background: var(--bg-hover); color: var(--text-primary); }
.dv-sidebar-util.dv-active { color: var(--accent); }
.dv-sidebar-util:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dv-sidebar-util svg:not(.dv-flag) { width: 16px; height: 16px; }
.dv-flag {
    display: block;
    width: 18px;
    height: 12px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.dv-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.dv-user-card:hover {
    background: var(--bg-hover);
}

.dv-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--c-374151), var(--c-4b5563));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.dv-user-info {
    flex: 1;
    min-width: 0;
}

.dv-user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dv-user-email {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dv-user-menu-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

/* API keys + sign out, the icon links at the end of the user card. */
.dv-user-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
}
/* The card's 12px gap is for avatar/text; the two icons sit closer. */
.dv-user-card-action + .dv-user-card-action { margin-left: -8px; }
.dv-user-card-action:hover .dv-user-menu-icon { color: var(--text-primary); }
.dv-user-card-action.dv-active .dv-user-menu-icon { color: var(--accent); }
.dv-user-card-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Reopens the sidebar. Shown only while the sidebar is closed (layout.templ),
   so it floats over the content and is drawn for that ground: white, hairline. */
.dv-sidebar-toggle {
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: calc(var(--z-modal) + 1);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--c-3f3f46);
    background-color: var(--white);
    border: 1px solid var(--c-e4e4e7);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.dv-sidebar-toggle svg { width: 18px; height: 18px; }

.dv-sidebar-toggle:hover {
    background-color: var(--c-f7f7f8);
}

/* MAIN LAYOUT CARD */
/* No frame around the card: the content runs edge to edge beside the
   sidebar. The black page background used to show as a 16px border around
   every page, which read as a bar between the page and whatever sits next to
   it (the agent dock). */
.dv-main-content-container,.main-content-container {
    flex: 1;
    padding: 0;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* Add a new class for the white card */
.dv-main-card,.main-card {
    background-color: white;
    /* Default text color for the white content card that wraps every
       workspace page's frontend output (layout.templ). Without it, content
       inherits `body { color: #ffffff }`, so any element the page does not
       explicitly re-color (a bare <table>, <p>, <div>) renders white on the
       white card — invisible. A hand-built d.3 tasks table hit exactly this:
       a visible dark <h1> above white-on-white rows. Elements that set their
       own color (buttons, .code-block, scaffolded `.<prefix>-root` tables)
       are unaffected; the dashboard/resource-status cards manage their own
       surfaces and colors, so they are unaffected too. */
    color: var(--c-2c3e50);
    padding: 16px;
    flex: 1;
    /* Makes the card fill available space */
}

/* Override main-card styling for resource status page */
.dv-main-card:has(.dv-resource-status-container),.main-card:has(.dv-resource-status-container) {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Dashboard uses a plain white canvas. */
.dv-main-card:has(.dv-dashboard-container),.main-card:has(.dv-dashboard-container) {
    background-color: var(--white);
    box-shadow: none;
}

.dv-main-wrapper,.main-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Footer */
.dv-footer {
    color: white;
    text-align: center;
    padding: 5px;
    margin-top: auto;
    font-size: 0.75rem;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .dv-main-wrapper,.main-wrapper {
        margin-left: 0 !important;
    }

    .dv-sidebar {
        width: 100%;
    }

    .dv-sidebar:not(.dv-open) {
        transform: translateX(-100%);
    }
}


/* Modal */
.dv-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
}

.dv-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black-a50);
    backdrop-filter: blur(2px);
}

.dv-modal-content {
    position: relative;
    background: white;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px var(--black-a10);
    z-index: calc(var(--z-modal) + 1);
}

.dv-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--c-e5e7eb);
}

.dv-modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--c-111827);
}

.dv-modal-body {
    padding: 1.5rem;
}

.dv-modal-close {
    border: none;
    background-color: white;
    border-radius: 2px;
    padding: 2px;
    cursor: pointer;
}

.dv-modal-close:hover {
    background-color: var(--bg-light);
}

/* dv.dialog — alert/confirm/prompt replacements (core/dialog.js) */
.dv-dialog .dv-modal-content { max-width: 480px; }
.dv-dialog-message { margin: 0; white-space: pre-wrap; line-height: 1.5; color: var(--c-111827); }
.dv-dialog-input {
    display: block; width: 100%; box-sizing: border-box; margin-top: 1rem;
    padding: 0.55rem 0.75rem; border: 1px solid var(--c-e5e7eb); border-radius: 6px;
    font-size: 0.95rem;
}
.dv-dialog-actions {
    display: flex; justify-content: flex-end; gap: 0.5rem;
    padding: 0 1.5rem 1.5rem;
}
.dv-dialog-actions .dv-btn { margin: 0; }
.dv-btn--danger { background-color: var(--c-cc3333, #cc3333); color: white; }
.dv-btn--danger:hover { background-color: #b02a2a; }

/* Language Options */
.dv-language-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dv-language-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid var(--c-e5e7eb);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
}

.dv-language-option:hover {
    border-color: var(--c-3b82f6);
    background-color: #eff6ff;
}

.dv-language-option[data-active="true"] {
    border-color: var(--c-3b82f6);
    background-color: var(--c-dbeafe);
}


/* ========================================
   Resource Status Overview Page
   ======================================== */

.dv-resource-status-container {
    padding: 2rem;
    max-width: 100%;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    background: var(--black);
    min-height: 100vh;
}

.dv-resource-status-header {
    margin-bottom: 2rem;
}

.dv-resource-status-header h1 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 2rem;
    font-weight: 600;
    color: var(--white);
    margin: 0 0 0.5rem 0;
}

.dv-resource-status-subtitle {
    color: var(--c-a0a0a0);
    font-size: 1rem;
    margin: 0;
}

/* Status Summary Grid */
.dv-status-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 1200px) {
    .dv-status-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dv-status-summary-grid {
        grid-template-columns: 1fr;
    }
}

.dv-status-card {
    background: linear-gradient(135deg, var(--c-0a0a0a) 0%, var(--c-141414) 100%);
    border: 1px solid var(--c-1f1f1f);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px var(--black-a30);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.dv-status-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.dv-status-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px var(--black-a50);
    border-color: currentColor;
}

.dv-status-card:hover::before {
    opacity: 1;
}

.dv-status-card:active {
    transform: translateY(-2px);
}

.dv-status-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s;
}

.dv-status-card:hover .dv-status-card-icon {
    transform: scale(1.1);
}

.dv-status-card-icon .dv-icon {
    width: 28px;
    height: 28px;
}

.dv-status-card--total {
    color: var(--c-3b82f6);
}

.dv-status-card--total .dv-status-card-icon {
    background: var(--c-3b82f6-a15);
    color: var(--c-3b82f6);
}

.dv-status-card--active {
    color: var(--c-10b981);
}

.dv-status-card--active .dv-status-card-icon {
    background: var(--c-10b981-a15);
    color: var(--c-10b981);
}

.dv-status-card--warning {
    color: var(--accent);
}

.dv-status-card--warning .dv-status-card-icon {
    background: var(--accent-a15);
    color: var(--accent);
}

.dv-status-card--deleted {
    color: var(--c-6b7280);
}

.dv-status-card--deleted .dv-status-card-icon {
    background: rgba(107, 114, 128, 0.15);
    color: var(--c-6b7280);
}

.dv-status-card-content {
    flex: 1;
}

.dv-status-card-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.dv-status-card-label {
    font-size: 0.875rem;
    color: var(--c-a0a0a0);
    font-weight: 500;
}

/* Alert Boxes */
.dv-alert {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.dv-alert .dv-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 0.125rem;
}

.dv-alert--warning {
    background: var(--accent-a10);
    border: 1px solid var(--accent-a30);
    color: var(--white);
}

.dv-alert--warning .dv-icon {
    color: var(--accent);
}

.dv-alert strong {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--white);
}

.dv-alert p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--c-a0a0a0);
}

/* Resource Sections */
.dv-resource-section {
    margin-bottom: 3rem;
}

.dv-resource-section-header {
    margin-bottom: 1.5rem;
}

.dv-resource-section h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
    margin: 0 0 1rem 0;
}

/* Filter Controls */
.dv-filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--c-0a0a0a);
    border-radius: 12px;
    border: 1px solid var(--c-1f1f1f);
}

.dv-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 180px;
}

.dv-filter-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c-a0a0a0);
}

.dv-filter-group label .dv-icon {
    width: 16px;
    height: 16px;
}

.dv-filter-select {
    padding: 0.5rem 0.75rem;
    background: var(--c-141414);
    border: 1px solid var(--c-1f1f1f);
    border-radius: 8px;
    color: var(--white);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dv-filter-select:hover {
    border-color: var(--accent);
    background: var(--c-1a1a1a);
}

.dv-filter-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-a10);
}

.dv-btn,.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dv-btn--secondary {
    background: var(--c-141414);
    color: var(--white);
    border: 1px solid var(--c-1f1f1f);
}

.dv-btn--secondary:hover {
    background: var(--c-1a1a1a);
    border-color: var(--accent);
}

.dv-btn--sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

.dv-btn .dv-icon--sm,.btn .dv-icon--sm {
    width: 14px;
    height: 14px;
}


.dv-resource-section h2 .dv-icon {
    width: 24px;
    height: 24px;
    color: var(--accent);
}

.dv-icon--success {
    color: var(--c-10b981);
}

.dv-icon--warning {
    color: var(--accent);
}

.dv-icon--muted {
    color: var(--c-6b7280);
}

.dv-resource-section--warning {
    padding: 1.5rem;
    background: var(--accent-a10);
    border-radius: 12px;
    border: 1px solid var(--accent-a30);
}

.dv-resource-section--muted {
    opacity: 0.8;
}

/* Resource Table */
.dv-table-container {
    background: var(--c-0a0a0a);
    border-radius: 16px;
    border: 1px solid var(--c-1f1f1f);
    overflow-x: auto;
    overflow-y: auto;
    box-shadow: 0 8px 16px var(--black-a50);
    width: 100%;
    max-width: 100%;
    max-height: 600px;
    position: relative;
    scrollbar-width: auto;
    scrollbar-color: var(--accent) var(--c-141414);
}

/* Scrollbar styling for better visibility */
.dv-table-container::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

.dv-table-container::-webkit-scrollbar-track {
    background: var(--c-141414);
    border-radius: 0 0 16px 16px;
}

.dv-table-container::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 6px;
    border: 2px solid var(--c-141414);
}

.dv-table-container::-webkit-scrollbar-thumb:hover {
    background: var(--c-ff7a1a);
}

/* Scrollbar corner styling */
.dv-table-container::-webkit-scrollbar-corner {
    background: var(--c-141414);
}

.dv-resource-table {
    min-width: 100%;
    width: max-content;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

.dv-resource-table thead {
    background: linear-gradient(135deg, var(--accent) 0%, var(--c-cc5200) 100%);
    border-bottom: none;
}

.dv-resource-table th {
    padding: 0.5rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    user-select: none;
    white-space: nowrap;
}

.dv-resource-table--sortable th[data-sort] {
    padding: 0;
}

.dv-resource-table--sortable th[data-sort]:hover {
    background: var(--white-a15);
}

.dv-resource-table .dv-sort-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 1rem;
    background: none;
    border: none;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.dv-resource-table .dv-sort-button:hover {
    background: var(--white-a15);
}

.dv-resource-table .dv-sort-button:focus {
    outline: 2px solid var(--white);
    outline-offset: -2px;
    background: rgba(255, 255, 255, 0.2);
}

.dv-resource-table th .dv-sort-icon {
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.15s;
    color: rgba(255, 255, 255, 0.7);
}

.dv-resource-table th[aria-sort="ascending"] .dv-sort-icon,
.dv-resource-table th[aria-sort="descending"] .dv-sort-icon {
    color: var(--white);
}

.dv-resource-table tbody tr {
    border-bottom: 1px solid var(--c-1f1f1f);
    transition: all 0.2s;
    background: var(--c-0a0a0a);
}

.dv-resource-table tbody tr:last-child {
    border-bottom: none;
}

.dv-resource-table tbody tr:hover {
    background: linear-gradient(90deg, var(--c-141414) 0%, var(--c-0a0a0a) 100%);
    box-shadow: inset 4px 0 0 var(--accent);
}

.dv-resource-table tbody tr.dv-row--active {
    background: linear-gradient(90deg, var(--c-10b981-a15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-left: 4px solid var(--c-10b981);
}

.dv-resource-table tbody tr.dv-row--active:hover {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.1) 100%);
    box-shadow: inset 4px 0 0 var(--c-10b981), 0 0 0 1px rgba(16, 185, 129, 0.3);
}

.dv-resource-table tbody tr.dv-row--warning {
    background: linear-gradient(90deg, var(--accent-a15) 0%, var(--accent-a05) 100%);
    border-left: 4px solid var(--accent);
}

.dv-resource-table tbody tr.dv-row--warning:hover {
    background: linear-gradient(90deg, var(--accent-a25) 0%, var(--accent-a10) 100%);
    box-shadow: inset 4px 0 0 var(--accent), 0 0 0 1px var(--accent-a30);
}

.dv-resource-table tbody tr.dv-row--muted {
    opacity: 0.65;
    background: linear-gradient(90deg, #0f0f0f 0%, var(--c-0a0a0a) 100%);
    border-left: 4px solid var(--c-6b7280);
}

.dv-resource-table tbody tr.dv-row--muted:hover {
    opacity: 0.85;
    box-shadow: inset 4px 0 0 var(--c-6b7280);
}

.dv-resource-table td {
    padding: 1.25rem 1rem;
    font-size: 0.875rem;
    color: var(--white);
    vertical-align: middle;
    min-width: 120px;
    white-space: nowrap;
}

.dv-resource-table .dv-resource-id {
    font-family: 'Courier New', 'Monaco', monospace;
    font-size: 0.8125rem;
    background: linear-gradient(135deg, var(--c-1f1f1f) 0%, var(--c-141414) 100%);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    color: var(--accent);
    font-weight: 600;
    display: inline-block;
    border: 1px solid var(--c-2a2a2a);
}

.dv-resource-table .dv-resource-description {
    color: var(--c-a0a0a0);
    max-width: 400px;
    line-height: 1.6;
}

.dv-resource-table .dv-timestamp {
    font-size: 0.8125rem;
    color: var(--c-a0a0a0);
    cursor: help;
    border-bottom: 1px dotted var(--c-666666);
    transition: all 0.2s;
}

.dv-resource-table .dv-timestamp:hover {
    color: var(--white);
    border-bottom-color: var(--c-a0a0a0);
    background: var(--c-141414);
    padding: 2px 4px;
    border-radius: 3px;
}

.dv-resource-table .dv-text-muted,.dv-resource-table .text-muted {
    color: var(--c-666666);
    font-style: italic;
    font-size: 0.8125rem;
}

/* Icon Sizes */
.dv-icon--xs {
    width: 12px;
    height: 12px;
}

.dv-icon--sm {
    width: 14px;
    height: 14px;
}

.dv-icon--md {
    width: 18px;
    height: 18px;
}

.dv-icon--large {
    width: 48px;
    height: 48px;
}

/* Badges */
.dv-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.dv-badge--primary {
    background: linear-gradient(135deg, var(--c-3b82f6-a25) 0%, var(--c-3b82f6-a15) 100%);
    color: var(--c-60a5fa);
    border-color: var(--c-3b82f6-a40);
}

.dv-badge--success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(34, 197, 94, 0.15) 100%);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.4);
}

.dv-badge--warning {
    background: linear-gradient(135deg, var(--accent-a25) 0%, var(--accent-a15) 100%);
    color: var(--c-ff7a1a);
    border-color: rgba(255, 102, 0, 0.4);
}

.dv-badge--muted {
    background: linear-gradient(135deg, rgba(160, 160, 160, 0.25) 0%, rgba(160, 160, 160, 0.15) 100%);
    color: var(--c-a0a0a0);
    border-color: rgba(160, 160, 160, 0.4);
}

.dv-badge--info {
    background: linear-gradient(135deg, var(--c-3b82f6-a25) 0%, var(--c-3b82f6-a15) 100%);
    color: var(--c-60a5fa);
    border-color: var(--c-3b82f6-a40);
}

/* Badge icons should be clearly visible */
.dv-badge .dv-icon {
    color: inherit;
    opacity: 1;
}

/* Small tag badges for inline display */
.dv-tag-badge-sm {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    background: var(--accent);
    color: var(--white);
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 3px;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

.dv-resource-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Buttons */
.dv-btn,.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.dv-btn--sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.dv-btn--secondary {
    background: var(--c-f3f4f6);
    color: var(--c-374151);
}

.dv-btn--secondary:hover {
    background: var(--c-e5e7eb);
}

.dv-btn .dv-icon--sm,.btn .dv-icon--sm {
    width: 14px;
    height: 14px;
}

/* Empty State */
.dv-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--c-a0a0a0);
    background: var(--c-0a0a0a);
    border-radius: 12px;
    border: 1px solid var(--c-1f1f1f);
}

.dv-empty-state .dv-icon--large {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    color: var(--c-666666);
}

.dv-empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
    margin: 0 0 0.5rem 0;
}

.dv-empty-state p {
    font-size: 0.875rem;
    margin: 0;
    color: var(--c-a0a0a0);
}

/* ========================================
   Error Message Component
   ======================================== */

.dv-error-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 2rem;
}

.dv-error-box {
    text-align: center;
    max-width: 500px;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--c-fecaca);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.dv-error-box .dv-icon--error {
    width: 64px;
    height: 64px;
    color: var(--c-dc2626);
    margin: 0 auto 1.5rem;
}

.dv-error-box h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 1rem 0;
}

.dv-error-box p {
    font-size: 1rem;
    color: var(--c-6b7280);
    margin: 0;
    line-height: 1.6;
}

/* ========================================
   Loading Indicator & Spinner
   ======================================== */

#loading-indicator {
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    background: var(--c-3b82f6);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    z-index: var(--z-toast);
    box-shadow: 0 2px 8px var(--black-a15);
    animation: fadeIn 0.2s ease-in;
}

#loading-indicator.dv-show {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dv-icon--spin {
    animation: spin 1s linear infinite;
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Meter: a 7px pill track with a tiered fill. Shared by the dashboard's token
   tile and workspace cards and by the admin dashboard; everything else of the
   dashboard lives in css/pages/dashboard.css (DESIGN.md §10). */
.dv-metric-meter {
    height: 7px;
    border-radius: 99px;
    background: var(--c-f1f1f2);
    overflow: hidden;
    margin: 3px 0 1px;
}

.dv-metric-meter-fill {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--c-a1a1aa); /* grey while there is comfortable headroom */
    transition: width 0.5s ease, background 0.3s ease;
}

/* Warn (>=80%) orange, then error red at the ceiling — the existing status
   colors, no new ones. */
.dv-metric-meter-fill--warn { background: var(--accent); }
.dv-metric-meter-fill--over { background: var(--c-b91c1c); }

/* Dashboard Command Bar.
   Light surface ("chat bar") sitting on the black dashboard canvas, full
   width to match the title hero above it. */
.dv-command-bar {
    --cmdbar-surface: var(--white);
    --cmdbar-surface-hover: var(--c-f4f4f5);
    --cmdbar-border: var(--c-e4e4e7);
    --cmdbar-text: var(--c-18181b);
    --cmdbar-text-muted: var(--c-a1a1aa);
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.dv-command-bar-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.dv-command-bar-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--cmdbar-text-muted);
    pointer-events: none;
}

.dv-command-bar-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--cmdbar-text);
    background: var(--cmdbar-surface);
    border: 1px solid var(--cmdbar-border);
    border-radius: 12px;
    outline: none;
    box-shadow: 0 2px 10px rgba(20, 15, 10, 0.05);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dv-command-bar-input::placeholder {
    color: var(--cmdbar-text-muted);
}

.dv-command-bar-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-a15);
}

/* Sidebar search — a compact trigger (styled like a field) that opens the
   wide search dialog. The real input lives in the dialog, not here. */
.dv-sidebar-search {
    padding: 12px 12px 0;
}

.dv-sidebar-search-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.dv-sidebar-search-trigger:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.dv-sidebar-search-trigger-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.dv-sidebar-search-trigger-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv-sidebar-search-trigger-kbd {
    flex-shrink: 0;
    padding: 0.05rem 0.35rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 5px;
}

/* Search dialog — wide command palette opened from the sidebar trigger. Extends
   the base .modal (display:none until .is-open), but anchored near the top. */
.dv-search-modal {
    align-items: flex-start;
    justify-content: center;
}

.dv-search-modal.dv-is-open {
    display: flex;
}

/* Token-limit dialog — extends the base .modal (display:none until .is-open),
   centered. Buttons follow the brand rules: exactly one orange primary. */
.dv-dash-limit-modal.dv-is-open { display: flex; }

/* Wider than the base .modal (400px) so the group picker and the two threshold
   labels sit on one line each. Kept in step with #wfd-limit-modal .wfd-modal in
   the list-workflows workspace, so both quota dialogs are the same size. */
/* overflow:visible overrides the base .modal-content clip so the group dropdown
   can extend past the dialog's edge instead of being cut off; max-height:none
   stops the dialog itself from scrolling the menu out of view. */
.dv-dash-limit-modal .dv-modal-content {
    max-width: 560px;
    overflow: visible;
    max-height: none;
}

.dv-dash-limit-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-71717a);
    margin-bottom: 6px;
}

.dv-dash-limit-input {
    width: 100%;
    /* Box metrics kept identical to .dash-limit-select-toggle below, so the two
       controls in this dialog are the same height and shape. */
    padding: 9px 11px;
    border: 1px solid var(--c-d4d4d8);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    color: var(--c-18181b);
}

.dv-dash-limit-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Scope explainer at the top of the dialog: what "global" means versus a
   workspace's own limit. Set off from the fields by a tinted panel so it reads
   as context rather than as another field hint. */
.dv-dash-limit-note {
    font-size: 0.78rem;
    color: var(--c-52525b);
    line-height: 1.5;
    margin: 0 0 1.1rem;
    padding: 0.6rem 0.7rem;
    background: var(--c-fafafa);
    border-left: 2px solid var(--accent);
    border-radius: 0 4px 4px 0;
}

.dv-dash-limit-hint {
    font-size: 0.78rem;
    color: var(--c-71717a);
    margin: 0.45rem 0 1rem;
    line-height: 1.45;
}

.dv-dash-limit-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.85rem;
    color: var(--c-3f3f46);
    margin-bottom: 0.6rem;
    cursor: pointer;
}

.dv-dash-limit-check input { margin-top: 2px; accent-color: var(--accent); }

/* Recipient-group picker: a multi-select dropdown. Collapsed it shows the
   selection; open it overlays a checkbox menu, so the dialog does not resize as
   groups are added and many groups cannot push the actions off-screen. */
.dv-dash-limit-select {
    position: relative;
    margin-bottom: 0.45rem;
}

.dv-dash-limit-select-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    width: 100%;
    padding: 9px 11px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--c-18181b);
    text-align: left;
    background: white;
    border: 1px solid var(--c-d4d4d8);
    border-radius: 6px;
    cursor: pointer;
}

/* Clip a long selection instead of wrapping, so the button keeps one line and
   the dialog never resizes with the selection. */
.dv-dash-limit-select-toggle > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv-dash-limit-select-toggle:hover { border-color: var(--c-a1a1aa); }
.dv-dash-limit-select.dv-is-open .dv-dash-limit-select-toggle { border-color: var(--accent); }

.dv-dash-limit-select-caret {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--c-71717a);
    transition: transform 0.15s ease;
}

.dv-dash-limit-select.dv-is-open .dv-dash-limit-select-caret { transform: rotate(180deg); }

/* Opens downward by default; .drops-up flips it above the button when the
   viewport would clip it (set by the dialog script on open). */
.dv-dash-limit-groups {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: calc(var(--z-modal) + 2);
    max-height: 11rem;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--c-e4e4e7);
    border-radius: 6px;
    padding: 0.3rem;
    box-shadow: 0 8px 20px var(--black-a12);
}

.dv-dash-limit-select.dv-is-open .dv-dash-limit-groups { display: block; }

.dv-dash-limit-groups.dv-drops-up {
    top: auto;
    bottom: calc(100% + 4px);
    box-shadow: 0 -8px 20px var(--black-a12);
}

.dv-dash-limit-group {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.85rem;
    color: var(--c-3f3f46);
    padding: 0.35rem 0.45rem;
    border-radius: 4px;
    cursor: pointer;
}

.dv-dash-limit-group:hover { background: var(--c-fafafa); }

.dv-dash-limit-group input { accent-color: var(--accent); }

.dv-dash-limit-error {
    font-size: 0.8rem;
    color: var(--c-b91c1c);
    margin: 0 0 0.75rem;
}

.dv-dash-limit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 1.25rem;
}

.dv-dash-limit-btn {
    padding: 0.5rem 0.95rem;
    border-radius: 10px;
    border: 1px solid var(--c-e4e4e7);
    background: var(--white);
    color: var(--c-3f3f46);
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.dv-dash-limit-btn:hover { background: var(--c-f7f7f8); }

.dv-dash-limit-btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
    box-shadow: 0 1px 2px var(--accent-a35);
}

.dv-dash-limit-btn--primary:hover { background: var(--c-e65c00); border-color: var(--c-e65c00); }
.dv-dash-limit-btn--primary:disabled { opacity: 0.6; cursor: default; }

.dv-search-modal-content {
    position: relative;
    z-index: calc(var(--z-modal) + 1);
    width: 90%;
    max-width: 640px;
    margin-top: 12vh;
}

.dv-command-bar--modal {
    width: 100%;
}

.dv-command-bar--modal .dv-command-bar-input {
    font-size: 1.05rem;
    padding: 1.1rem 1.1rem 1.1rem 3rem;
}

.dv-command-bar--modal .dv-command-bar-results {
    max-height: 60vh;
}

.dv-command-bar-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 20;
    background: var(--cmdbar-surface);
    border: 1px solid var(--cmdbar-border);
    border-radius: 12px;
    padding: 0.35rem;
    box-shadow: 0 12px 40px rgba(20, 15, 10, 0.12);
    max-height: 360px;
    overflow-y: auto;
}

.dv-command-bar-group-label {
    padding: 0.4rem 0.75rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cmdbar-text-muted);
}

.dv-command-bar-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    color: var(--cmdbar-text);
}

.dv-command-bar-row.dv-active {
    background: var(--cmdbar-surface-hover);
}

.dv-command-bar-row-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--cmdbar-text-muted);
}

.dv-command-bar-row-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv-command-bar-row-label em {
    color: var(--accent);
    font-style: normal;
    font-weight: 600;
}

.dv-command-bar-row-meta {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--cmdbar-text-muted);
}

.dv-command-bar-row-hint {
    flex-shrink: 0;
    margin-left: 0.5rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    color: var(--cmdbar-text);
    background: var(--cmdbar-surface-hover);
    border: 1px solid var(--cmdbar-border);
    border-radius: 5px;
}

/* Keyboard hint footer at the bottom of the results dropdown. */
.dv-command-bar-footer {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.4rem 0.6rem 0.2rem;
    margin-top: 0.2rem;
    border-top: 1px solid var(--cmdbar-border);
    font-size: 0.7rem;
    color: var(--cmdbar-text-muted);
}

.dv-command-bar-key {
    display: inline-block;
    min-width: 1.1rem;
    margin-right: 0.25rem;
    padding: 0.05rem 0.35rem;
    font-family: inherit;
    font-size: 0.68rem;
    line-height: 1.4;
    text-align: center;
    color: var(--cmdbar-text);
    background: var(--cmdbar-surface-hover);
    border: 1px solid var(--cmdbar-border);
    border-radius: 5px;
}

.dv-command-bar-row-ask {
    border-bottom: 1px solid var(--cmdbar-border);
    margin-bottom: 0.25rem;
    padding-bottom: 0.7rem;
}

/* ===================================================================
   Health dashboard (per-workspace uptime / latency / error rate)
   Follows DESIGN.md: hairline cards, status as dots (never pill-floods),
   orange accent reserved for the one active state, Geist + Geist Mono.
   =================================================================== */
/* Lives on the admin page's health tab: the section title on the left, the
   window toggle + Grafana link on the right. */
.dv-health-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.dv-health-head .dv-admin-section-head { margin-bottom: 0; }
.dv-health-head-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.dv-health-window {
    font-size: 12.5px;
    color: var(--c-9a9aa2);
    font-variant-numeric: tabular-nums;
}
.dv-health-grafana-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--c-52525b);
    text-decoration: none;
    padding: 6px 11px;
    border: 1px solid var(--c-e4e4e7);
    border-radius: 9px;
    transition: background .15s, border-color .15s;
}
.dv-health-grafana-link:hover {
    background: var(--c-f7f7f8);
    border-color: var(--c-ddd8d3);
}
.dv-health-grafana-icon {
    width: 14px;
    height: 14px;
}

/* Time-range toggle (tabs) */
.dv-health-tabs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--c-f4f4f5);
    border: 1px solid var(--c-ececee);
    border-radius: 9px;
    padding: 2px;
}
.dv-health-tab {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--c-71717a);
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 7px;
    font-variant-numeric: tabular-nums;
    transition: background .15s, color .15s;
}
.dv-health-tab:hover {
    color: var(--c-18181b);
}
.dv-health-tab--active {
    background: var(--white);
    color: var(--c-18181b);
    box-shadow: 0 1px 2px var(--c-140f0a-a06);
}

/* Header stat strip */
.dv-health-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
.dv-health-stat {
    background: var(--white);
    border: 1px solid var(--c-ececee);
    border-radius: 14px;
    padding: 16px 18px;
}
.dv-health-stat-label {
    font-size: 12px;
    color: var(--c-71717a);
    margin-bottom: 8px;
}
.dv-health-stat-value {
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--c-18181b);
    font-variant-numeric: tabular-nums;
}

/* Workspace table */
.dv-health-table-wrap {
    background: var(--white);
    border: 1px solid var(--c-ececee);
    border-radius: 14px;
    overflow: hidden;
}
.dv-health-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.dv-health-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-9a9aa2);
    background: var(--c-fcfcfd);
    padding: 11px 16px;
    border-bottom: 1px solid var(--c-f0f0f1);
    white-space: nowrap;
}
.dv-health-table th.dv-health-th-num,
.dv-health-table td.dv-health-td-num {
    text-align: right;
}

/* Hover hints on the column headers. Reuses the dashboard's dark-pill tooltip
   style; positioned BELOW the header (the table card clips overflow, so a
   tooltip above would be cut off) and anchored to whichever side keeps a wide
   tooltip inside the card. */
.dv-health-table th[data-tip] {
    position: relative;
    cursor: help;
}
.dv-health-table th[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 210px;
    background: var(--c-18181b);
    color: var(--c-fafafa);
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
    white-space: normal; /* the header row is nowrap; let the tooltip wrap */
    padding: 9px 11px;
    border-radius: 9px;
    box-shadow: 0 8px 24px var(--black-a20);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    z-index: 60;
    pointer-events: none;
}
/* Right-aligned (numeric / trend) headers sit near the card's right edge, so
   anchor their tooltip to the right so it extends inward, not off-card. */
.dv-health-table th.dv-health-th-num[data-tip]::after,
.dv-health-table th.dv-health-th-spark[data-tip]::after {
    left: auto;
    right: 0;
}
.dv-health-table th[data-tip]:hover::after {
    opacity: 1;
    visibility: visible;
}
.dv-health-table th.dv-health-th-spark { width: 120px; }
.dv-health-table tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--c-f4f4f5);
    color: var(--c-52525b);
    vertical-align: middle;
}
.dv-health-table tbody tr:last-child td { border-bottom: none; }
.dv-health-table tbody tr:hover td { background: var(--c-fcfaf9); }
.dv-health-mono {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.dv-health-td-ws { white-space: nowrap; }
.dv-health-ws-name {
    display: block;
    font-weight: 600;
    color: var(--c-18181b);
}
.dv-health-ws-id {
    display: block;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--c-a1a1aa);
    margin-top: 1px;
}
.dv-health-ws-socket {
    display: block;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10.5px;
    color: #B4B4BC;
    margin-top: 2px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The catalogue list inside a dialog: a table that may be longer than the
   dialog, so it scrolls rather than pushing the actions off screen. */
.dv-admin-catalog { max-height: 22rem; overflow-y: auto; margin-top: 0.5rem; }

/* The connection details a provider reads off and hands over: a wide,
   selectable field beside its copy button. */
.dv-admin-connect-row { display: flex; gap: 0.5rem; align-items: center; }
.dv-admin-connect-row .dv-admin-input { flex: 1 1 auto; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.82rem; }

/* Status as an 8px dot + label (never a colored pill) */
.dv-health-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dv-health-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.dv-health-dot--up { background: var(--c-16a34a); }
.dv-health-dot--degraded { background: var(--c-f59e0b); }
.dv-health-dot--down { background: var(--c-ef4444); }
.dv-health-dot--idle {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--c-d4d4d8);
}
.dv-health-status-label {
    font-size: 13px;
    color: var(--c-3f3f46);
}
.dv-health-source {
    font-size: 10.5px;
    color: var(--c-a1a1aa);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: 2px;
}

/* Inline latency/throughput sparkline */
.dv-health-spark {
    width: 100px;
    height: 26px;
    display: block;
}
.dv-health-spark-line {
    fill: none;
    stroke: var(--c-18181b);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}
.dv-health-spark-area {
    fill: rgba(24, 24, 27, 0.06);
    stroke: none;
}

/* Empty / scaffold state */
.dv-health-empty {
    text-align: center;
    padding: 64px 24px;
    color: var(--c-71717a);
}
.dv-health-empty-icon {
    width: 40px;
    height: 40px;
    color: var(--c-c4c4cc);
    margin-bottom: 12px;
}
.dv-health-empty h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-18181b);
    margin: 0 0 6px;
}
.dv-health-empty p {
    font-size: 13.5px;
    margin: 0;
}

@media (max-width: 720px) {
    .dv-health-head { flex-wrap: wrap; align-items: flex-start; }
    .dv-health-stats { grid-template-columns: repeat(2, 1fr); }
    .dv-health-th-spark, .dv-health-td-spark { display: none; }
}

/* ===================================================================
   Admin overview (/admin) — platform token limits & consumption
   Same card language as the health dashboard: hairline cards, radius 14,
   numbers as the hero. Meters reuse .metric-meter* from the dashboard so
   the grey/orange/red quota semantics are defined in exactly one place.
   =================================================================== */
.dv-admin-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 8px 0 40px;
}
.dv-admin-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 22px;
}
.dv-admin-eyebrow {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--accent);
    margin-bottom: 4px;
}
.dv-admin-title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--c-18181b);
    margin: 0;
}

/* Header stat tiles */
.dv-admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
.dv-admin-stat {
    background: var(--white);
    border: 1px solid var(--c-ececee);
    border-radius: 14px;
    padding: 16px 18px;
}
.dv-admin-stat-label {
    font-size: 12px;
    color: var(--c-71717a);
    margin-bottom: 8px;
}
/* Proportional figures on purpose: these are standalone display numbers,
   not a column that has to align vertically. */
.dv-admin-stat-value {
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--c-1a1a1a);
    line-height: 1.05;
}
/* Reserved for the workspaces-at-or-over-100% count, and only while it is not
   zero. The label beside it says what it is; the colour only draws the eye. */
.dv-admin-stat-value--alert { color: var(--accent); }
.dv-admin-stat-meter {
    margin: 10px 0 0;
}
.dv-admin-stat-sub {
    font-size: 12px;
    color: var(--c-9a9aa2);
    margin-top: 6px;
}

/* Operational warning (SMTP not configured) */
.dv-admin-banner {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: var(--c-fff9f4);
    border: 1px solid var(--c-fbddc9);
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-7c4a1e);
}
.dv-admin-banner-icon {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 1px;
}

/* Sections */
.dv-admin-section {
    background: var(--white);
    border: 1px solid var(--c-ececee);
    border-radius: 14px;
    padding: 18px 20px 20px;
    margin-bottom: 16px;
}
.dv-admin-section-head {
    margin-bottom: 16px;
}
/* Title/subtitle on the left, a status pill on the right (Git upstreams:
   the storage-encryption warning). */
.dv-admin-section-head--row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.dv-admin-section-warning { white-space: nowrap; margin-top: 0.25rem; margin-right: 0; }
.dv-admin-section-title {
    position: relative;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--c-18181b);
    margin: 0 0 4px;
    padding-left: 10px;
}
/* A short accent bar marks where a section starts, so the page has brand
   presence without any of its text going orange. */
.dv-admin-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
}
.dv-admin-section-sub {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--c-71717a);
    margin: 0;
    padding-left: 10px;
    max-width: 74ch;
}
.dv-admin-section-note {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--c-a1a1aa);
    margin: 14px 0 0;
    max-width: 74ch;
}
.dv-admin-section-empty {
    font-size: 13.5px;
    color: var(--c-71717a);
    margin: 0;
    padding: 18px 0;
}

/* Consumption by workspace — one horizontal bar per workspace */
.dv-admin-bars {
    display: flex;
    flex-direction: column;
}
.dv-admin-bar-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) minmax(120px, 2fr) minmax(150px, auto);
    align-items: center;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--c-f4f4f5);
}
.dv-admin-bar-row:last-child { border-bottom: none; }
/* Ghost: usage/limit rows for a workspace nobody deploys any more. Present
   but recessive — the badge, not the opacity, is what states it. */
.dv-admin-bar-row--ghost { opacity: 0.55; }
.dv-admin-bar-ws {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.dv-admin-bar-name {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-18181b);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.dv-admin-bar-name:hover { color: var(--accent); }
.dv-admin-badge {
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    color: var(--c-71717a);
    background: var(--c-f7f7f8);
    border: 1px solid var(--c-eeeef0);
    border-radius: 99px;
    padding: 3px 7px;
    white-space: nowrap;
}
.dv-admin-badge--warn { color: var(--c-7c4a1e); background: var(--c-fff9f4); border-color: var(--c-fbddc9); }
.dv-admin-badge--over { color: var(--c-b91c1c); background: var(--c-fdf2f2); border-color: var(--c-f3d3d3); }
.dv-admin-bar-meter { margin: 0; }
.dv-admin-bar-figures {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
    font-size: 12.5px;
    color: var(--c-71717a);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dv-admin-bar-used { color: var(--c-18181b); font-weight: 500; }
.dv-admin-bar-slash { color: var(--c-c4c4cc); }
.dv-admin-bar-pct {
    color: var(--c-52525b);
    min-width: 46px;
    text-align: right;
}

/* Chart range controls — segmented presets + a custom from/to form, as ONE
   cluster beside the section title. Both are ordinary links/inputs: the chart's
   window is part of the URL. On a narrow header the cluster wraps under the
   title; the form wraps under the presets before that. */
.dv-admin-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.dv-admin-seg {
    display: inline-flex;
    background: var(--c-f7f7f8);
    border: 1px solid var(--c-ececee);
    border-radius: 9px;
    padding: 2px;
}
.dv-admin-seg-item {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    color: var(--c-71717a);
    text-decoration: none;
    padding: 7px 11px;
    border-radius: 7px;
    white-space: nowrap;
}
.dv-admin-seg-item:hover { color: var(--c-18181b); }
.dv-admin-seg-item--active,
.dv-admin-seg-item--active:hover {
    color: var(--white);
    background: var(--accent);
}
/* A hairline rule, not a gap, separates the two halves of the cluster: they do
   the same job (choose a window) and belong in one control, but a click on a
   preset and a submit of the form are different gestures. */
.dv-admin-range-form {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-left: 10px;
    border-left: 1px solid var(--c-ececee);
}
.dv-admin-range-label {
    font-size: 12px;
    color: var(--c-71717a);
}
.dv-admin-range-input {
    font: inherit;
    font-size: 12px;
    color: var(--c-18181b);
    background: var(--white);
    border: 1px solid var(--c-ececee);
    border-radius: 8px;
    padding: 5px 7px;
    min-width: 0;
}
.dv-admin-range-input:focus {
    outline: none;
    border-color: var(--accent);
}
.dv-admin-range-apply {
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--c-18181b);
    background: var(--white);
    border: 1px solid var(--c-ececee);
    border-radius: 8px;
    padding: 5px 11px;
    cursor: pointer;
}
.dv-admin-range-apply:hover { border-color: #D9D9DE; }

/* Trend row: the line carries the shape of spend over the chosen window, the
   donut the month's split between consumers. Two thirds / one third — the
   line is the answer, the donut is the breakdown of it. */
.dv-admin-chart-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}
/* Both columns open with .admin-col-head, at the top of their own cell, which
   is what puts the donut's title on the same line as the chart's. The head is
   title block + (chart column only) the range cluster on one row; the cluster
   wraps underneath when the column gets too narrow for both. */
.dv-admin-col-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 16px;
}
.dv-admin-col-titles {
    flex: 1 1 240px;
    min-width: 0;
}
.dv-admin-chart-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
/* The donut column is the taller of the two (legend rows stack); the auto
   margins centre the plot in whatever is left under the header rather than
   leaving a hole beneath it. */
.dv-admin-chart {
    margin-top: auto;
    margin-bottom: auto;
}

/* Consumption over time — single-series line, geometry computed server-side */
.dv-admin-chart {
    padding-top: 8px;
}
.dv-admin-chart-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.dv-admin-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
/* The fill says nothing the line does not; it is there to give the line a body
   at a glance, which is why it is barely there. */
.dv-admin-line-area {
    fill: var(--accent);
    fill-opacity: 0.08;
    stroke: none;
}
/* Hollow markers: the surface colour inside, the series colour around. They sit
   ON the line without hiding it, and stay findable where the curve is flat. */
.dv-admin-line-dot {
    fill: var(--white);
    stroke: var(--accent);
    stroke-width: 2;
}
.dv-admin-line-base {
    stroke: var(--c-e4e4e7);
    stroke-width: 1;
}
/* Grid and value labels are reading aids: dotted, hairline, grey. Never the
   series colour — orange here would compete with the line it exists to serve. */
.dv-admin-line-grid {
    stroke: var(--c-e5e5e5);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}
.dv-admin-axis-label {
    font-size: 10px;
    fill: var(--c-a1a1aa);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
/* One full-height column per point: the marker is 7 units across, the thing
   you actually have to hit is a whole step wide. */
.dv-admin-line-hit { fill: transparent; }
.dv-admin-line-hit:hover { fill: var(--accent-a06); }
/* Values wear text colours, never the series colour — the mark is what carries
   identity here, the number only has to be readable. */
.dv-admin-point-label {
    font-size: 10.5px;
    font-weight: 500;
    fill: var(--c-52525b);
    pointer-events: none;
}
/* The insets match the SVG's own: 44 and 14 of 720 viewBox units, so the first
   and last day labels sit under the first and last point rather than under the
   value-axis gutter. */
.dv-admin-chart-axis {
    display: flex;
    justify-content: space-between;
    padding: 0 1.9% 0 6.1%;
    margin-top: 7px;
    font-size: 11px;
    color: var(--c-a1a1aa);
    font-variant-numeric: tabular-nums;
}

/* Share of consumption — month-scope donut beside the line */
.dv-admin-donut {
    min-width: 0;
    border-left: 1px solid var(--c-f4f4f5);
    padding-left: 24px;
}
.dv-admin-donut-svg {
    display: block;
    width: 100%;
    max-width: 168px;
    height: auto;
    margin: 0 auto 16px;
}
.dv-admin-donut-arc {
    fill: none;
    stroke-width: 24;
}
.dv-admin-donut-total {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.02em;
    fill: var(--c-1a1a1a);
    text-anchor: middle;
}
.dv-admin-donut-total-label {
    font-size: 8.5px;
    fill: var(--c-9a9aa2);
    text-anchor: middle;
}
.dv-admin-donut-legend {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0;
}
.dv-admin-donut-item {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.dv-admin-donut-swatch {
    width: 9px;
    height: 9px;
    border-radius: 2px;
}
.dv-admin-donut-name {
    color: var(--c-18181b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dv-admin-donut-tokens {
    color: var(--c-71717a);
    font-variant-numeric: tabular-nums;
}
.dv-admin-donut-pct {
    color: var(--c-52525b);
    font-variant-numeric: tabular-nums;
    min-width: 38px;
    text-align: right;
}

/* Tabs — the page's three sections. Links, not buttons: each tab is its own
   address (?tab=…), so a view is shareable and only the active panel is ever
   rendered. Same accent as the range presets, because both answer "which view
   am I looking at". */
.dv-admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    background: var(--c-f7f7f8);
    border: 1px solid var(--c-ececee);
    border-radius: 11px;
    padding: 3px;
    margin-bottom: 20px;
}
.dv-admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: var(--c-71717a);
    text-decoration: none;
    padding: 9px 14px;
    border-radius: 8px;
    white-space: nowrap;
}
.dv-admin-tab:hover { color: var(--c-18181b); }
.dv-admin-tab--active,
.dv-admin-tab--active:hover {
    color: var(--white);
    background: var(--accent);
}
.dv-admin-tab-icon { width: 15px; height: 15px; }

/* Systems by category — horizontal bars. Bars, not a ring: there are more
   categories than the validated palette has hues, and on an audit page the ones
   a donut would fold into "Other" are exactly the ones somebody is looking for. */
.dv-admin-catbars {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.dv-admin-catbar {
    display: grid;
    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) 34px;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
}
.dv-admin-catbar-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--c-18181b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dv-admin-catbar-track {
    height: 8px;
    border-radius: 99px;
    background: var(--c-f4f4f5);
    overflow: hidden;
}
.dv-admin-catbar-fill {
    display: block;
    height: 100%;
    border-radius: 99px;
}
.dv-admin-catbar-count {
    color: var(--c-52525b);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Platform-wide system list — the column beside the category chart. */
.dv-admin-syslist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    max-height: 340px;
    overflow-y: auto;
}
/* Two rows per entry: identity and metadata on the first, the address on its
   own line below. Squeezing the host into a column beside a direction pill and
   a usage count is what broke it into "crm.partn / er.exampl / e" — a hostname
   an admin is going to compare against a firewall rule must not be hyphenated
   by the layout. */
.dv-admin-sysitem {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 4px 8px;
    font-size: 12px;
}
.dv-admin-sysitem .dv-admin-donut-swatch { position: relative; top: 1px; }
.dv-admin-sysitem-main {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 7px;
}
.dv-admin-sysitem-name { color: var(--c-18181b); }
/* The address always starts its own line. */
.dv-admin-sysitem-target {
    flex: 1 0 100%;
    color: var(--c-71717a);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    overflow-wrap: anywhere;
}
.dv-admin-sysitem-usage {
    color: var(--c-a1a1aa);
    white-space: nowrap;
}

/* The cross-workspace roll-up. Same findings asked the other way round, so it
   sits under the per-workspace body and is visibly subordinate to it: recessive
   surface, a small eyebrow instead of a section title, h3-sized headings. */
.dv-admin-rollup {
    background: var(--c-fcfcfd);
}
.dv-admin-rollup-head {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--c-a1a1aa);
    margin-bottom: 16px;
}
.dv-admin-rollup .dv-admin-section-title { font-size: 13px; }
/* Even columns here, unlike the token tab's 2:1 — the bars and the system list
   are two summaries of equal standing, and the list carries three pieces of
   metadata per row that a third of the width cannot hold. */
.dv-admin-rollup .dv-admin-chart-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Per-workspace blocks. <details>, so the browser owns open/closed state and
   the page ships no script for it. */
.dv-admin-ws-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dv-admin-ws {
    border: 1px solid var(--c-ececee);
    border-radius: 12px;
    padding: 4px 14px 6px;
}
.dv-admin-ws-head,
.dv-admin-local-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
    cursor: pointer;
    list-style: none;
}
.dv-admin-ws-head::-webkit-details-marker,
.dv-admin-local-head::-webkit-details-marker { display: none; }
/* A rotating caret rather than the platform triangle, so both levels of
   disclosure look like the same control. */
.dv-admin-ws-head::before,
.dv-admin-local-head::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 4.5px solid var(--c-a1a1aa);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.12s ease;
}
details[open] > .dv-admin-ws-head::before,
details[open] > .dv-admin-local-head::before { transform: rotate(90deg); }
.dv-admin-ws-name {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-18181b);
}
.dv-admin-conn-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--c-f4f4f5);
}
/* The direction column is sized for the LONGEST label in any language —
   "⇅ Lesen/Schreiben" is half again as wide as "⇅ read/write", and a column
   fitted to English would have the German pill running into the node label.
   The node-type label leads (it is the row's identity), then a compact "3×"
   count, the workflows it appears in, and finally the targets and credential
   keys stacked in one cell. */
.dv-admin-conn-row {
    display: grid;
    grid-template-columns: 116px 126px minmax(104px, 1.05fr) 38px minmax(0, 1.15fr) minmax(0, 1.35fr);
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    font-size: 12.5px;
    border-bottom: 1px solid var(--c-f4f4f5);
}
.dv-admin-conn-row:last-child { border-bottom: none; }
/* Shell execution is the one row whose category badge is not enough: it is a
   different class of finding, so the row itself is tinted. */
.dv-admin-conn-row--alert {
    background: var(--c-fff9f4);
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 8px;
}
.dv-admin-conn-cat {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--c-71717a);
    white-space: nowrap;
}
/* Direction pill. Arrow AND word: the arrow makes a column of rows scannable,
   the word is what carries the meaning in monochrome, in a screen reader and
   for anyone who does not already know the convention. The tint is the third
   and weakest carrier — muted on purpose, because direction is context, not an
   alarm. */
.dv-admin-dir {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    border-radius: 99px;
    padding: 3px 7px;
    white-space: nowrap;
    color: var(--c-71717a);
    background: var(--c-f7f7f8);
    border: 1px solid var(--c-eeeef0);
}
.dv-admin-dir-arrow {
    font-size: 11px;
    line-height: 1;
}
/* In is cool, out is warm, both is neutral — a hint, never the message. */
.dv-admin-dir--read { color: #2A5E8F; background: #F4F8FC; border-color: #DCE8F3; }
.dv-admin-dir--write { color: var(--c-7c4a1e); background: var(--c-fff9f4); border-color: var(--c-fbddc9); }
.dv-admin-conn-dir { min-width: 0; }
/* The node-type label is the row's identity — the primary axis of this view. */
.dv-admin-conn-node {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--c-18181b);
    font-weight: 500;
}
/* The appearance count, "3×": a compact figure, right-aligned so a column of
   them reads as a column of numbers. */
.dv-admin-conn-count {
    color: var(--c-52525b);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    white-space: nowrap;
    text-align: right;
}
.dv-admin-conn-target {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dv-admin-conn-host {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    color: var(--c-52525b);
    overflow-wrap: anywhere;
}
/* Credential KEYS — never values. Muted monospace, one line, so the name of the
   workspace variable a node reaches for reads as data, not as prose. */
.dv-admin-conn-creds {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--c-a1a1aa);
    overflow-wrap: anywhere;
}
.dv-admin-conn-wf {
    color: var(--c-a1a1aa);
    font-size: 11.5px;
    overflow-wrap: anywhere;
}
.dv-admin-local {
    border-top: 1px solid var(--c-f4f4f5);
}
.dv-admin-local-head {
    font-size: 12px;
    color: var(--c-71717a);
}
/* Scan errors: muted red. A workflow that could not be parsed is a workflow
   whose connections are unknown — the one thing this page must not render as
   "clean". */
.dv-admin-ws-errors {
    background: var(--c-fdf2f2);
    border: 1px solid var(--c-f3d3d3);
    border-radius: 9px;
    padding: 9px 11px;
    margin: 0 0 10px;
}
.dv-admin-ws-errors-title {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--c-b91c1c);
    margin-bottom: 4px;
}
.dv-admin-ws-error {
    font-size: 11.5px;
    line-height: 1.5;
    color: #9F5C5C;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow-wrap: anywhere;
}

/* Data-privacy tab — the workspace name becomes a link here (the other tabs'
   groups do not carry one), so it needs its own hover rule on top of the
   shared .admin-ws-name look. */
a.dv-admin-ws-name { text-decoration: none; }
a.dv-admin-ws-link:hover { color: var(--accent); }

/* One workflow's llm nodes, stacked below the workspace header. */
.dv-admin-pii-workflows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 8px;
    border-top: 1px solid var(--c-f4f4f5);
}
.dv-admin-pii-wf-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-52525b);
    margin-bottom: 6px;
}
.dv-admin-pii-nodes {
    display: flex;
    flex-direction: column;
}
.dv-admin-pii-node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 6px 0;
    font-size: 12.5px;
    border-bottom: 1px solid var(--c-f4f4f5);
}
.dv-admin-pii-node:last-child { border-bottom: none; }
.dv-admin-pii-node-name {
    color: var(--c-18181b);
    min-width: 0;
    overflow-wrap: anywhere;
}
/* The state pill: icon AND word, always — colour is the third and weakest
   carrier, the same rule the direction pill and the badges follow. Enabled
   is the only pill allowed a green tint anywhere on this page. */
.dv-admin-pii-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    border-radius: 99px;
    padding: 3px 8px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.dv-admin-pii-pill-icon {
    width: 11px;
    height: 11px;
}
.dv-admin-pii-pill--enabled { color: var(--c-15803d); background: #F0FBF6; border-color: #CFEEDD; }
.dv-admin-pii-pill--disabled { color: var(--c-b91c1c); background: var(--c-fdf2f2); border-color: var(--c-f3d3d3); }
.dv-admin-pii-pill--dynamic { color: var(--c-71717a); background: var(--c-f7f7f8); border-color: var(--c-eeeef0); }

/* Data-privacy tab: the instance-policy banner shown while enforcement pins
   masking on. Rendered at the very top of the tab, above the stat tiles, and
   full-width to match them. Enforcement is the protective state, so it
   borrows the enabled pill's green, never the alert red. */
.dv-admin-pii-enforced {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #CFEEDD;
    border-radius: 10px;
    background: #F0FBF6;
    color: var(--c-15803d);
    font-size: 12.5px;
    line-height: 1.5;
}
.dv-admin-pii-enforced-icon {
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: 1px;
}

/* Data-privacy tab: the instance-wide enforcement toggle. A native checkbox
   drawn as a switch track — the input stays in the tree (focus, keyboard,
   screen readers), visually hidden but not display:none. */
.dv-admin-pii-enforce-card {
    max-width: 720px;
    padding: 12px;
    border: 1px solid var(--c-e4e4e7);
    border-radius: 10px;
    background: var(--white);
}
.dv-admin-pii-switch {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.dv-admin-pii-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.dv-admin-pii-switch-track {
    flex: none;
    width: 34px;
    height: 20px;
    margin-top: 1px;
    border-radius: 10px;
    background: var(--c-e4e4e7);
    position: relative;
    transition: background 0.15s ease;
}
.dv-admin-pii-switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}
.dv-admin-pii-switch-input:checked + .dv-admin-pii-switch-track { background: var(--c-15803d); }
.dv-admin-pii-switch-input:checked + .dv-admin-pii-switch-track::after { transform: translateX(14px); }
.dv-admin-pii-switch-input:focus-visible + .dv-admin-pii-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.dv-admin-pii-switch-input:disabled + .dv-admin-pii-switch-track { opacity: 0.55; }
.dv-admin-pii-switch-input:disabled ~ .dv-admin-pii-switch-text { color: var(--c-71717a); }
.dv-admin-pii-switch:has(.dv-admin-pii-switch-input:disabled) { cursor: default; }
.dv-admin-pii-switch-text {
    font-size: 13px;
    color: var(--c-3f3f46);
    line-height: 1.5;
}
.dv-admin-pii-enforce-meta {
    margin-top: 6px;
    padding-left: 44px;
    font-size: 12px;
    color: var(--c-71717a);
    overflow-wrap: anywhere;
}
.dv-admin-pii-enforce-error {
    margin-top: 6px;
    padding-left: 44px;
    font-size: 12px;
    color: var(--c-b91c1c);
}

/* Data-privacy tab: the always-masked term list editor. Same hairline-card
   language as the rest of the page. */
.dv-admin-terms-editor {
    max-width: 720px;
    padding-left: 10px;
}
.dv-admin-terms-textarea {
    width: 100%;
    min-height: 220px;
    padding: 10px 12px;
    border: 1px solid var(--c-e4e4e7);
    border-radius: 10px;
    background: var(--white);
    color: var(--c-3f3f46);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
}
.dv-admin-terms-textarea:focus { outline: none; border-color: var(--accent); }
.dv-admin-terms-textarea:disabled { background: var(--c-fafafa); color: var(--c-a1a1aa); }
.dv-admin-terms-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}
.dv-admin-terms-meta {
    font-size: 12px;
    color: var(--c-71717a);
    overflow-wrap: anywhere;
}
.dv-admin-terms-error {
    font-size: 12px;
    color: var(--c-b91c1c);
}
.dv-admin-terms-save {
    padding: 5px 14px;
    border: 1px solid var(--c-e4e4e7);
    border-radius: 8px;
    background: var(--white);
    color: var(--c-52525b);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.dv-admin-terms-save:hover { border-color: var(--accent); color: var(--accent); }
.dv-admin-terms-save:disabled { opacity: 0.5; cursor: default; }
.dv-admin-terms-save:disabled:hover { border-color: var(--c-e4e4e7); color: var(--c-52525b); }
/* The chat workspace's resolved per-assistant breakdown, attached to a
   dynamic node. .admin-pii-node is already flex-wrap, so this full-width
   child simply drops to its own line under the name+pill rather than
   needing a wrapper element of its own. */
.dv-admin-pii-resolved {
    flex-basis: 100%;
    padding-top: 6px;
    margin-top: 2px;
    border-top: 1px dashed var(--c-eeeef0);
    font-size: 11.5px;
}
.dv-admin-pii-resolved-summary { color: var(--c-71717a); font-weight: 500; }
/* Same colour as .admin-stat-value--alert (#FF6600, the disabled tile's
   cue) — kept as its own modifier rather than combining the two classes on
   one element, because both are plain single-class selectors of equal
   specificity: whichever is declared later in the sheet would silently win
   the cascade regardless of which classes are actually present. */
.dv-admin-pii-resolved-summary--alert { color: var(--accent); font-weight: 600; }
.dv-admin-pii-resolved-empty { color: var(--c-9a9aa2); font-style: italic; }
.dv-admin-pii-resolved-details { margin-top: 4px; }
.dv-admin-pii-resolved-toggle {
    cursor: pointer;
    color: var(--c-52525b);
    font-size: 11px;
    font-weight: 500;
}
.dv-admin-pii-resolved-assistants {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
/* The CSS-only all/enabled/disabled filter: three visually hidden radios
   (shared `name` = one AdminPIIResolution.FilterID, unique per resolved
   node) plus styled <label>s reading as a segmented control — the same
   filled/outline language as .admin-seg elsewhere on this page, just its
   own small classes since .admin-seg's items are links, not radio labels. */
.dv-admin-pii-filter {
    display: inline-flex;
    align-self: flex-start;
    background: var(--c-f7f7f8);
    border: 1px solid var(--c-ececee);
    border-radius: 9px;
    padding: 2px;
}
.dv-admin-pii-filter-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.dv-admin-pii-filter-option {
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    color: var(--c-71717a);
    padding: 5px 9px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
}
.dv-admin-pii-filter-option:hover { color: var(--c-18181b); }
.dv-admin-pii-filter-input:checked + .dv-admin-pii-filter-option,
.dv-admin-pii-filter-input:checked + .dv-admin-pii-filter-option:hover {
    color: var(--white);
    background: var(--accent);
}
.dv-admin-pii-filter-input:focus-visible + .dv-admin-pii-filter-option {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.dv-admin-pii-assistant-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* Each chip IS an .admin-pii-pill (same green/disabled-red hues, same
   icon+word-never-colour-alone rule — Label becomes the title tooltip here
   instead of chip text) with this modifier for the assistant name's own
   sizing: .admin-pii-pill's white-space:nowrap is fine for the short state
   word it was built for, but an assistant display name can run long, so it
   is overridden here to wrap inside the chip rather than overflow the row. */
.dv-admin-pii-assistant-chip {
    font-size: 11px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
/* Filtering is purely structural: the container's own descendant radio
   decides which data-state survives. :has() is required and is available on
   every browser this page targets. */
.dv-admin-pii-resolved-assistants:has(.dv-admin-pii-filter-input--enabled:checked) .dv-admin-pii-assistant-chip[data-state="disabled"],
.dv-admin-pii-resolved-assistants:has(.dv-admin-pii-filter-input--disabled:checked) .dv-admin-pii-assistant-chip[data-state="enabled"] {
    display: none;
}
.dv-admin-pii-resolved-filter-none {
    display: none;
    color: var(--c-9a9aa2);
    font-style: italic;
    font-size: 11px;
}
.dv-admin-pii-resolved-assistants:has(.dv-admin-pii-filter-input--enabled:checked) .dv-admin-pii-resolved-filter-none--enabled,
.dv-admin-pii-resolved-assistants:has(.dv-admin-pii-filter-input--disabled:checked) .dv-admin-pii-resolved-filter-none--disabled {
    display: block;
}

/* Agent sessions — a table, not the card list the other tabs use. Every row
   carries the same six comparable figures and the job is reading them down a
   column, which is what a table is for. */
.dv-admin-session-scroll {
    overflow-x: auto;
}
.dv-admin-session-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.dv-admin-session-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-a1a1aa);
    padding: 0 12px 8px;
    border-bottom: 1px solid var(--c-ececee);
    white-space: nowrap;
}
.dv-admin-session-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--c-f4f4f5);
    vertical-align: top;
}
.dv-admin-session-table tr:last-child td { border-bottom: none; }
.dv-admin-session-table th:first-child,
.dv-admin-session-table td:first-child { padding-left: 0; }
.dv-admin-session-table th:last-child,
.dv-admin-session-table td:last-child { padding-right: 0; }

/* The numeric columns are right-aligned so digits line up on the decimal, and
   tabular figures keep a ticking runtime from shifting the column every second. */
.dv-admin-session-num {
    text-align: right;
    white-space: nowrap;
}
.dv-admin-session-figure {
    display: block;
    color: var(--c-18181b);
    font-variant-numeric: tabular-nums;
}
.dv-admin-session-subfigure {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--c-a1a1aa);
    font-variant-numeric: tabular-nums;
}
.dv-admin-session-subfigure:empty { display: none; }

.dv-admin-session-label {
    color: var(--c-18181b);
    font-weight: 500;
    line-height: 1.45;
    max-width: 46ch;
}
.dv-admin-session-meta {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--c-71717a);
}
.dv-admin-session-ws { color: var(--c-52525b); }
a.dv-admin-session-ws { text-decoration: none; }
a.dv-admin-session-ws:hover { color: var(--accent); text-decoration: underline; }
.dv-admin-session-sep { color: var(--c-d4d4d8); margin: 0 4px; }
/* The id is a lookup key, not reading matter: monospace so it can be compared
   character by character against the LLM call log, and quiet so it does not
   compete with the request above it. */
.dv-admin-session-id {
    margin-top: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    color: #B4B4BB;
}
/* Wide enough for an ordinary work address to sit on one line; anything
   longer wraps rather than widening the column past the figures it sits
   beside. */
.dv-admin-session-user {
    color: var(--c-52525b);
    max-width: 30ch;
    overflow-wrap: anywhere;
}
.dv-admin-session-none { color: #C4C4CB; }

/* Status pills. Each carries a word as well as a colour — "stopping" and
   "waiting for input" are opposite situations and telling them apart must not
   depend on distinguishing two hues. */
.dv-admin-session-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid transparent;
}
.dv-admin-session-pill--running {
    background: var(--c-fff4ec);
    border-color: var(--c-fbddc9);
    color: #B4530F;
}
.dv-admin-session-pill--stopping {
    background: var(--c-fef2f2);
    border-color: #FBD5D5;
    color: var(--c-b42318);
}
.dv-admin-session-pill--waiting {
    background: var(--c-f4f4f5);
    border-color: var(--c-e4e4e7);
    color: var(--c-52525b);
}

.dv-admin-session-action { text-align: right; }
.dv-admin-session-stop {
    padding: 6px 13px;
    border: 1px solid var(--c-e4e4e7);
    border-radius: 8px;
    background: var(--white);
    color: var(--c-52525b);
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
}
.dv-admin-session-stop:hover { border-color: var(--c-b42318); color: var(--c-b42318); }
.dv-admin-session-stop:disabled { opacity: 0.5; cursor: default; }
.dv-admin-session-stop:disabled:hover { border-color: var(--c-e4e4e7); color: var(--c-52525b); }
/* The action column's header names the column for a screen reader without
   putting a redundant word above a column of buttons. */
.dv-admin-session-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .dv-admin-stats { grid-template-columns: repeat(2, 1fr); }
    /* The session table scrolls sideways in its own container rather than
       reflowing: the columns only mean something read against each other. */
    .dv-admin-session-table { min-width: 720px; }
    .dv-admin-session-label { max-width: 34ch; }
    .dv-admin-bar-row { grid-template-columns: 1fr; gap: 6px; }
    .dv-admin-conn-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .dv-admin-catbar { grid-template-columns: minmax(90px, 130px) minmax(0, 1fr) 30px; }
    .dv-admin-bar-figures { justify-content: flex-start; }
    .dv-admin-chart-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .dv-admin-donut {
        border-left: none;
        border-top: 1px solid var(--c-f4f4f5);
        padding-left: 0;
        padding-top: 18px;
    }
    /* Stacked: the cluster is on its own line under the title, where a leading
       rule would divide nothing. */
    .dv-admin-range-form {
        border-left: none;
        padding-left: 0;
    }
}

/* ============================================================================
   Version Badge & Topbar
   ============================================================================ */

.dv-topbar,.topbar {
	display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

/* A button: clicking copies the version (nav_version.js), which is what a bug
   report needs. It keeps the look of the plain label it used to be. */
.dv-version-badge {
	display: block;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 4px;
	text-align: left;
	cursor: pointer;
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--c-888888);
	padding: 0 0.5rem;
	margin: 0.5rem 0;
	font-family: var(--font-mono);
	transition: color var(--transition-fast);
}

.dv-version-badge:hover,
.dv-version-badge.dv-copied { color: var(--text-primary); }

/* The confirmation rides in ::after, never in the badge's text: the version
   panel and the agent panel read and rewrite that text ("app / workspace"). */
.dv-version-badge.dv-copied::after {
	content: attr(data-copied);
	margin-left: 0.6rem;
	color: var(--c-16a34a);
}

.dv-version-badge:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.dv-version-sep {
	margin: 0 0.4rem;
	opacity: 0.3;
}

/* Admin -> Upstreams (git upstream registry) */
.dv-admin-upstreams .dv-admin-tablewrap { overflow-x: auto; margin: 0.5rem 0 1rem; }
.dv-admin-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.dv-admin-table th, .dv-admin-table td { text-align: left; vertical-align: top; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border-color, var(--c-e5e7eb)); }
.dv-admin-table th { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; font-weight: 600; }
.dv-admin-table td.dv-admin-empty { opacity: 0.7; font-style: italic; }
.dv-admin-table td.dv-admin-actions { white-space: nowrap; }
.dv-admin-table td.dv-admin-actions .dv-admin-btn { margin-right: 0.35rem; }
.dv-admin-inline-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.25rem 0 0.5rem; }
.dv-admin-inline-form .dv-admin-input { padding: 0.4rem 0.55rem; border: 1px solid var(--border-color, var(--c-d1d5db)); border-radius: 4px; font: inherit; min-width: 10rem; background: var(--input-bg, var(--white)); color: inherit; }
.dv-admin-inline-form textarea.dv-admin-input { min-width: 22rem; font-family: ui-monospace, monospace; font-size: 0.85rem; }
.dv-admin-inline-form .dv-admin-form-label { font-weight: 600; margin-right: 0.5rem; }
.dv-admin-check { display: inline-flex; align-items: center; gap: 0.3rem; }
/* This deployment's identity: label and value in two aligned columns, the
   Save button beside the name it saves. */
.dv-admin-identity { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.6rem 1rem; align-items: center; margin: 0.25rem 0 0.5rem; }
.dv-admin-identity-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-888888); }
.dv-admin-identity-value { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-wrap: wrap; }
.dv-admin-identity .dv-admin-input { padding: 0.4rem 0.55rem; border: 1px solid var(--border-color, var(--c-d1d5db)); border-radius: 4px; font: inherit; min-width: 14rem; background: var(--input-bg, var(--white)); color: inherit; }
.dv-admin-btn:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 480px) { .dv-admin-identity { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } .dv-admin-identity .dv-admin-input { min-width: 0; flex: 1 1 auto; } }
.dv-admin-btn { padding: 0.35rem 0.7rem; border: 1px solid var(--border-color, var(--c-d1d5db)); border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.dv-admin-btn:hover { background: rgba(127, 127, 127, 0.08); }
.dv-admin-btn--primary,
.dv-admin-btn--primary:hover { background: var(--accent); color: var(--white); border-color: transparent; }
/* Row actions as icons: square, the label lives in title/aria-label. */
.dv-admin-btn--icon { padding: 0.3rem 0.4rem; line-height: 0; vertical-align: middle; }
.dv-admin-btn--icon svg, .dv-admin-btn--icon i { width: 16px; height: 16px; display: inline-block; }
.dv-admin-btn--icon.dv-admin-btn--danger svg { color: var(--c-b42318); }
.dv-admin-btn--danger { color: var(--c-b42318); border-color: rgba(180, 35, 24, 0.4); }

/* Admin dialogs — the same look as the workspace list's Create Workspace
   modal (list-workflows table.templ .wf-modal*), so the platform's admin
   forms and the workspace forms read as one system. Overlay + card, uppercase
   field labels, orange submit, grey cancel. */
.dv-admin-modal-overlay { position: fixed; inset: 0; background: var(--black-a50); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); }
.dv-admin-modal-overlay[hidden] { display: none; }
/* The dialog is a column: title and actions are fixed, only the fields
   scroll. It used to be one scroll area at 85vh, which meant the Save button
   scrolled away with the form — on a 720px-high window the Add-server dialog
   put its submit at y=807, i.e. off the screen entirely, and the way to reach
   it was to scroll a box that did not look scrollable. Width raised from a
   fixed 460px because the fields hold URLs and keys, and a narrower box only
   moves the problem into extra wrapped lines. */
.dv-admin-modal { background: var(--white); border-radius: 12px; padding: 2rem; width: min(560px, 92vw); max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px var(--black-a30); }
.dv-admin-modal > h2, .dv-admin-modal > .dv-admin-modal-error, .dv-admin-modal > .dv-admin-modal-actions { flex: none; }
/* min-height:0 is what actually lets this shrink inside the flex column —
   without it the body keeps its content height and the whole dialog overflows
   again, silently. */
.dv-admin-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dv-admin-modal h2 { margin: 0 0 1.5rem; font-size: 1.25rem; color: var(--c-1a1a1a); }
.dv-admin-modal-field { margin-bottom: 1rem; }
.dv-admin-modal-field label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-888888); margin-bottom: 0.35rem; }
/* A checkbox with its label (May push, Default, Publish on release): the field
   label and the full-width input rules above are for text fields, and turned
   it into a centred box over an uppercase caption. */
.dv-admin-modal-field label.dv-admin-check { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--c-1a1a1a); margin-bottom: 0; cursor: pointer; }
.dv-admin-modal-field .dv-admin-check input[type="checkbox"] { width: auto; margin: 0; padding: 0; }
.dv-admin-modal-field input, .dv-admin-modal-field select, .dv-admin-modal-field textarea { width: 100%; min-width: 0; padding: 0.5rem 0.75rem; background: var(--white); border: 1px solid var(--c-e0e0e0); border-radius: 6px; color: var(--c-1a1a1a); font: inherit; font-size: 0.875rem; outline: none; box-sizing: border-box; transition: border-color 0.15s ease; }
.dv-admin-modal-field textarea { font-family: ui-monospace, monospace; font-size: 0.85rem; resize: vertical; }
.dv-admin-modal-field input:focus, .dv-admin-modal-field select:focus, .dv-admin-modal-field textarea:focus { border-color: var(--accent); }
.dv-admin-field-hint { margin-top: 0.35rem; font-size: 0.75rem; color: var(--c-888888); }
.dv-admin-modal-field input.dv-admin-input--readonly { background: var(--c-fafafa); color: var(--c-666666); font-family: ui-monospace, monospace; letter-spacing: 0.05em; }
.dv-admin-modal-error { background: var(--c-ffeeee); border: 1px solid var(--c-ffcccc); border-radius: 6px; padding: 0.75rem; margin-bottom: 1rem; color: var(--c-cc3333); font-size: 0.875rem; line-height: 1.4; }
.dv-admin-modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; }
.dv-admin-btn-cancel { padding: 0.5rem 1rem; background: var(--c-f0f0f0); color: var(--c-333333); border: none; border-radius: 6px; font: inherit; font-size: 0.875rem; cursor: pointer; transition: background 0.15s ease; }
.dv-admin-btn-cancel:hover { background: var(--c-e0e0e0); }
.dv-admin-btn-submit { padding: 0.5rem 1.25rem; background: var(--accent); color: var(--white); border: none; border-radius: 6px; font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; }
.dv-admin-btn-submit:hover { background: var(--c-e65c00); }
.dv-admin-btn-submit:disabled { background: var(--c-cccccc); cursor: not-allowed; }
/* Connection test inside the dialog: the URL it will call, and the outcome. */
.dv-admin-test-url { display: block; padding: 0.5rem 0.75rem; background: var(--c-fafafa); border: 1px solid var(--c-e0e0e0); border-radius: 6px; font-size: 0.8rem; word-break: break-all; }
/* The page-level outcome of an action whose dialog has closed. Green rather
   than the error red beside it, because "it worked" and "it did not" must not
   be told apart by reading. */
.dv-admin-notice { background: rgba(22, 163, 74, 0.10); border: 1px solid rgba(22, 163, 74, 0.35); color: var(--c-166534, #166534); border-radius: 6px; padding: 0.6rem 0.75rem; margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.4; }
.dv-admin-notice[hidden] { display: none; }
.dv-admin-test-result { border-radius: 6px; padding: 0.75rem; font-size: 0.875rem; line-height: 1.4; margin-top: 0.5rem; display: flex; align-items: flex-start; gap: 0.5rem; }
.dv-admin-test-result svg { width: 20px; height: 20px; flex: 0 0 auto; }
.dv-admin-test-result--ok svg { color: var(--c-16a34a); }
.dv-admin-test-result--ok { background: rgba(14, 107, 90, 0.1); border: 1px solid rgba(14, 107, 90, 0.35); color: var(--c-0e6b5a); }
.dv-admin-test-result--fail { background: var(--c-ffeeee); border: 1px solid var(--c-ffcccc); color: var(--c-cc3333); }
/* Status as an 8px dot + label, never a colour-flooded pill (DESIGN.md §6). */
.dv-admin-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 0.45rem; vertical-align: middle; background: var(--c-a1a1aa, #A1A1AA); }
.dv-admin-dot--on { background: var(--c-16a34a); }
.dv-admin-dot--off { background: var(--c-a1a1aa, #A1A1AA); }
.dv-admin-dot--blocked { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-d4d4d8, #D4D4D8); }

/* Security callout (DESIGN.md §6): orange tint, icon + tinted text. Used for
   the SSH host key trusted on first contact — the one thing on this page a
   reader is asked to verify elsewhere rather than merely read. */
.dv-admin-callout { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem; padding: 0.75rem; border-radius: 10px; background: var(--c-fff9f4); border: 1px solid var(--c-fbddc9); color: var(--c-7c4a1e); font-size: 0.875rem; line-height: 1.5; }
.dv-admin-callout svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
/* A class that sets `display` beats the hidden ATTRIBUTE, so a toggled
   element needs this or it shows as an empty tinted box from the start —
   which is worse than not showing at all, because it looks like a rendered
   warning with nothing in it. Same treatment as .dv-admin-modal-overlay. */
.dv-admin-callout[hidden] { display: none; }
/* A callout's text column takes the callout's width, so a copy field in it
   (the git clone commands after issuing a token) is not squeezed to its
   placeholder width. */
.dv-admin-callout-body { flex: 1 1 auto; min-width: 0; }
.dv-admin-clone-table { margin-top: 0.35rem; font-size: 0.85rem; }
.dv-admin-clone-table th, .dv-admin-clone-table td { padding: 0.4rem 0.5rem; vertical-align: middle; border-bottom-color: var(--c-fbddc9); }
.dv-admin-clone-table th:first-child, .dv-admin-clone-table td:first-child { padding-left: 0; white-space: nowrap; }
.dv-admin-clone-table th:last-child, .dv-admin-clone-table td:last-child { padding-right: 0; width: 1%; }
.dv-admin-clone-table .dv-admin-copy-code { word-break: break-all; }
.dv-admin-clone-note { margin-top: 0.5rem; }
.dv-admin-clone-title { margin-top: 0.75rem; }
/* Explicit, because a class that sets display beats the hidden attribute and
   this has caught us before: the import dialog toggles its tag field with
   [hidden] and a silently-visible field there means two sources of truth. */
.dv-admin-modal-field input[hidden], .dv-admin-modal-field select[hidden] { display: none; }

/* The trusted SSH host key: fingerprint in mono (DESIGN.md §4 — keys are mono
   so they can be compared character by character), when it was trusted, and
   the one action that replaces it. */
.dv-admin-hostkey { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.dv-admin-hostkey-fp { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.8rem; word-break: break-all; }
.dv-admin-hostkey-since { font-size: 0.78rem; opacity: 0.7; }
.dv-admin-hostkey-none { font-size: 0.85rem; opacity: 0.7; }

/* white-space:nowrap because a pill that wraps stops looking like a pill:
   "pull + push" broke over two lines inside the rounded outline and read as
   a rendering fault rather than a value. */
.dv-admin-pill { display: inline-block; white-space: nowrap; padding: 0.1em 0.55em; border-radius: 999px; font-size: 0.78rem; border: 1px solid var(--border-color, var(--c-d1d5db)); margin-right: 0.3rem; }
.dv-admin-pill--pull { border-color: var(--c-0e6b5a); color: var(--c-0e6b5a); }
.dv-admin-pill--push { border-color: var(--c-b5690d); color: var(--c-b5690d); }
.dv-admin-pill--pull_push { border-color: var(--c-4b5563); }
.dv-admin-pill--ok { background: rgba(14, 107, 90, 0.12); border-color: transparent; color: var(--c-0e6b5a); }
.dv-admin-pill--warn { background: rgba(181, 105, 13, 0.14); border-color: transparent; color: #8a4f07; }
.dv-admin-pill--danger { background: rgba(180, 35, 24, 0.12); border-color: transparent; color: var(--c-b42318); }
.dv-admin-muted { opacity: 0.65; }