.hwid-section { border-top: 1px solid var(--line-2); margin-top: 32px; padding-top: 28px; }
.hwid-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.hwid-copy { max-width: 470px; }
.hwid-copy h2 { font: 500 19px var(--display); margin: 0 0 12px; letter-spacing: -.3px; }
.hwid-copy p { color: var(--t2); font-size: 14px; line-height: 1.8; }
.hwid-allowance { flex: 0 0 auto; text-align: right; }
.hwid-allowance strong { font: 500 52px/1 var(--display); letter-spacing: -2px; }
.hwid-allowance .hwid-total { font: 400 25px var(--display); color: var(--t3); margin-left: 6px; }
.hwid-allowance p { margin-top: 10px; color: var(--t2); font-size: 12px; }
.hwid-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }
.hwid-refresh { font-size: 12px; color: var(--t2); padding: 10px 0; text-decoration: underline; text-underline-offset: 4px; }
.hwid-refresh:hover { color: var(--t1); }
.hwid-next { margin-top: 20px; font-size: 12px; color: var(--t2); line-height: 1.7; }
.hwid-notice { margin-top: 20px; border-left: 2px solid var(--acc); padding: 3px 0 3px 14px; font-size: 13px; color: #f3a6b3; line-height: 1.7; }
.hwid-notice.is-success { border-color: var(--green); color: #9de9cf; }
.hwid-notice[hidden] { display: none; }
.hwid-section button:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }
@media(max-width:640px) { .hwid-summary { flex-direction: column-reverse; gap: 24px; } .hwid-allowance { text-align: left; } .hwid-section { margin-top: 24px; padding-top: 24px; } }

/* Hover, keyboard focus and touch access to the reset policy. */
.hwid-actions { position: relative; }
.hwid-policy-help { display: inline-flex; align-items: center; }
.hwid-info { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--t2); cursor: help; }
.hwid-info:hover, .hwid-info:focus-visible { color: var(--t1); background: rgba(255,255,255,.05); }
.hwid-policy-tooltip { position: absolute; z-index: 10; left: 0; bottom: calc(100% + 8px); width: 340px; max-width: 100%; padding: 13px 16px; border: 1px solid var(--line-2); border-radius: 8px; background: #19191e; color: #c9c9d0; box-shadow: 0 8px 28px rgba(0,0,0,.3); font-size: 12px; line-height: 1.8; font-weight: 400; text-align: left; visibility: hidden; opacity: 0; transition: opacity .15s; }
.hwid-policy-tooltip::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 10px; }
.hwid-policy-help:hover .hwid-policy-tooltip, .hwid-policy-help:focus-within .hwid-policy-tooltip { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hwid-policy-tooltip { transition: none; } }