[hidden] { display: none !important; }
.chart-page { max-width: 760px; margin: 0 auto; }
.chart-start-page { text-align: left; }
.chart-page h1 { max-width: 14ch; }
.chart-page h2 { margin: 32px 0 16px; }
.chart-page h3 { font-size: 1.3rem; margin: 20px 0 10px; }
.chart-form { display: grid; gap: 24px; margin-top: 32px; }
.chart-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.chart-form legend, .chart-field > span { display: block; font-weight: 650; margin-bottom: 9px; }
.chart-field { display: block; margin-top: 12px; }
.chart-form input:not([type=checkbox]), .chart-form select { width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 1px solid #5c5768; border-radius: 10px; color: #fff; background: #171328; font: inherit; color-scheme: dark; }
.chart-form input:focus-visible, .chart-form select:focus-visible, .place-result:focus-visible { outline: 3px solid #d4b184; outline-offset: 3px; }
.chart-check { display: flex; align-items: flex-start; gap: 12px; margin: 16px 0; }
.chart-check input { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px; accent-color: #d4b184; }
.chart-check span { line-height: 1.5; }
.chart-form small, .chart-page .chart-note { display: block; color: #c2bdce; margin-top: 12px; line-height: 1.5; }
.place-results { display: grid; gap: 8px; margin-top: 12px; }
.place-result { min-height: 48px; padding: 14px; text-align: left; background: #211b32; color: #fff; border: 1px solid #5c5768; border-radius: 10px; font: inherit; cursor: pointer; }
.chart-status { min-height: 1.5em; margin: 24px 0 16px; color: #e4c89f; }
.chart-table-wrap { max-width: 100%; overflow-x: auto; }
.chart-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.chart-table th, .chart-table td { text-align: left; border-bottom: 1px solid #4a425b; padding: 13px 8px; }
.chart-table caption { text-align: left; margin-bottom: 12px; font-weight: 650; }
.chart-table thead th { font-size: .875rem; color: #c2bdce; }
.chart-reading-list p { white-space: pre-line; line-height: 1.7; }
.chart-continuation { border-top: 1px solid #4a425b; margin-top: 32px; padding-top: 8px; }
.chart-page button:disabled { opacity: .65; cursor: wait; }
@media (max-width: 480px) { .chart-page.utility-card { padding: 24px 18px; } .chart-table th, .chart-table td { padding: 12px 5px; font-size: .9rem; } }