.longevity-dialog { width: min(960px, calc(100vw - 32px)); max-height: 90vh; box-sizing: border-box; overflow: auto; border: 1px solid #718096; border-radius: 12px; padding: 24px; color: var(--text, #172b3a); background: var(--bg, #fff); }
.longevity-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.longevity-dialog header { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.longevity-dialog h2 { margin-top: 0; }
.longevity-dialog p { line-height: 1.55; }
.longevity-dialog label { display: block; margin: 8px 0; }
.longevity-dialog input:not([type=checkbox]), .longevity-dialog select { box-sizing: border-box; width: 100%; max-width: 100%; padding: 10px; font: inherit; }
.longevity-dialog fieldset { min-width: 0; border: 1px solid #8493a3; border-radius: 8px; padding: 12px; }
.longevity-dialog [hidden] { display: none !important; }
.longevity-people, .longevity-controls, .longevity-cards, .longevity-comparisons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.longevity-cards section, .longevity-comparisons section { border: 1px solid #8493a3; border-radius: 8px; padding: 16px; }
.longevity-dialog h4 { margin-top: 0; }
.longevity-dialog dt { font-weight: 600; margin-top: 12px; }
.longevity-dialog dd { margin: 4px 0 12px; }
.longevity-dialog details { margin: 16px 0; }
.longevity-dialog summary { cursor: pointer; padding: 8px 0; }
.longevity-dialog button { cursor: pointer; min-height: 40px; }
.longevity-dialog button:disabled { cursor: default; opacity: .55; }
.longevity-dialog :focus-visible { outline: 3px solid #3984bd; outline-offset: 3px; }
.longevity-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.longevity-actions > label { flex-basis: 100%; }
.longevity-change { padding: 12px; border-left: 4px solid #3984bd; }
#longevity-errors { color: var(--fold, #ba3131); font-weight: 600; }
.longevity-chart { margin: 20px 0; overflow-x: auto; }
.longevity-chart svg { width: 100%; min-width: 650px; font-size: 12px; }
.longevity-table-wrap { overflow-x: auto; }
.longevity-dialog table { width: 100%; min-width: 600px; border-collapse: collapse; }
.longevity-dialog th, .longevity-dialog td { padding: 8px; border-bottom: 1px solid #8493a3; text-align: left; }
@media (max-width: 600px) { .longevity-dialog { padding: 16px; } .longevity-people, .longevity-controls, .longevity-cards, .longevity-comparisons { grid-template-columns: 1fr; } .longevity-actions button { width: 100%; } }