.metrics-choice[hidden], .metrics-preferences[hidden] { display: none; }
.metrics-choice { position: fixed; z-index: 20; left: 16px; right: 16px; bottom: 16px; margin: auto; max-width: 720px; padding: 20px; border: 1px solid #536578; border-radius: 14px; background: #101a29; color: #f4f7fb; box-shadow: 0 12px 44px #0008; }
.metrics-choice h2 { font-size: 1.15rem; line-height: 1.35; margin: 0 0 8px; }
.metrics-choice p { font-size: .92rem; line-height: 1.55; color: #d0d9e6; margin: 0 0 14px; }
.metrics-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.metrics-actions button { flex: 1 1 220px; min-height: 44px; padding: 10px 14px; border: 1px solid #8ba1b7; border-radius: 8px; background: #162538; color: #f4f7fb; font: inherit; font-size: .88rem; cursor: pointer; }
.metrics-actions button:hover { background: #23384f; }
.metrics-actions button:focus-visible, .metrics-preferences:focus-visible { outline: 3px solid #00d8ed; outline-offset: 3px; }
.metrics-preferences { border: 0; padding: 8px 0; color: #d0d9e6; background: transparent; text-decoration: underline; font: inherit; font-size: .85rem; cursor: pointer; }
@media(max-width: 480px) { .metrics-choice { left: 10px; right: 10px; bottom: 10px; padding: 16px; } .metrics-actions { gap: 8px; } }

.metrics-notice {width: min(1100px, calc(100% - 40px)); margin: 24px auto; padding: 20px 0; border-top: 1px solid #64748b55; text-align: left;}
.metrics-notice h2 {font: 600 1rem/1.4 Arial, sans-serif; margin: 0 0 8px;}
.metrics-notice p {font: 400 .85rem/1.65 Arial, sans-serif; max-width: 90ch; margin: 0 0 8px; color: inherit;}
.metrics-notice a, .metrics-choice a {color: #9ddfff; text-decoration: underline;}