.ha-panel{margin:8px;padding:12px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-2);display:flex;flex-direction:column;gap:10px;font-size:12px}.ha-panel__head{display:flex;flex-direction:column;gap:2px}.ha-panel__title{font-weight:700;font-size:13px}.ha-panel__meta{color:var(--text-dim);font-size:11px}.ha-panel__toolbar{display:flex;flex-wrap:wrap;gap:6px}.ha-btn{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);padding:6px 10px;cursor:pointer;font:inherit;font-size:11px}.ha-btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);font-weight:600}.ha-btn--ghost{opacity:.85}.ha-panel__modes{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.ha-panel__modes-label{color:var(--text-dim);margin-right:4px}.ha-mode{background:var(--surface-3);border:1px solid var(--border);border-radius:999px;padding:5px 12px;cursor:pointer;font:inherit;font-size:11px;color:var(--text)}.ha-mode--active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);font-weight:600}.ha-panel__readout{font-family:ui-monospace,monospace;font-size:11px;color:var(--text-dim);padding:6px 8px;background:var(--surface-1);border-radius:var(--r-sm);border:1px solid var(--border-soft);word-break:break-all}.ha-panel__charts{display:flex;flex-direction:column;gap:10px}.ha-chart-wrap{display:flex;flex-direction:column;gap:4px}.ha-chart-label{font-size:11px;color:var(--text-dim);font-weight:600}.ha-chart-wrap canvas{width:100%;height:auto;border-radius:var(--r-sm);border:1px solid var(--border-soft)}.ha-panel__toggle{display:flex;align-items:center;gap:6px;color:var(--text-dim);font-size:11px}