@phren/cli
Version:
Knowledge layer for AI agents - CLI, MCP server, and data layer
2 lines (1 loc) • 25.4 kB
TypeScript
export declare const PHREN_DEEP_VOID_STYLES = "\n /* \u2500\u2500 Phren Deep Void \u2014 palette tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] {\n --bg: #0a0a1a;\n --surface: rgba(18, 18, 42, 0.72);\n --surface-raised: rgba(22, 22, 53, 0.78);\n --surface-sunken: #0d0d22;\n --surface-solid: #12122a;\n\n --ink: #ece9f5;\n --ink-secondary: #c8c3e3;\n --muted: rgba(236, 233, 245, 0.55);\n\n --accent: #9058f0;\n --accent-hover: #b07aff;\n --accent-solid: #7C3AED;\n --accent-dim: rgba(124, 58, 237, 0.16);\n --accent-glow: rgba(124, 58, 237, 0.42);\n\n --cyan: #28D3F2;\n --cyan-dim: rgba(40, 211, 242, 0.14);\n --cyan-glow: rgba(40, 211, 242, 0.36);\n\n --purple: #9058f0;\n --purple-dim: rgba(124, 58, 237, 0.14);\n\n --border: rgba(156, 143, 248, 0.18);\n --border-light: rgba(156, 143, 248, 0.08);\n --border-strong: rgba(156, 143, 248, 0.32);\n\n --danger: #f87171;\n --danger-dim: rgba(248, 113, 113, 0.14);\n --warning: #fbbf24;\n --warning-dim: rgba(251, 191, 36, 0.14);\n --success: #4ade80;\n --success-dim: rgba(74, 222, 128, 0.14);\n\n --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55);\n --shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 0 1px rgba(124, 58, 237, 0.35);\n --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.65),\n 0 0 0 1px rgba(156, 143, 248, 0.12),\n 0 0 32px rgba(124, 58, 237, 0.18);\n\n --font: \"Space Grotesk\", \"Inter\", system-ui, -apple-system, sans-serif;\n --mono: \"JetBrains Mono\", \"Fira Code\", \"Cascadia Code\", ui-monospace, monospace;\n\n /* pixel-art crispness */\n --radius: 6px;\n --radius-sm: 4px;\n }\n\n /* \u2500\u2500 Ambient starfield + cosmic gradient \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] body {\n background:\n radial-gradient(1200px 800px at 15% -5%, rgba(124, 58, 237, 0.18), transparent 55%),\n radial-gradient(900px 700px at 105% 20%, rgba(40, 211, 242, 0.12), transparent 55%),\n radial-gradient(700px 500px at 50% 110%, rgba(103, 226, 248, 0.08), transparent 60%),\n var(--bg);\n background-attachment: fixed;\n }\n [data-theme=\"dark\"] body::before {\n /* drifting pixel-dust stars \u2014 transform-only, GPU composited */\n content: \"\";\n position: fixed;\n inset: 0;\n pointer-events: none;\n will-change: transform;\n transform: translate3d(0, 0, 0);\n background-image:\n radial-gradient(1px 1px at 10% 20%, rgba(236, 233, 245, 0.5), transparent 60%),\n radial-gradient(1px 1px at 70% 35%, rgba(40, 211, 242, 0.55), transparent 60%),\n radial-gradient(1px 1px at 25% 70%, rgba(124, 58, 237, 0.5), transparent 60%),\n radial-gradient(1px 1px at 85% 80%, rgba(236, 233, 245, 0.45), transparent 60%),\n radial-gradient(1px 1px at 45% 50%, rgba(40, 211, 242, 0.4), transparent 60%),\n radial-gradient(1px 1px at 90% 12%, rgba(236, 233, 245, 0.55), transparent 60%),\n radial-gradient(1px 1px at 5% 55%, rgba(124, 58, 237, 0.45), transparent 60%);\n opacity: 0.9;\n animation: phren-stars-drift 80s linear infinite;\n z-index: 0;\n }\n @keyframes phren-stars-drift {\n 0% { transform: translate3d(0, 0, 0); }\n 100% { transform: translate3d(-40px, -24px, 0); }\n }\n /* Respect users who prefer calmer motion: kill long-running ambient loops. */\n @media (prefers-reduced-motion: reduce) {\n [data-theme=\"dark\"] body::before,\n [data-theme=\"dark\"] .graph-nebula,\n [data-theme=\"dark\"] .project-detail-empty::before,\n [data-theme=\"dark\"] .reader-empty::before,\n [data-theme=\"dark\"] .cmdpal-empty::before { animation: none !important; }\n }\n /* Ensure chrome sits above the starfield */\n [data-theme=\"dark\"] .header,\n [data-theme=\"dark\"] .main,\n [data-theme=\"dark\"] .cmdpal-overlay,\n [data-theme=\"dark\"] .toast-container,\n [data-theme=\"dark\"] .batch-bar {\n position: relative;\n z-index: 1;\n }\n [data-theme=\"dark\"] .header { z-index: 100; }\n\n /* \u2500\u2500 Glass header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] .header {\n background: rgba(10, 10, 26, 0.68);\n backdrop-filter: blur(20px) saturate(1.4);\n -webkit-backdrop-filter: blur(20px) saturate(1.4);\n border-bottom: 1px solid rgba(156, 143, 248, 0.14);\n box-shadow:\n 0 1px 0 rgba(156, 143, 248, 0.12),\n 0 0 40px rgba(124, 58, 237, 0.06);\n }\n [data-theme=\"dark\"] .header-brand {\n color: var(--ink);\n font-family: var(--font);\n font-weight: 700;\n letter-spacing: -0.02em;\n }\n [data-theme=\"dark\"] .header-brand svg {\n filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.55));\n }\n\n /* Active tab: cyan rail + soft glow */\n [data-theme=\"dark\"] .nav-item {\n font-family: var(--font);\n letter-spacing: 0.01em;\n transition: color .18s ease, border-color .18s ease, text-shadow .18s ease;\n }\n [data-theme=\"dark\"] .nav-item:hover {\n color: var(--ink);\n text-shadow: 0 0 12px rgba(40, 211, 242, 0.35);\n }\n [data-theme=\"dark\"] .nav-item.active {\n color: var(--cyan);\n border-bottom-color: var(--cyan);\n text-shadow: 0 0 12px rgba(40, 211, 242, 0.55);\n }\n [data-theme=\"dark\"] .nav-item .count {\n background: var(--accent-dim);\n color: #c8b4ff;\n border: 1px solid rgba(156, 143, 248, 0.22);\n font-family: var(--mono);\n box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.08);\n }\n\n /* \u2500\u2500 Cards and panels \u2014 glass with violet rim \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n /* backdrop-filter is expensive on large grids; keep blur modest (10px) and\n only apply where it materially improves the glass feel (cards, nav,\n overlays). Solid surfaces use plain translucent rgba instead. */\n [data-theme=\"dark\"] .card,\n [data-theme=\"dark\"] .project-card,\n [data-theme=\"dark\"] .review-card,\n [data-theme=\"dark\"] .skill-card,\n [data-theme=\"dark\"] .review-help,\n [data-theme=\"dark\"] .split-view,\n [data-theme=\"dark\"] .graph-container,\n [data-theme=\"dark\"] .cmdpal-box {\n background: rgba(18, 18, 42, 0.78);\n backdrop-filter: blur(10px) saturate(1.25);\n -webkit-backdrop-filter: blur(10px) saturate(1.25);\n border: 1px solid rgba(156, 143, 248, 0.16);\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.02),\n 0 4px 24px rgba(0, 0, 0, 0.45);\n }\n [data-theme=\"dark\"] .card-header { background: rgba(13, 13, 34, 0.6); border-bottom-color: rgba(156, 143, 248, 0.1); }\n [data-theme=\"dark\"] .split-sidebar { background: rgba(10, 10, 26, 0.55); border-right-color: rgba(156, 143, 248, 0.12); }\n [data-theme=\"dark\"] .reader-toolbar { background: rgba(10, 10, 26, 0.6); border-bottom-color: rgba(156, 143, 248, 0.1); }\n [data-theme=\"dark\"] .project-card:hover {\n transform: translateY(-2px);\n border-color: rgba(124, 58, 237, 0.42);\n box-shadow:\n 0 12px 36px rgba(0, 0, 0, 0.55),\n 0 0 0 1px rgba(124, 58, 237, 0.22),\n 0 0 40px rgba(124, 58, 237, 0.18);\n }\n [data-theme=\"dark\"] .project-card.selected {\n border-color: var(--cyan);\n box-shadow:\n 0 0 0 1px var(--cyan),\n 0 0 32px rgba(40, 211, 242, 0.28);\n }\n [data-theme=\"dark\"] .review-card:hover {\n border-color: rgba(124, 58, 237, 0.36);\n box-shadow:\n 0 0 0 1px rgba(124, 58, 237, 0.22),\n 0 8px 28px rgba(0, 0, 0, 0.5),\n 0 0 30px rgba(124, 58, 237, 0.14);\n }\n\n /* \u2500\u2500 Buttons \u2014 solid violet, cyan focus ring \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] .btn {\n background: rgba(18, 18, 42, 0.68);\n border-color: rgba(156, 143, 248, 0.22);\n color: var(--ink-secondary);\n font-family: var(--font);\n letter-spacing: 0.01em;\n transition: all .18s ease;\n }\n [data-theme=\"dark\"] .btn:hover {\n border-color: rgba(156, 143, 248, 0.5);\n color: var(--ink);\n background: rgba(28, 28, 64, 0.78);\n box-shadow: 0 0 24px rgba(124, 58, 237, 0.22);\n }\n [data-theme=\"dark\"] .btn-primary {\n background: linear-gradient(180deg, #8b5cf6, #6d32d9);\n color: #fff;\n border: 1px solid rgba(156, 143, 248, 0.55);\n box-shadow:\n 0 6px 20px rgba(124, 58, 237, 0.45),\n inset 0 1px 0 rgba(255, 255, 255, 0.18);\n }\n [data-theme=\"dark\"] .btn-primary:hover {\n background: linear-gradient(180deg, #9870ff, #7a3de8);\n box-shadow:\n 0 8px 28px rgba(124, 58, 237, 0.55),\n inset 0 1px 0 rgba(255, 255, 255, 0.22);\n }\n [data-theme=\"dark\"] .btn-approve {\n background: rgba(74, 222, 128, 0.14);\n color: #8ef0a8;\n border-color: rgba(74, 222, 128, 0.28);\n }\n [data-theme=\"dark\"] .btn-approve:hover {\n background: linear-gradient(180deg, #4ade80, #22c55e);\n color: #0a0a1a;\n box-shadow: 0 0 24px rgba(74, 222, 128, 0.4);\n }\n\n /* \u2500\u2500 Inputs \u2014 cyan focus glow \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] .projects-search,\n [data-theme=\"dark\"] .task-filter-select,\n [data-theme=\"dark\"] .review-filters select,\n [data-theme=\"dark\"] .review-edit-textarea,\n [data-theme=\"dark\"] .cmdpal-input,\n [data-theme=\"dark\"] input[type=\"text\"],\n [data-theme=\"dark\"] input[type=\"search\"],\n [data-theme=\"dark\"] textarea:not(.review-edit-textarea) {\n background: rgba(13, 13, 34, 0.8) !important;\n color: var(--ink);\n border-color: rgba(156, 143, 248, 0.2);\n font-family: var(--mono);\n }\n [data-theme=\"dark\"] .projects-search:focus,\n [data-theme=\"dark\"] input[type=\"text\"]:focus,\n [data-theme=\"dark\"] input[type=\"search\"]:focus,\n [data-theme=\"dark\"] textarea:focus,\n [data-theme=\"dark\"] .cmdpal-input:focus,\n [data-theme=\"dark\"] .review-edit-textarea:focus {\n border-color: var(--cyan) !important;\n box-shadow: 0 0 0 3px var(--cyan-dim), 0 0 24px rgba(40, 211, 242, 0.18) !important;\n outline: none !important;\n }\n\n /* \u2500\u2500 Badges \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] .badge { background: rgba(18, 18, 42, 0.7); color: var(--ink-secondary); border: 1px solid rgba(156, 143, 248, 0.15); font-family: var(--mono); }\n [data-theme=\"dark\"] .badge-project { background: rgba(124, 58, 237, 0.18); color: #c8b4ff; border-color: rgba(124, 58, 237, 0.35); }\n [data-theme=\"dark\"] .badge-on { background: rgba(74, 222, 128, 0.16); color: #8ef0a8; border-color: rgba(74, 222, 128, 0.3); }\n [data-theme=\"dark\"] .badge-off { background: rgba(248, 113, 113, 0.14); color: #f9a0a0; border-color: rgba(248, 113, 113, 0.28); }\n [data-theme=\"dark\"] .badge-count { background: var(--accent-solid); color: #fff; box-shadow: 0 0 12px rgba(124, 58, 237, 0.5); }\n\n /* \u2500\u2500 Split list (skills / hooks) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] .split-item.selected,\n [data-theme=\"dark\"] .hook-item.selected {\n background: linear-gradient(90deg, rgba(124, 58, 237, 0.22), rgba(124, 58, 237, 0) 85%);\n border-left: 3px solid var(--cyan);\n box-shadow: inset 0 0 18px rgba(40, 211, 242, 0.08);\n }\n [data-theme=\"dark\"] .split-item:hover,\n [data-theme=\"dark\"] .hook-item:hover { background: rgba(124, 58, 237, 0.08); }\n [data-theme=\"dark\"] .split-group-label { background: rgba(10, 10, 26, 0.7); color: var(--cyan); font-family: var(--mono); letter-spacing: 0.12em; border-bottom-color: rgba(156, 143, 248, 0.12); }\n\n /* \u2500\u2500 Graph container + controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] .graph-container { background: radial-gradient(1600px 900px at 50% 50%, rgba(18, 18, 42, 0.6), rgba(10, 10, 26, 0.9) 70%); border: 1px solid rgba(156, 143, 248, 0.18); }\n [data-theme=\"dark\"] #graph-canvas { filter: drop-shadow(0 0 30px rgba(124, 58, 237, 0.04)); }\n [data-theme=\"dark\"] .graph-controls button {\n background: rgba(18, 18, 42, 0.68);\n border-color: rgba(156, 143, 248, 0.22);\n color: var(--ink);\n font-family: var(--mono);\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);\n }\n [data-theme=\"dark\"] .graph-controls button:hover { background: rgba(28, 28, 64, 0.85); border-color: var(--cyan); box-shadow: 0 0 18px rgba(40, 211, 242, 0.25); }\n [data-theme=\"dark\"] .graph-filter-btn { background: rgba(18, 18, 42, 0.72); border: 1px solid rgba(156, 143, 248, 0.2); color: var(--muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; border-radius: 4px; }\n [data-theme=\"dark\"] .graph-filter-btn:hover { border-color: var(--cyan); color: var(--ink); background: rgba(40, 211, 242, 0.08); box-shadow: 0 0 16px rgba(40, 211, 242, 0.2); }\n [data-theme=\"dark\"] .graph-filter-btn.active { background: linear-gradient(180deg, rgba(124, 58, 237, 0.38), rgba(124, 58, 237, 0.22)); color: #fff; border-color: rgba(156, 143, 248, 0.55); box-shadow: 0 0 20px rgba(124, 58, 237, 0.42); }\n [data-theme=\"dark\"] .graph-legend { background: rgba(10, 10, 26, 0.72); border-top: 1px solid rgba(156, 143, 248, 0.14); backdrop-filter: blur(12px); }\n [data-theme=\"dark\"] .graph-legend-item { color: var(--ink-secondary); font-family: var(--mono); }\n [data-theme=\"dark\"] .graph-legend-dot { box-shadow: 0 0 10px currentColor; }\n [data-theme=\"dark\"] .graph-filters { background: rgba(18, 18, 42, 0.72); border-color: rgba(156, 143, 248, 0.18); backdrop-filter: blur(18px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); }\n\n /* \u2500\u2500 Toast + batch bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] .toast { background: rgba(18, 18, 42, 0.78); border-color: rgba(156, 143, 248, 0.28); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(124, 58, 237, 0.2); backdrop-filter: blur(20px); }\n [data-theme=\"dark\"] .toast.ok { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.4); color: #8ef0a8; }\n [data-theme=\"dark\"] .toast.err { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.4); color: #f9a0a0; }\n [data-theme=\"dark\"] .batch-bar { background: rgba(18, 18, 42, 0.82); border-color: rgba(156, 143, 248, 0.28); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 40px rgba(124, 58, 237, 0.22); backdrop-filter: blur(24px); }\n\n /* \u2500\u2500 Command palette \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] .cmdpal-overlay { background: rgba(5, 5, 15, 0.55); backdrop-filter: blur(8px); }\n [data-theme=\"dark\"] .cmdpal-box { background: rgba(18, 18, 42, 0.88); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(124, 58, 237, 0.24); }\n [data-theme=\"dark\"] .cmdpal-item.selected { background: linear-gradient(90deg, rgba(124, 58, 237, 0.35), rgba(40, 211, 242, 0.12)); }\n [data-theme=\"dark\"] .cmdpal-item-name { color: var(--ink); }\n\n /* \u2500\u2500 Section accents (settings) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] .settings-section-findings { border-top: 3px solid var(--cyan); box-shadow: 0 -6px 24px rgba(40, 211, 242, 0.08); }\n [data-theme=\"dark\"] .settings-section-behavior { border-top: 3px solid #8b5cf6; }\n [data-theme=\"dark\"] .settings-section-integrations { border-top: 3px solid var(--accent-solid); }\n\n /* \u2500\u2500 Card header label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] .card-header h2 { color: var(--cyan); font-family: var(--mono); letter-spacing: 0.14em; }\n\n /* \u2500\u2500 Review diff \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] .review-diff { background: rgba(156, 143, 248, 0.08); border-color: rgba(156, 143, 248, 0.16); }\n [data-theme=\"dark\"] .review-diff-pane { background: rgba(10, 10, 26, 0.6); }\n [data-theme=\"dark\"] .diff-del { background: rgba(248, 113, 113, 0.18); color: #fca5a5; }\n [data-theme=\"dark\"] .diff-ins { background: rgba(74, 222, 128, 0.18); color: #86efac; }\n\n /* \u2500\u2500 Status LED gets a wider aura \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] .status-led-ok { background: #4ade80; box-shadow: 0 0 14px rgba(74, 222, 128, 0.7); }\n [data-theme=\"dark\"] .status-led-warn { background: #fbbf24; box-shadow: 0 0 14px rgba(251, 191, 36, 0.7); }\n [data-theme=\"dark\"] .status-led-err { background: #f87171; box-shadow: 0 0 14px rgba(248, 113, 113, 0.7); }\n\n /* \u2500\u2500 Scrollbars \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] ::-webkit-scrollbar { width: 10px; height: 10px; }\n [data-theme=\"dark\"] ::-webkit-scrollbar-track { background: rgba(10, 10, 26, 0.6); }\n [data-theme=\"dark\"] ::-webkit-scrollbar-thumb {\n background: linear-gradient(180deg, rgba(124, 58, 237, 0.55), rgba(40, 211, 242, 0.35));\n border-radius: 6px;\n border: 2px solid rgba(10, 10, 26, 0.8);\n }\n [data-theme=\"dark\"] ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(124, 58, 237, 0.75), rgba(40, 211, 242, 0.55)); }\n\n /* \u2500\u2500 Selection colour \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] ::selection { background: rgba(124, 58, 237, 0.55); color: #fff; }\n\n /* \u2500\u2500 Finding detail cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] .finding-detail-card { background: rgba(18, 18, 42, 0.65); border-color: rgba(156, 143, 248, 0.16); }\n [data-theme=\"dark\"] .finding-detail-card[open] summary { background: linear-gradient(90deg, rgba(124, 58, 237, 0.2), transparent); }\n [data-theme=\"dark\"] .finding-score-indicator.healthy { background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.8); }\n [data-theme=\"dark\"] .finding-score-indicator.decaying { background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.8); }\n [data-theme=\"dark\"] .finding-score-indicator.stale { background: #f87171; box-shadow: 0 0 8px rgba(248, 113, 113, 0.8); }\n\n /* \u2500\u2500 kbd chip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] kbd { background: rgba(10, 10, 26, 0.7); border: 1px solid rgba(156, 143, 248, 0.22); color: var(--ink-secondary); box-shadow: 0 1px 0 rgba(124, 58, 237, 0.18); }\n\n /* \u2500\u2500 Mono numerals \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] .project-card-stat strong,\n [data-theme=\"dark\"] .count,\n [data-theme=\"dark\"] .badge-count { font-family: var(--mono); font-variant-numeric: tabular-nums; }\n\n /* \u2500\u2500 Phren pixel mascot for empty states \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n /* Data URI = the 24\u00D724 phren sprite (base palette, default idle pose). */\n [data-theme=\"dark\"] .project-detail-empty::before,\n [data-theme=\"dark\"] .reader-empty::before,\n [data-theme=\"dark\"] .cmdpal-empty::before {\n content: \"\";\n display: block;\n width: 96px;\n height: 96px;\n margin: 0 auto 18px;\n image-rendering: pixelated;\n opacity: 0.92;\n filter: drop-shadow(0 0 16px rgba(124, 58, 237, 0.45));\n animation: phrenBreathe 3.4s ease-in-out infinite;\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" shape-rendering=\"crispEdges\"><g fill=\"rgb(103,226,248)\"><rect x=\"16\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"18\" y=\"5\" width=\"1\" height=\"1\"/></g><g fill=\"rgb(156,143,248)\"><rect x=\"8\" y=\"7\" width=\"9\" height=\"1\"/><rect x=\"7\" y=\"8\" width=\"11\" height=\"1\"/><rect x=\"6\" y=\"9\" width=\"13\" height=\"1\"/><rect x=\"6\" y=\"10\" width=\"13\" height=\"1\"/><rect x=\"6\" y=\"11\" width=\"13\" height=\"1\"/><rect x=\"6\" y=\"12\" width=\"13\" height=\"1\"/></g><g fill=\"rgb(126,107,245)\"><rect x=\"6\" y=\"13\" width=\"13\" height=\"1\"/><rect x=\"6\" y=\"14\" width=\"13\" height=\"1\"/></g><g fill=\"rgb(107,87,232)\"><rect x=\"7\" y=\"15\" width=\"11\" height=\"1\"/></g><g fill=\"rgb(89,69,197)\"><rect x=\"8\" y=\"16\" width=\"9\" height=\"1\"/></g><g fill=\"rgb(18,18,42)\"><rect x=\"7\" y=\"12\" width=\"1\" height=\"1\"/><rect x=\"11\" y=\"12\" width=\"1\" height=\"1\"/><rect x=\"11\" y=\"15\" width=\"2\" height=\"1\"/></g><g fill=\"rgb(158,161,248)\"><rect x=\"9\" y=\"19\" width=\"2\" height=\"1\"/><rect x=\"12\" y=\"19\" width=\"2\" height=\"1\"/></g></svg>');\n background-repeat: no-repeat;\n background-size: contain;\n }\n @keyframes phrenBreathe {\n 0%, 100% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 16px rgba(124, 58, 237, 0.45)); }\n 50% { transform: scale(1.03) translateY(-3px); filter: drop-shadow(0 0 24px rgba(124, 58, 237, 0.65)); }\n }\n [data-theme=\"dark\"] .project-detail-empty,\n [data-theme=\"dark\"] .reader-empty,\n [data-theme=\"dark\"] .cmdpal-empty {\n padding-top: 42px !important;\n color: var(--muted);\n font-family: var(--font);\n }\n\n /* \u2500\u2500 Title chromatic hint (very subtle RGB offset) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n [data-theme=\"dark\"] .project-detail-header h2,\n [data-theme=\"dark\"] .reader-title {\n text-shadow:\n -0.5px 0 rgba(124, 58, 237, 0.55),\n 0.5px 0 rgba(40, 211, 242, 0.5);\n letter-spacing: -0.01em;\n }\n\n /* \u2500\u2500 Graph canvas breathe \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @keyframes graphCanvasPulse {\n 0%, 100% { filter-opacity: 1; }\n 50% { filter-opacity: 1.08; }\n }\n";