.panel-eyebrow, .page-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-soft); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .icon-button, .segmented button, .ghost-button { min-height: 38px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(201, 122, 61, 0.08); cursor: pointer; } .icon-button { width: 38px; display: inline-flex; align-items: center; justify-content: center; } .ghost-button { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; color: #cbd5e1; } .segmented, .view-switch { display: inline-flex; flex: 0 0 auto; padding: 3px; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: var(--radius); background: rgba(2, 6, 23, 0.35); } .segmented button { border-color: transparent; padding: 0 10px; } .view-switch button { min-height: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: calc(var(--radius) - 3px); background: transparent; color: var(--muted); cursor: pointer; } .view-switch button:hover, .view-switch__button--active { border-color: rgba(212, 165, 116, 0.34); background: rgba(201, 122, 61, 0.14); color: #f8fafc; } .segmented button:hover, .icon-button:hover { border-color: var(--line-strong); background: rgba(201, 122, 61, 0.18); } .source-chip, .status-pill, .metric-card__state { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: 0.78rem; } .source-chip { border: 1px solid var(--line); color: #cbd5e1; } .status-pill--ok { border: 1px solid rgba(34, 197, 94, 0.36); background: rgba(34, 197, 94, 0.12); color: #86efac; } .status-pill--warn { border: 1px solid rgba(245, 158, 11, 0.36); background: rgba(245, 158, 11, 0.12); color: #facc15; } .status-pill--error { border: 1px solid rgba(239, 68, 68, 0.36); background: rgba(239, 68, 68, 0.12); color: #fca5a5; } .status-pill--muted { border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(148, 163, 184, 0.08); color: #cbd5e1; } .search-box { min-width: min(320px, 100%); padding-left: 10px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: var(--radius); background: rgba(15, 23, 42, 0.72); } .search-box input { flex: 1; border: 0; background: transparent; padding-left: 0; } .empty-panel { min-height: 260px; display: grid; place-items: center; color: var(--muted); border: 1px dashed rgba(148, 163, 184, 0.2); border-radius: var(--radius); } @media (max-width: 680px) { .search-box { width: 100%; } .segmented { width: 100%; overflow-x: auto; } .view-switch { width: 100%; } .view-switch button { flex: 1; } }