:root {
    color-scheme: light dark;
    --border: #8884;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    line-height: 1.5;
}

nav {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

nav a {
    text-decoration: none;
    font-weight: 600;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

th, td {
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border);
}

form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 24rem;
    margin-bottom: 1.5rem;
}

form.inline {
    display: inline-flex;
    max-width: none;
    margin: 0 0.25rem 0 0;
}

label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
}

label[hidden] {
    display: none;
}

input, select, textarea, button {
    font: inherit;
    padding: 0.4rem;
}

button {
    cursor: pointer;
}

.flash {
    color: #2a7;
    font-weight: 600;
}

.error {
    color: #d44;
    font-weight: 600;
}

.hint {
    font-size: 0.85rem;
    opacity: 0.75;
}

.notification-table-scroll {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}
.notification-table-scroll:focus-visible, .notification-error summary:focus-visible, .notification-event summary:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
}
.notification-table { min-width: 790px; margin-bottom: 0; }
.notification-table th, .notification-table td { vertical-align: top; padding: 0.65rem 0.6rem; }
.notification-table th, .notification-table td:nth-child(4) { white-space: nowrap; }
.delivery-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.delivery-sent { color: #166534; background: #dcfce7; }
.delivery-not-sent, .delivery-mixed { color: #475569; background: #e2e8f0; }
.notification-event summary { cursor: pointer; white-space: nowrap; }
.notification-event ul { list-style: none; padding: 0; margin: 0.65rem 0 0; width: 18rem; max-width: 65vw; }
.notification-event li + li { border-top: 1px solid var(--border); margin-top: 0.5rem; padding-top: 0.5rem; }
.event-delivery { font-size: 0.8rem; opacity: 0.8; }
.event-alert-error { color: #b91c1c; font-size: 0.85rem; margin: 0.25rem 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.notification-no-error { color: #64748b; }
.notification-error {
    color: #b91c1c;
    font-size: 0.85rem;
}
.notification-error summary { cursor: pointer; white-space: nowrap; }
.notification-error p {
    width: 18rem;
    max-width: 65vw;
    margin: 0.5rem 0 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
@media (prefers-color-scheme: dark) {
    .delivery-sent { color: #86efac; background: #14532d; }
    .delivery-not-sent, .delivery-mixed { color: #cbd5e1; background: #334155; }
    .notification-no-error { color: #94a3b8; }
    .notification-error { color: #fca5a5; }
    .event-alert-error { color: #fca5a5; }
}

.gold-input {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.gold-input input {
    flex: 1;
    min-width: 0;
}

.gold-amount, .gold-input input, .chart-currency {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
}

.currency-cell {
    text-align: right;
}

.gold-amount {
    display: inline-flex;
    align-items: center;
    gap: 0.15em;
    white-space: nowrap;
}

.threshold-value {
    margin-top: 0.15rem;
    font-size: 0.9rem;
}

.gold-coin {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    flex-shrink: 0;
}

.price-chart {
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.current-price {
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.current-price-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.current-price-heading h2 { margin: 0; font-size: 1.25rem; }
.price-region-control { flex-direction: row; align-items: center; gap: 0.5rem; }
.price-region-control[hidden], .region-price[hidden] { display: none; }
.region-price { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 1rem; }
.current-price-value { flex: 1 1 15rem; min-width: 0; }
.price-extremes { display: grid; flex: 1 1 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.price-range { min-width: 0; padding: .625rem .75rem; background: #8881; border: 1px solid var(--border); border-radius: .5rem; }
.price-range h4 { margin: 0 0 .3rem; font-size: .85rem; font-weight: 650; }
.price-range dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.price-range dt { font-size: .8rem; margin-bottom: .1rem; }
.price-range dd { margin: 0; font-size: .95rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-range .gold-coin { width: .8em; height: .8em; }
.price-range-empty { opacity: .5; }
.range-high, .price-trend-up { color: #15803d; }
.range-low, .price-trend-down { color: #bd2525; }
@media (prefers-color-scheme: dark) {
    .range-high, .price-trend-up { color: #4ade80; }
    .range-low, .price-trend-down { color: #ff8080; }
}
@media (max-width: 960px) {
    .price-extremes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .price-extremes { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}
.headline-price { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.headline-direction { display: inline-flex; align-items: center; gap: .3rem; font-size: 1rem; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ticker-marker { display: inline-block; color: inherit; font-size: .75em; vertical-align: .08em; }
.region-price h3 { margin: 0; font-size: 1rem; font-weight: 500; }
.featured-price { margin: 0.25rem 0; font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 700; }
.featured-price .gold-coin { width: 0.75em; height: 0.75em; vertical-align: 0; }
.price-updated { display: inline-block; position: relative; font-size: 0.85rem; }
.price-updated time { opacity: 0.75; }
.price-updated:focus-visible { outline: 2px solid #2563eb; outline-offset: 4px; border-radius: 2px; }
.price-timestamp {
    display: none;
    position: absolute;
    z-index: 2;
    top: calc(100% + 0.5rem);
    left: 0;
    width: max-content;
    max-width: min(28rem, 70vw);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    background: Canvas;
    color: CanvasText;
    box-shadow: 0 4px 12px #0003;
}
.price-updated:hover .price-timestamp, .price-updated:focus .price-timestamp { display: block; }
.price-chart { container-type: inline-size; }
.chart-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.chart-heading h2 { margin: 0; font-size: 1.25rem; }
.chart-ranges, .chart-regions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chart-ranges button { white-space: nowrap; }
.chart-range-short { display: none; }
@container (max-width: 42rem) {
    .chart-range-full { display: none; }
    .chart-range-short { display: inline; }
}
.chart-regions { margin-top: 0.75rem; }
.chart-instruction { margin: 0.5rem 0 0.75rem; }
.chart-status { margin: 0.5rem 0; }
.chart-ranges button:focus-visible, .chart-region:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.chart-ranges button, .chart-region { border: 1px solid var(--border); border-radius: 0.4rem; background: transparent; color: inherit; padding: 0.35rem 0.65rem; }
.chart-ranges button[aria-pressed="true"] { background: #2563eb; border-color: #2563eb; color: white; }
.chart-region::before { content: ''; display: inline-block; width: 0.65rem; height: 0.65rem; background: var(--region-color); border-radius: 50%; margin-right: 0.45rem; }
.chart-region[aria-pressed="false"] { opacity: 0.5; text-decoration: line-through; }
.chart-region:hover, .chart-region:focus-visible { border-color: var(--region-color); }
.chart-plot { min-width: 0; }
#price-chart { display: block; width: 100%; height: 300px; }
.chart-grid { stroke: var(--border); stroke-dasharray: 3 5; }
.chart-label { font-size: 12px; fill: currentColor; opacity: 0.7; }
.chart-empty { font-size: 16px; fill: currentColor; }
.chart-point { fill-opacity: 0; }
.chart-point:only-child, .chart-point:hover { fill-opacity: 1; }
#price-chart [data-series] { transition: opacity 120ms; }
@media (prefers-reduced-motion: reduce) { #price-chart [data-series] { transition: none; } }
.chart-history-link {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.35rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    text-underline-offset: 0.2em;
}
.chart-history-link:hover { text-decoration-thickness: 2px; }
.chart-history-link:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 4px;
    border-radius: 2px;
}

/* Alert row controls keep status and destructive actions distinct. */
.alert-toggle-form { margin: 0; }
.alert-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
    padding: .4rem .2rem;
}
.alert-switch-track {
    display: inline-block;
    width: 2.2rem;
    height: 1.3rem;
    border-radius: 1rem;
    background: #64748b;
    border: 1px solid #94a3b8;
    flex-shrink: 0;
}
.alert-switch-track::before {
    content: "";
    display: block;
    width: .95rem;
    height: .95rem;
    margin: .15rem;
    border-radius: 50%;
    background: white;
}
.alert-switch[aria-checked="true"] .alert-switch-track { background: #16804a; border-color: #4ade80; }
.alert-switch[aria-checked="true"] .alert-switch-track::before { transform: translateX(.9rem); }
.alert-delete { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; color: #475569; border-radius: .35rem; }
.alert-delete:hover { color: #fca5a5; background: #422329; }
.alert-switch:focus-visible, .alert-delete:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; }
.alert-delete-confirmation { flex-direction: row; align-items: center; gap: 1rem; }
.alert-confirm-delete { background: #991b1b; color: white; border: 1px solid #f87171; cursor: pointer; }

@media (prefers-color-scheme: dark) {
    .alert-delete { color: #94a3b8; }
    .alert-delete:hover { color: #fca5a5; }
}

.alert-triggered-time { display: block; position: relative; width: fit-content; margin-inline-start: auto; font-size: .85rem; margin-top: .2rem; }
.alert-triggered-time time, .alert-never-triggered { opacity: .75; }
.alert-triggered-time:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; border-radius: 2px; }
.alert-triggered-time:hover .price-timestamp, .alert-triggered-time:focus .price-timestamp { display: block; }
.alert-triggered-time .price-timestamp { left: auto; right: 0; }

.add-alert { margin: 0 0 1.5rem; }
.add-alert summary, .add-alert-submit {
    background: #2563eb;
    color: white;
    border: 1px solid #3b82f6;
    border-radius: .4rem;
    padding: .6rem 1rem;
    font-weight: 600;
    line-height: 1.25rem;
    cursor: pointer;
}
.add-alert summary { display: inline-flex; align-items: center; gap: .6rem; list-style: none; }
.add-alert summary::-webkit-details-marker { display: none; }
.add-alert summary::before { content: '+'; font-size: 1.25rem; font-weight: 400; }
.add-alert[open] summary::before { content: '−'; }
.add-alert summary:hover, .add-alert-submit:hover { background: #1d4ed8; }
.add-alert summary:focus-visible, .add-alert-submit:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; }
.add-alert-panel { margin-top: 1rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: .6rem; }
.add-alert-panel .error { margin: 0 0 1rem; }
.add-alert-form { flex-direction: row; flex-wrap: wrap; align-items: end; gap: 1rem; max-width: none; margin: 0; }
.add-alert-form label { gap: .5rem; min-width: 0; }
.add-alert-region { flex: 0 1 6rem; }
.add-alert-condition { flex: 1 1 15rem; }
.add-alert-form #gold-threshold { flex: 1 1 12rem; }
.add-alert-form input, .add-alert-form select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 2.75rem; border: 1px solid var(--border); border-radius: .35rem; padding: .5rem .6rem; }
.add-alert-form .gold-input { min-width: 0; min-height: 2.75rem; gap: .25rem; }
.add-alert-submit { min-height: 2.75rem; }
@media (max-width: 700px) {
    .add-alert-form { display: grid; grid-template-columns: minmax(0, 1fr); }
    .add-alert-submit { width: 100%; }
}

.alerts-table { table-layout: fixed; }
.alerts-table .alert-region-column { width: 14%; }
.alerts-table .alert-type-column { width: 16%; }
.alerts-table .alert-status-column { width: 16%; }
.alerts-table .alert-triggered-column { width: 30%; }
.alerts-table .alert-actions-column { width: 24%; }
.alert-edit:hover { color: #2563eb; background: #dbeafe; }
.alert-editing { background: #2563eb12; }
.alert-editing td:first-child { box-shadow: inset 3px 0 #3b82f6; }
.alert-editing .alert-edit { color: #2563eb; }
.alert-edit-cell { padding: 0 0 1rem; }
.alert-edit-cell .add-alert-panel { position: relative; margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.alert-edit-cell h2 { font-size: 1rem; margin: 0 0 1rem; padding-right: 2.75rem; }
.alert-edit-cell section:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.alert-edit-close { position: absolute; top: .5rem; right: .5rem; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: inherit; }
.alert-edit-close::before { content: ""; position: absolute; width: 2rem; height: 2rem; border-radius: 50%; background: #8883; }
.alert-edit-close svg { position: relative; }
.alert-edit-close:hover::before { background: #8885; }
.alert-edit-close:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.add-alert-form .alert-gold-field { flex: 1 1 12rem; }
@media (prefers-color-scheme: dark) {
    .alert-edit:hover { color: #93c5fd; background: #172554; }
    .alert-editing .alert-edit { color: #60a5fa; }
}
/* Fixed-price rows need room for the configured gold amount on narrow screens. */
.alerts-table:has(.threshold-value) .alert-type-column { width: 24%; }
.alerts-table:has(.threshold-value) .alert-actions-column { width: 16%; }
.alerts-table .threshold-value .gold-amount { white-space: normal; }
@media (max-width: 700px) {
    .alerts-table th { font-size: .85rem; }
}

form.settings-test-form { display: none; }
.settings-form { max-width: none; gap: 0; container-type: inline-size; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.settings-sidebar { display: grid; gap: 1.5rem; }
.settings-card { min-width: 0; padding: 1.35rem; border: 1px solid var(--border); border-radius: .6rem; }
.settings-card h2 { font-size: 1.15rem; margin: 0 0 1.25rem; }
.settings-card label { margin-bottom: 1.1rem; gap: .5rem; }
.settings-card input, .settings-card textarea { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: .35rem; padding: .55rem .65rem; background: #8882; color: inherit; }
.settings-card input { min-height: 2.75rem; }
.settings-card textarea { resize: vertical; }
.settings-card .hint { margin: 0; }
.settings-test { padding-top: 1.1rem; border-top: 1px solid var(--border); }
.settings-test .hint { margin-bottom: .75rem; }
.settings-test button { min-height: 2.75rem; border: 1px solid var(--border); border-radius: .35rem; padding: .55rem .9rem; }
.settings-save { margin-top: 1.35rem; display: flex; justify-content: flex-end; }
.settings-save button { min-height: 2.75rem; border: 1px solid #3b82f6; border-radius: .35rem; background: #2563eb; color: white; padding: .6rem 1.1rem; font-weight: 600; }
.settings-save button:hover { background: #1d4ed8; }
.settings-save button:focus-visible, .settings-test button:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; }
@container (max-width: 44rem) {
    .settings-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 752px) {
    .settings-layout { grid-template-columns: minmax(0, 1fr); }
}

.discord-channels { margin-bottom: 1.1rem; }
.discord-channels h3 { font-size: .9rem; font-weight: 400; margin: 0 0 .5rem; }
.discord-channel-list { display: grid; gap: .65rem; }
.discord-channel-row { display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem; align-items: start; gap: .5rem; padding: .75rem; border: 1px solid var(--border); border-radius: .4rem; }
.discord-channel-fields { min-width: 0; }
.discord-channel-fields label { margin: 0; }
.discord-channel-fields input { font-variant-numeric: tabular-nums; }
.discord-channel-name { display: block; margin-top: .4rem !important; overflow-wrap: anywhere; }
.discord-channel-name[hidden], .discord-channel-remove[hidden], .discord-channel-add[hidden] { display: none; }
.discord-channel-remove { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-top: 1.85rem; border: 0; border-radius: .35rem; background: transparent; color: inherit; opacity: .65; }
.discord-channel-remove:hover { color: #b91c1c; background: #8882; opacity: 1; }
.discord-channel-add { min-height: 2.75rem; margin: .75rem 0; padding: .5rem .85rem; border: 1px solid var(--border); border-radius: .35rem; }
.discord-channel-remove:focus-visible, .discord-channel-add:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
@media (prefers-color-scheme: dark) { .discord-channel-remove:hover { color: #fca5a5; } }

.discord-setup-help { margin-top: .65rem; font-size: .85rem; }
.discord-setup-help summary { width: fit-content; cursor: pointer; padding: .25rem 0; }
.discord-setup-help summary:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; border-radius: .15rem; }
.discord-setup-content { margin-top: .6rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: .35rem; }
.discord-setup-content p { margin: 0 0 .65rem; }
.discord-setup-content p:last-child { margin-bottom: 0; }
.discord-setup-content ol { margin: .65rem 0; padding-left: 1.25rem; }
.discord-setup-content li + li { margin-top: .4rem; }

.settings-save { align-items: center; gap: 1rem; flex-wrap: wrap; }
.settings-save-status { font-size: .85rem; opacity: .75; margin-right: auto; }
.settings-test-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.settings-card .test-result { margin: .5rem 0 0; font-size: .85rem; overflow-wrap: anywhere; }
.settings-save button:disabled, .settings-test button:disabled { opacity: .65; cursor: default; color: CanvasText; background: #8882; border-color: var(--border); }

.connection-caption { margin-bottom: 1rem !important; }
.connection-status-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.connection-status-list li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem; font-size: .85rem; }
.connection-badge { padding: .15rem .45rem; border-radius: 1rem; font-size: .75rem; white-space: nowrap; }
.configuration-present { background: #dcfce7; color: #166534; }
.configuration-missing { background: #e2e8f0; color: #475569; }
.connection-advanced { margin-top: 1rem; font-size: .85rem; }
.connection-advanced summary { cursor: pointer; }
.connection-advanced p { margin-top: .75rem !important; overflow-wrap: anywhere; }
.connection-advanced summary:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; }
@media (prefers-color-scheme: dark) {
    .configuration-present { background: #14532d; color: #86efac; }
    .configuration-missing { background: #334155; color: #cbd5e1; }
}

.history-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.history-export { border: 1px solid var(--border); border-radius: .35rem; padding: .55rem .8rem; text-decoration: none; }
.history-filters { flex-direction: row; flex-wrap: wrap; align-items: end; gap: .75rem; max-width: none; padding: 1rem; border: 1px solid var(--border); border-radius: .5rem; }
.history-filters label { flex: 1 1 8rem; min-width: 0; }
.history-filters input, .history-filters select { min-width: 0; min-height: 2.75rem; box-sizing: border-box; width: 100%; }
.history-filters button { min-height: 2.75rem; background: var(--action-bg,#2563eb); border: 1px solid var(--action-border,#3b82f6); color: var(--action-fg,white); border-radius: .35rem; padding: .5rem .85rem; }
.history-filters > a { padding: .65rem .25rem; }
.history-table-scroll { overflow-x: auto; }
.history-table-scroll table { min-width: 520px; }
.history-table-scroll:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.history-pagination { justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 1rem; padding: 1rem 0; border-bottom: 0; }

.observation-table-scroll { overflow-x: auto; }
.observation-table { width: 100%; }
.observation-table td, .observation-table th { padding: .65rem .7rem; }
.observation-table time { font-variant-numeric: tabular-nums; }
.observation-region { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.observation-region::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--observation-color); }
.region-us { --observation-color: #2563eb; }
.region-eu { --observation-color: #d97706; }
.region-kr { --observation-color: #b54ac4; }
.region-tw { --observation-color: #13947d; }
.observation-table tr:nth-child(2n) { background: #8881; }
.observation-table-scroll:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }

.observation-region { border: 1px solid var(--border); border-radius: 1rem; padding: .15rem .5rem; font-size: .85rem; font-weight: 600; }
/* Localized timestamps can wrap, keeping the filtered compact table fitted on phones. */
.history-table-scroll .observation-table { min-width: 0; }

.site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.5rem; padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.site-brand { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; font-size: 1rem; font-weight: 700; }
.site-brand img { width: 2.75rem; height: 2.75rem; object-fit: contain; flex-shrink: 0; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin: 0; padding: 0; border: 0; }
.site-nav a { color: inherit; opacity: .7; padding: .5rem 0; border-bottom: 2px solid transparent; font-weight: 500; }
.site-nav a[aria-current="page"] { opacity: 1; border-color: #3b82f6; font-weight: 700; }
.site-nav a:hover { opacity: 1; }
.site-nav a:focus-visible, .site-brand:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; border-radius: .15rem; }
@media(max-width:700px) { .site-header { align-items: start; } .site-nav { width: 100%; justify-content: space-between; gap: .6rem; font-size: .9rem; } }

:root { --action-bg: #2563eb; --action-fg: #fff; --action-border: #3b82f6; --action-hover: #1d4ed8; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; box-sizing: border-box; min-height: 2.75rem; padding: .55rem 1rem; border: 1px solid transparent; border-radius: .4rem; font: inherit; font-weight: 600; line-height: 1.25rem; text-decoration: none; cursor: pointer; }
.button-primary, .add-alert summary.button-primary, .settings-save button.button-primary, .add-alert-submit.button-primary { background: var(--action-bg); color: var(--action-fg); border-color: var(--action-border); }
.button-primary:hover, .add-alert summary.button-primary:hover, .settings-save button.button-primary:hover, .add-alert-submit.button-primary:hover { background: var(--action-hover); }
.button-secondary, .settings-test .button-secondary { background: transparent; color: inherit; border-color: var(--border); font-weight: 500; }
.button-secondary:hover { background: #8882; }
.button-danger { background: #b91c1c; border-color: #ef4444; color: #fff; }
.button-danger:hover { background: #991b1b; }
.button:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; }
.button:disabled { opacity: .6; cursor: default; }
.add-alert[open] summary.button-primary { background: transparent; color: inherit; border-color: var(--border); }

nav:not(.site-nav) > .activity-nav-link[aria-current="page"] { color: inherit; text-decoration: underline; text-underline-offset: .4rem; }
.activity-filters { flex-direction: row; flex-wrap: wrap; align-items: end; max-width: none; gap: .85rem; padding: 1rem; border: 1px solid var(--border); border-radius: .5rem; }
.activity-filters select { min-height: 2.75rem; }
.activity-filters .activity-error-filter { flex-direction: row; align-items: center; min-height: 2.75rem; gap: .5rem; }
.activity-filters button { min-height: 2.75rem; border: 1px solid var(--action-border,#3b82f6); border-radius: .35rem; background: var(--action-bg,#2563eb); color: var(--action-fg,white); padding: .5rem .85rem; }
.activity-filters > a { padding: .65rem .25rem; }
.activity-list { display: grid; gap: .9rem; }
.activity-event { padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: .5rem; }
.activity-event-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; }
.activity-event-heading h2 { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; font-size: 1rem; margin: 0; }
.activity-event-meta { display: flex; align-items: start; flex-wrap: wrap; gap: .8rem; margin-top: .85rem; font-size: .85rem; }
.activity-triggers { flex: 1 1 8rem; }
.activity-triggers summary { width: fit-content; cursor: pointer; }
.activity-triggers ul { margin: .75rem 0 0; padding-left: 1.1rem; display: grid; gap: .65rem; }
.activity-triggers .event-delivery { margin-top: .15rem; font-size: .8rem; opacity: .8; }
.activity-event > .notification-error { margin-top: .75rem; }
.activity-pagination { justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 1rem; padding: .75rem 0; border-bottom: 0; }
.activity-empty { padding: 2rem 1rem; border: 1px solid var(--border); border-radius: .5rem; }
.activity-triggers summary:focus-visible, .activity-filters button:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; }
.activity-event .price-timestamp { left: auto; right: 0; }

.activity-table-scroll { overflow-x: auto; }
.activity-table { min-width: 800px; }
.activity-table .activity-event { border: 0; padding: 0; border-radius: 0; }
.activity-table td, .activity-table th { vertical-align: top; padding: .75rem .6rem; }
.activity-table .activity-triggers { font-size: .85rem; }
.activity-table .price-updated { white-space: nowrap; }
.activity-table .price-timestamp { white-space: normal; }
.activity-table-scroll:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
@media (max-width: 700px) {
    .activity-table-scroll { overflow: visible; }
    .activity-table, .activity-table tbody { display: block; width: 100%; min-width: 0; }
    .activity-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .activity-table .activity-event { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; padding: 1rem; margin-bottom: .85rem; border: 1px solid var(--border); border-radius: .5rem; }
    .activity-table td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; }
    .activity-table td::before { display: block; content: attr(data-label); font-size: .75rem; opacity: .65; margin-bottom: .3rem; }
    .activity-table td[data-label="Errors"] { grid-column: 1 / -1; }
}
.button.button-primary, .button.button-secondary, .button.button-danger { border-radius: .4rem; }

/* Destination controls follow the existing settings cards and compact forms. */
.destination-intro { margin-bottom: 1.1rem !important; }
.destination-group { margin-bottom: 1.5rem; }
.destination-group h3 { font-size: 1rem; margin: 0 0 .75rem; }
.destination-row { padding: .85rem 0; border-bottom: 1px solid var(--border); min-width: 0; }
.destination-row:first-child { padding-top: 0; }
.destination-row label { margin-bottom: .35rem; }
.destination-name { display: block; overflow-wrap: anywhere; }
.destination-name[hidden] { display: none; }
.destination-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: .85rem; margin-top: .5rem; }
.destination-actions .button { padding: .25rem .65rem; min-height: 2rem; }
.destination-remove { margin-left: auto; font-size: 1.4rem; text-decoration: none; color: inherit; background: transparent; border: 0; padding: .1rem .5rem; }
.destination-remove:hover { color: #dc2626; }
.destination-group > .button { margin-top: .75rem; }
.trigger-destination-filter { max-width: none; flex-direction: row; align-items: end; flex-wrap: wrap; }
.trigger-destination-filter select { max-width: 100%; }
.trigger-copy { margin: 0 0 1.5rem; }
.trigger-copy summary { cursor: pointer; width: fit-content; }
.trigger-copy form { margin-top: .75rem; }
.alerts-table .destination-cell { overflow-wrap: anywhere; max-width: 12rem; font-size: .85rem; }
.delivery-details summary { cursor: pointer; }
.delivery-details ul { padding-left: 1rem; margin: .6rem 0 0; display: grid; gap: .65rem; }
.delivery-details li { overflow-wrap: anywhere; font-size: .85rem; }
.delivery-details .hint { margin: .15rem 0; }
.trigger-empty { padding: 1rem 0; }
@media(max-width:700px) {
    .alerts-table.has-destinations td, .alerts-table.has-destinations th { padding: .4rem .25rem; }
    .trigger-destination-filter label { width: 100%; }
    .activity-table td[data-label="Delivery"] { grid-column: 1 / -1; }
}
.trigger-table-scroll { overflow-x: auto; }
.add-alert-destination { grid-column: 1 / -1; }
.alerts-table.has-destinations { table-layout: fixed; }
.alerts-table.has-destinations col:first-child { width: 30%; }
.alerts-table.has-destinations col.alert-region-column { width: 7%; }
.alerts-table.has-destinations col.alert-type-column { width: 20%; }
.alerts-table.has-destinations col.alert-status-column { width: 8%; }
.alerts-table.has-destinations col.alert-triggered-column { width: 23%; }
.alerts-table.has-destinations col.alert-actions-column { width: 12%; }
@media(max-width:700px) {
    .trigger-table-scroll { overflow: visible; }
    .alerts-table, .alerts-table.has-destinations, .alerts-table tbody { display: block; width: 100%; min-width: 0; }
    .alerts-table colgroup { display: none; }
    .alerts-table tr:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
    .alerts-table tr:not(:first-child):not(.alert-edit-row) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; padding: 1rem; margin-bottom: .85rem; border: 1px solid var(--border); border-radius: .5rem; }
    .alerts-table td, .alerts-table.has-destinations td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; }
    .alerts-table td[data-label]::before { display: block; content: attr(data-label); font-size: .75rem; opacity: .65; margin-bottom: .3rem; }
    .alerts-table .destination-cell { grid-column: 1 / -1; max-width: none; }
    .alerts-table tr.alert-editing { margin-bottom: 0 !important; border-bottom: 0 !important; border-radius: .5rem .5rem 0 0 !important; }
    .alerts-table .alert-edit-row, .alerts-table .alert-edit-cell { display: block; }
    .alerts-table .alert-edit-row { margin-bottom: .85rem; }
    .alerts-table .alert-edit-row .add-alert-panel { margin: 0; border-radius: 0 0 .5rem .5rem; }
}

@media(max-width:700px) {
    .alerts-table tr.alert-editing { border-left: 3px solid #3b82f6 !important; }
    .alerts-table tr.alert-editing td:first-child { border-left: 0; padding-left: 0; }
}

.destination-actions button:disabled { opacity: .65; cursor: default; }
.activity-filters label { min-width: 0; max-width: 100%; }
.activity-filters select { max-width: 100%; }