­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ /* ── Element Pack Debug Panel ─────────────────────────────── */ :root { --epd-bg: #1e1e2e; --epd-surface: #181825; --epd-overlay: #313244; --epd-border: #45475a; --epd-text: #cdd6f4; --epd-subtext: #a6adc8; --epd-blue: #89b4fa; --epd-green: #a6e3a1; --epd-yellow: #fab387; --epd-red: #f38ba8; --epd-lavender: #b4befe; --epd-teal: #94e2d5; --epd-pink: #f5c2e7; --epd-radius: 8px; --epd-font: 'SF Mono', 'Cascadia Code', 'Fira Code', 'JetBrains Mono', Consolas, monospace; } /* ── Toggle Button ───────────────────────────────────────── */ #ep-debug-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 999999; width: 48px; height: 48px; border-radius: 50%; background: var(--epd-bg); border: 2px solid var(--epd-blue); color: var(--epd-blue); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 24px rgba(0,0,0,.4); transition: transform .15s, background .15s; line-height: 1; } #ep-debug-toggle:hover { transform: scale(1.1); background: var(--epd-overlay); } #ep-debug-toggle.active { background: var(--epd-blue); color: var(--epd-bg); } /* ── Panel Container ─────────────────────────────────────── */ #ep-debug-panel { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999998; height: 380px; background: var(--epd-bg); border-top: 2px solid var(--epd-border); font-family: var(--epd-font); font-size: 12px; color: var(--epd-text); display: none; flex-direction: column; box-shadow: 0 -4px 32px rgba(0,0,0,.5); } #ep-debug-panel.open { display: flex; } /* ── Resize Handle ───────────────────────────────────────── */ #ep-debug-panel .epd-resize { height: 4px; cursor: ns-resize; background: transparent; position: relative; flex-shrink: 0; } #ep-debug-panel .epd-resize::after { content: ''; position: absolute; top: 1px; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; background: var(--epd-border); border-radius: 2px; } /* ── Header ──────────────────────────────────────────────── */ #ep-debug-panel .epd-header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 36px; background: var(--epd-surface); border-bottom: 1px solid var(--epd-border); flex-shrink: 0; } #ep-debug-panel .epd-header-title { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--epd-blue); } #ep-debug-panel .epd-header-stats { display: flex; gap: 16px; font-size: 11px; } #ep-debug-panel .epd-stat { display: flex; align-items: center; gap: 4px; } #ep-debug-panel .epd-stat-label { color: var(--epd-subtext); } #ep-debug-panel .epd-stat-value { font-weight: 600; } #ep-debug-panel .epd-close { background: none; border: none; color: var(--epd-subtext); cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 4px; line-height: 1; } #ep-debug-panel .epd-close:hover { background: var(--epd-overlay); color: var(--epd-text); } /* ── Tabs ────────────────────────────────────────────────── */ #ep-debug-panel .epd-tabs { display: flex; gap: 0; background: var(--epd-surface); border-bottom: 1px solid var(--epd-border); padding: 0 8px; flex-shrink: 0; } #ep-debug-panel .epd-tab { padding: 8px 14px; cursor: pointer; color: var(--epd-subtext); font-size: 11px; font-weight: 500; border-bottom: 2px solid transparent; transition: color .1s, border-color .1s; user-select: none; white-space: nowrap; } #ep-debug-panel .epd-tab:hover { color: var(--epd-text); } #ep-debug-panel .epd-tab.active { color: var(--epd-blue); border-bottom-color: var(--epd-blue); } #ep-debug-panel .epd-tab .epd-badge { display: inline-block; background: var(--epd-overlay); color: var(--epd-subtext); font-size: 10px; padding: 1px 5px; border-radius: 8px; margin-left: 4px; font-weight: 600; } #ep-debug-panel .epd-tab.active .epd-badge { background: rgba(137,180,250,.15); color: var(--epd-blue); } /* ── Tab Content ─────────────────────────────────────────── */ #ep-debug-panel .epd-content { flex: 1; overflow: auto; padding: 12px 16px; } #ep-debug-panel .epd-content::-webkit-scrollbar { width: 6px; } #ep-debug-panel .epd-content::-webkit-scrollbar-track { background: var(--epd-surface); } #ep-debug-panel .epd-content::-webkit-scrollbar-thumb { background: var(--epd-border); border-radius: 3px; } #ep-debug-panel .epd-tab-pane { display: none; } #ep-debug-panel .epd-tab-pane.active { display: block; } /* ── Overview Grid ───────────────────────────────────────── */ .epd-overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .epd-card { background: var(--epd-surface); border: 1px solid var(--epd-border); border-radius: var(--epd-radius); padding: 14px; } .epd-card-title { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--epd-subtext); margin-bottom: 8px; } .epd-card-value { font-size: 22px; font-weight: 700; line-height: 1.2; } .epd-card-sub { font-size: 11px; color: var(--epd-subtext); margin-top: 4px; } .epd-card-bar { height: 4px; background: var(--epd-overlay); border-radius: 2px; margin-top: 8px; overflow: hidden; } .epd-card-bar-fill { height: 100%; border-radius: 2px; transition: width .3s; } /* ── Table ───────────────────────────────────────────────── */ .epd-table-wrap { overflow-x: auto; } .epd-table { width: 100%; border-collapse: collapse; font-size: 11px; } .epd-table th { text-align: left; padding: 8px 10px; color: var(--epd-subtext); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; background: var(--epd-surface); border-bottom: 1px solid var(--epd-border); cursor: pointer; user-select: none; white-space: nowrap; position: sticky; top: 0; z-index: 1; } .epd-table th:hover { color: var(--epd-blue); } .epd-table th .epd-sort-arrow { margin-left: 3px; font-size: 9px; opacity: .4; } .epd-table th.sorted .epd-sort-arrow { opacity: 1; color: var(--epd-blue); } .epd-table td { padding: 6px 10px; border-bottom: 1px solid rgba(69,71,90,.3); white-space: nowrap; } .epd-table tr:hover td { background: rgba(49,50,68,.4); } .epd-table .epd-widget-name { color: var(--epd-lavender); font-weight: 500; } .epd-table .epd-widget-id { color: var(--epd-subtext); font-size: 10px; margin-left: 6px; } /* ── Performance Colors ──────────────────────────────────── */ .epd-perf-good { color: var(--epd-green); } .epd-perf-ok { color: var(--epd-yellow); } .epd-perf-bad { color: var(--epd-red); } /* ── Query Details ───────────────────────────────────────── */ .epd-query-row { background: var(--epd-surface); border: 1px solid var(--epd-border); border-radius: 4px; margin: 6px 0; padding: 8px 10px; font-size: 11px; overflow-x: auto; } .epd-query-sql { color: var(--epd-teal); word-break: break-all; white-space: pre-wrap; } .epd-query-time { color: var(--epd-subtext); margin-top: 4px; font-size: 10px; } /* ── Assets Table ────────────────────────────────────────── */ .epd-asset-handle { color: var(--epd-teal); font-weight: 500; font-size: 11px; } .epd-asset-src { color: var(--epd-subtext); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; font-size: 10px; display: block; margin-top: 1px; } .epd-asset-ver { color: var(--epd-subtext); font-size: 9px; margin-left: 4px; opacity: .7; } .epd-type-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: .04em; } .epd-type-js { background: rgba(250,179,135,.15); color: var(--epd-yellow); } .epd-type-css { background: rgba(137,180,250,.15); color: var(--epd-blue); } .epd-compress-badge { font-size: 9px; color: var(--epd-green); font-weight: 600; } .epd-cache-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 600; } .epd-cached { background: rgba(166,227,161,.15); color: var(--epd-green); } .epd-network { background: rgba(243,139,168,.1); color: var(--epd-subtext); } .epd-source-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 600; } .epd-src-ep { background: rgba(137,180,250,.15); color: var(--epd-blue); } .epd-src-el { background: rgba(180,190,254,.12); color: var(--epd-lavender); } .epd-src-other { color: var(--epd-subtext); } /* ── Environment ─────────────────────────────────────────── */ .epd-env-grid { display: grid; grid-template-columns: 200px 1fr; gap: 0; font-size: 11px; } .epd-env-label { padding: 6px 0; color: var(--epd-subtext); border-bottom: 1px solid rgba(69,71,90,.2); } .epd-env-value { padding: 6px 0; color: var(--epd-text); border-bottom: 1px solid rgba(69,71,90,.2); font-weight: 500; } .epd-env-value.epd-on { color: var(--epd-green); } .epd-env-value.epd-off { color: var(--epd-subtext); } /* ── JS Timing Section ───────────────────────────────────── */ .epd-js-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 16px; } .epd-js-metric { background: var(--epd-surface); border: 1px solid var(--epd-border); border-radius: var(--epd-radius); padding: 10px 12px; } .epd-js-metric-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--epd-subtext); } .epd-js-metric-value { font-size: 18px; font-weight: 700; margin-top: 4px; } /* ── Widget Inspect ─────────────────────────────────────── */ .epd-inspect-highlight { outline: 3px solid rgba(137,180,250,1) !important; outline-offset: 3px; z-index: 9999; position: relative; } .epd-inspect-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 6px; border-radius: 4px; cursor: pointer; color: var(--epd-subtext); font-size: 13px; vertical-align: middle; transition: color .15s, background .15s; opacity: 0; } .epd-table tr:hover .epd-inspect-btn { opacity: 1; } .epd-inspect-btn:hover { color: var(--epd-blue); background: rgba(137,180,250,.15); } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 768px) { #ep-debug-panel { height: 60vh; } .epd-overview-grid { grid-template-columns: 1fr 1fr; } .epd-header-stats { display: none; } }