.metrics-panel { position:fixed; z-index:1200; bottom:16px; left:16px; width:min(440px,calc(100% - 32px)); max-height:80vh; overflow:auto; padding:16px; border:1px solid #b9934b; border-radius:12px; background:#1d160d; color:#f5ead5; box-shadow:0 4px 20px #0005; font-family:var(--f-body,Georgia,serif); font-size:16px; line-height:1.45; }
.metrics-panel[hidden] { display:none; }
.metrics-panel h2 { font-family:var(--f-display,Georgia,serif); font-size:18px; margin:0 0 6px; }
.metrics-panel p { margin:10px 0; }
.metrics-panel summary { cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.metrics-panel details p { font-size:15px; }
.metrics-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 8px; }
.metrics-actions button { min-height:48px; padding:10px; border:1px solid #d5b774; border-radius:7px; background:#352615; color:#fff2d6; cursor:pointer; font:inherit; }
.metrics-actions button:hover { background:#4d371d; }
.metrics-actions button:disabled { opacity:.65; cursor:wait; }
.metrics-panel a:focus-visible,.metrics-panel button:focus-visible,.metrics-panel summary:focus-visible,.metrics-preferences:focus-visible { outline:3px solid #fff2d6; outline-offset:3px; }
.metrics-preferences { display:block; margin:16px 0; padding:10px 0; border:0; background:transparent; color:var(--gold-200,#eddbab); text-decoration:underline; font:inherit; cursor:pointer; min-height:44px; }
@media(max-width:480px){.metrics-panel{padding:16px;bottom:8px;width:calc(100% - 16px)}.metrics-actions{gap:8px}}

.metrics-panel p:empty { display:none; }
.metrics-panel details { margin-top:6px; }
.metrics-panel summary { min-height:44px; display:list-item; font-size:16px; }
@media(max-width:480px){.metrics-panel{left:8px}}

.metrics-panel a { color:#fff2d6; text-underline-offset:3px; }