:root {
    color-scheme: light;
    --bg: #f4f0ea;
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --text: #1f2933;
    --muted: #64748b;
    --border: #d9e2ec;
    --accent: #2563eb;
    --accent-strong: #1d4ed8;
    --danger: #b91c1c;
    --success: #047857;
    --warning: #92400e;
    --shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
    --radius: 8px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.5;
}

a {
    color: inherit;
}

code {
    border-radius: 5px;
    background: rgba(15, 23, 42, 0.08);
    padding: 0.12rem 0.28rem;
}

.auth-shell,
.dashboard-shell {
    width: min(100% - 32px, 1080px);
    margin: 0 auto;
    padding: 48px 0;
}

.auth-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
}

.panel {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: clamp(22px, 4vw, 36px);
}

.panel-narrow {
    max-width: 560px;
}

.eyebrow,
.label {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

h1,
h2,
h3 {
    margin: 0;
    line-height: 1.1;
}

h1 {
    margin-top: 8px;
    font-size: clamp(2rem, 6vw, 3.75rem);
}

h2 {
    font-size: 1.35rem;
}

h3 {
    font-size: 1rem;
}

.lede,
.notice {
    color: var(--muted);
}

.lede {
    margin: 18px 0 0;
    max-width: 48rem;
    font-size: 1.04rem;
}

.notice {
    margin: 22px 0 0;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    min-height: 44px;
    margin-top: 28px;
    border-radius: var(--radius);
    background: var(--accent);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0 18px;
    text-decoration: none;
    transition: background 160ms ease, transform 160ms ease;
}

.button:hover {
    background: var(--accent-strong);
    transform: translateY(-1px);
}

.button:focus-visible,
.accordion-toggle:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.28);
    outline-offset: 3px;
}

.button-full {
    width: 100%;
}

.button-secondary {
    margin-top: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

.button-secondary:hover {
    background: var(--surface-muted);
}

.login-form {
    display: grid;
    gap: 12px;
    margin-top: 26px;
}

.login-form label {
    color: var(--text);
    font-weight: 700;
}

.login-form input {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #ffffff;
    color: var(--text);
    font: inherit;
    padding: 10px 12px;
}

.login-form input:focus {
    border-color: var(--accent);
    outline: 3px solid rgba(37, 99, 235, 0.16);
}

.alert {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 22px 0 0;
    padding: 12px 14px;
}

.alert-error {
    border-color: rgba(185, 28, 28, 0.28);
    background: rgba(185, 28, 28, 0.08);
    color: var(--danger);
}

.alert-warning {
    border-color: rgba(180, 83, 9, 0.28);
    background: rgba(180, 83, 9, 0.08);
    color: var(--warning);
}

.dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.logout-form {
    margin: 0;
}

.logout-form .button {
    margin-top: 0;
}

.role-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-weight: 700;
    padding: 0 14px;
}

.dashboard-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.dashboard-meta > div {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.72);
    padding: 14px;
}

.dashboard-meta strong {
    display: block;
    margin-top: 4px;
}

.status-ok {
    color: var(--success);
}

.status-error {
    color: var(--danger);
}

.empty-state {
    margin-top: 18px;
}

.empty-state h2 {
    margin-top: 8px;
}

.timeline {
    display: grid;
    gap: 14px;
}

.accordion-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: clip;
}

.timeline-month {
    box-shadow: var(--shadow);
}

.timeline-day {
    background: var(--surface-muted);
}

.accordion-toggle {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    padding: 18px;
    text-align: left;
}

.month-toggle {
    background: var(--surface);
}

.day-toggle {
    padding: 15px 16px;
}

.accordion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-weight: 800;
    transition: transform 160ms ease;
}

.accordion-toggle[aria-expanded="true"] .accordion-icon {
    transform: rotate(90deg);
}

.accordion-title,
.accordion-subtitle {
    display: block;
}

.accordion-title {
    font-weight: 800;
}

.accordion-subtitle {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.92rem;
}

.month-panel {
    display: grid;
    gap: 12px;
    border-top: 1px solid var(--border);
    background: #fbfdff;
    padding: 14px;
}

.day-panel {
    border-top: 1px solid var(--border);
    padding: 12px;
}

.event-list {
    display: grid;
    gap: 10px;
}

.event-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 14px;
}

.event-main {
    min-width: 0;
}

.event-main h3 {
    overflow-wrap: anywhere;
}

.event-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 10px 0 0;
}

.event-facts div {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.event-facts dt {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.event-facts dd {
    margin: 0;
    font-weight: 700;
}

.event-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.comment-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0 10px;
    white-space: nowrap;
}

.comment-badge-new {
    border-color: rgba(185, 28, 28, 0.28);
    background: rgba(185, 28, 28, 0.08);
    color: var(--danger);
}

[hidden] {
    display: none !important;
}

@media (max-width: 640px) {
    .auth-shell,
    .dashboard-shell {
        width: min(100% - 24px, 1080px);
        padding: 24px 0;
    }

    .dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .header-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .dashboard-meta,
    .event-item {
        grid-template-columns: 1fr;
    }

    .event-badges {
        justify-content: flex-start;
    }

    .accordion-toggle {
        padding: 15px;
    }

    .month-panel,
    .day-panel {
        padding: 10px;
    }
}

.button-icon {
    gap: 8px;
    margin-top: 0;
}

.button-icon span[aria-hidden="true"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 1.2rem;
    line-height: 1;
}

.flash {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    margin: 0 0 18px;
    padding: 12px 14px;
    font-weight: 700;
}

.flash-success {
    border-color: rgba(4, 120, 87, 0.26);
    background: rgba(4, 120, 87, 0.08);
    color: var(--success);
}

.flash-error {
    border-color: rgba(185, 28, 28, 0.28);
    background: rgba(185, 28, 28, 0.08);
    color: var(--danger);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, 0.46);
    padding: 20px;
}

.modal-panel {
    width: min(100%, 720px);
    max-height: min(92vh, 900px);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 26px 80px rgba(15, 23, 42, 0.26);
    padding: clamp(20px, 4vw, 30px);
}

.modal-header,
.modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
}

.event-form {
    display: grid;
    gap: 16px;
    margin-top: 22px;
}

.form-field {
    display: grid;
    gap: 7px;
}

.form-field label {
    font-weight: 800;
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #ffffff;
    color: var(--text);
    font: inherit;
    padding: 11px 12px;
}

.form-field input {
    min-height: 46px;
}

.form-field select {
    min-height: 46px;
}

.form-field textarea {
    min-height: 108px;
    resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.modal-close:focus-visible {
    border-color: var(--accent);
    outline: 3px solid rgba(37, 99, 235, 0.16);
}

.input-error {
    color: var(--danger);
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
}

.modal-actions {
    justify-content: flex-end;
    margin-top: 6px;
}

.modal-actions .button {
    margin-top: 0;
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .modal-backdrop {
        align-items: stretch;
        padding: 10px;
    }

    .modal-panel {
        max-height: calc(100vh - 20px);
    }

    .modal-header,
    .modal-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .modal-close {
        align-self: flex-end;
    }

    .modal-actions .button {
        width: 100%;
    }

    .inline-form {
        width: 100%;
    }
}

.button:disabled,
.button:disabled:hover {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none;
}

.button-danger {
    background: var(--danger);
}

.button-danger:hover {
    background: #991b1b;
}

.event-detail-trigger {
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.event-detail-trigger:hover {
    border-color: rgba(37, 99, 235, 0.46);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.event-detail-trigger:focus-visible {
    border-color: var(--accent);
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: 3px;
}

.modal-panel-wide {
    width: min(100%, 820px);
}

.detail-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
}

.detail-stats div,
.detail-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.detail-stats div {
    padding: 12px;
}

.detail-stats dt {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.detail-stats dd {
    margin: 4px 0 0;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.detail-section {
    padding: 14px;
}

.detail-section h3 {
    font-size: 0.96rem;
}

.detail-text {
    margin: 10px 0 0;
    color: var(--text);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.detail-comments,
.comment-form {
    margin-top: 12px;
}

.edit-event-form {
    border-top: 1px solid var(--border);
    padding-top: 18px;
}

.inline-form {
    margin: 0;
}

.detail-actions {
    flex-wrap: wrap;
}

.comments-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.comment-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 12px;
}

.comment-item-new {
    border-color: rgba(185, 28, 28, 0.3);
    background: rgba(185, 28, 28, 0.06);
}

.comment-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.comment-status {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    padding: 2px 8px;
}

.comment-item-new .comment-status {
    border-color: rgba(185, 28, 28, 0.28);
    background: rgba(185, 28, 28, 0.08);
    color: var(--danger);
}

.comment-text {
    margin: 9px 0 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.comment-message {
    margin-top: 0;
}

.comment-message-error {
    color: var(--danger);
    font-weight: 700;
}

.form-field textarea:disabled {
    background: #eef2f7;
    color: var(--muted);
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .detail-stats,
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

.button-danger:disabled:hover {
    background: var(--danger);
}

/* Phase 10 visual polish */
:root {
    --bg: #f6f3ee;
    --surface-muted: #f6f8fb;
    --surface-quiet: #fffaf3;
    --text: #172033;
    --muted: #667085;
    --border: #d6dce8;
    --accent-soft: #e7efff;
    --accent-muted: #dbeafe;
    --shadow: 0 22px 60px rgba(23, 32, 51, 0.12);
    --shadow-soft: 0 10px 28px rgba(23, 32, 51, 0.08);
}

body {
    background: linear-gradient(180deg, #f8f4ed 0%, #f5f7fb 46%, #f6f3ee 100%);
    text-rendering: optimizeLegibility;
}

.auth-shell,
.dashboard-shell {
    width: min(100% - 36px, 1180px);
    padding: clamp(28px, 5vw, 56px) 0;
}

h1 {
    font-size: clamp(1.9rem, 4vw, 2.85rem);
}

h2 {
    line-height: 1.2;
}

.panel {
    box-shadow: var(--shadow-soft);
}

.dashboard-header {
    align-items: center;
    border-bottom: 1px solid rgba(214, 220, 232, 0.8);
    margin-bottom: 22px;
    padding-bottom: 18px;
}

.header-actions .button,
.header-actions .role-pill {
    margin-top: 0;
}

.button {
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.14);
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button:hover {
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
}

.button:active {
    transform: translateY(0);
}

.button-secondary {
    box-shadow: none;
}

.button-secondary:hover {
    border-color: rgba(37, 99, 235, 0.28);
}

.button-danger {
    box-shadow: 0 8px 18px rgba(185, 28, 28, 0.13);
}

.role-pill {
    background: var(--surface-quiet);
}

.dashboard-meta {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.dashboard-meta > div {
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 8px 20px rgba(23, 32, 51, 0.04);
}

.flash {
    box-shadow: var(--shadow-soft);
}

.timeline {
    gap: 18px;
}

.accordion-item {
    box-shadow: 0 8px 24px rgba(23, 32, 51, 0.06);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.accordion-item.is-open {
    border-color: rgba(37, 99, 235, 0.3);
}

.timeline-month {
    box-shadow: var(--shadow-soft);
}

.timeline-day {
    box-shadow: none;
}

.accordion-toggle {
    min-height: 58px;
    transition: background 160ms ease;
}

.accordion-toggle:hover {
    background: rgba(231, 239, 255, 0.62);
}

.accordion-panel[data-animating] {
    overflow: hidden;
}

.month-panel {
    background: rgba(246, 248, 251, 0.84);
    gap: 14px;
}

.day-panel {
    background: rgba(255, 255, 255, 0.5);
}

.event-list {
    gap: 12px;
}

.event-item {
    align-items: flex-start;
    box-shadow: inset 3px 0 0 var(--accent-muted), 0 8px 18px rgba(23, 32, 51, 0.045);
    padding: 16px;
}

.event-main h3 {
    font-size: 1.03rem;
    line-height: 1.35;
}

.event-facts {
    gap: 8px;
}

.event-facts div {
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-muted);
    padding: 4px 8px;
}

.event-badges {
    max-width: 260px;
}

.comment-badge {
    background: #ffffff;
}

.comment-badge-new {
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.06);
}

.modal-backdrop {
    background: rgba(23, 32, 51, 0.5);
    backdrop-filter: blur(3px);
}

.modal-panel {
    box-shadow: 0 26px 90px rgba(23, 32, 51, 0.28);
}

.modal-panel-wide {
    width: min(100%, 900px);
}

.modal-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
}

.modal-close {
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.modal-close:hover {
    border-color: rgba(37, 99, 235, 0.28);
    background: var(--accent-soft);
    transform: translateY(-1px);
}

.form-field {
    gap: 8px;
}

.form-field input,
.form-field textarea {
    line-height: 1.55;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.form-field input:hover,
.form-field textarea:hover,
.form-field select:hover {
    border-color: rgba(37, 99, 235, 0.34);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.modal-close:focus-visible {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}

.detail-stats {
    gap: 12px;
}

.detail-stats div,
.detail-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.detail-stats div {
    min-height: 76px;
}

.detail-grid {
    gap: 14px;
}

.detail-section {
    min-width: 0;
}

.detail-text,
.comment-text {
    line-height: 1.68;
}

.comments-list {
    gap: 12px;
}

.comment-item {
    box-shadow: 0 6px 16px rgba(23, 32, 51, 0.04);
}

.edit-event-form {
    margin-top: 18px;
}

@media (max-width: 860px) {
    .dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .header-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .event-item {
        grid-template-columns: 1fr;
    }

    .event-badges {
        justify-content: flex-start;
        max-width: none;
    }
}

@media (max-width: 640px) {
    body {
        background: var(--bg);
    }

    .auth-shell,
    .dashboard-shell {
        width: min(100% - 22px, 1180px);
    }

    h1 {
        font-size: clamp(1.65rem, 9vw, 2.2rem);
    }

    .header-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .logout-form {
        width: 100%;
    }

    .header-actions .button,
    .header-actions .role-pill {
        width: 100%;
    }

    .role-pill {
        justify-content: center;
    }

    .dashboard-meta {
        grid-template-columns: 1fr;
    }

    .accordion-toggle {
        grid-template-columns: 20px 1fr;
        min-height: 54px;
    }

    .event-item {
        padding: 14px;
    }

    .event-facts div {
        width: 100%;
        justify-content: space-between;
    }

    .modal-panel {
        border-radius: 7px;
        padding: 18px;
    }

    .comment-meta {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .modal-backdrop:not([hidden]) {
        animation: backdrop-in 160ms ease-out;
    }

    .modal-backdrop:not([hidden]) .modal-panel {
        animation: modal-in 190ms cubic-bezier(0.2, 0, 0, 1);
    }

    .flash {
        animation: flash-in 220ms cubic-bezier(0.2, 0, 0, 1);
    }

    .event-detail-trigger:hover {
        box-shadow: inset 3px 0 0 var(--accent), 0 14px 30px rgba(23, 32, 51, 0.08);
    }

    .comment-badge-new {
        animation: badge-pop 700ms ease-out;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

@keyframes backdrop-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes flash-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes badge-pop {
    0% {
        transform: scale(0.94);
    }

    55% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1);
    }
}

/* Phase 11 customization settings */
:root {
    font-family: var(--custom-font-family, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-size: var(--custom-base-font-size, 16px);
    --page-bg-start: #f8f4ed;
    --page-bg-mid: #f5f7fb;
    --page-bg-end: #f6f3ee;
}

body {
    background: linear-gradient(180deg, var(--page-bg-start) 0%, var(--page-bg-mid) 46%, var(--page-bg-end) 100%);
    font-size: 1rem;
}

.settings-form {
    gap: 18px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.settings-group {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
    margin: 0;
    padding: 13px;
}

.settings-group legend {
    color: var(--text);
    font-weight: 800;
    padding: 0 6px;
}

.settings-group-inline {
    align-self: end;
}

.segmented-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
}

.segmented-options label {
    min-width: 0;
}

.segmented-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segmented-options span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font-weight: 800;
    padding: 8px 10px;
    text-align: center;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.segmented-options input:checked + span {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.segmented-options input:focus-visible + span {
    outline: 3px solid rgba(37, 99, 235, 0.2);
    outline-offset: 3px;
}

.segmented-options span:hover {
    border-color: rgba(37, 99, 235, 0.34);
    transform: translateY(-1px);
}

.color-control,
.range-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.color-control input[type="color"] {
    width: 54px;
    min-height: 46px;
    cursor: pointer;
    padding: 4px;
}

.color-control input[readonly] {
    color: var(--muted);
    font-weight: 800;
}

.range-control input[type="range"] {
    accent-color: var(--accent);
    min-height: 46px;
    padding: 0;
}

.range-control input[type="number"] {
    width: 82px;
    text-align: center;
}

body[data-density="compact"] .dashboard-shell,
body[data-density="compact"] .auth-shell {
    padding: 28px 0;
}

body[data-density="compact"] .dashboard-header {
    margin-bottom: 16px;
    padding-bottom: 14px;
}

body[data-density="compact"] .dashboard-meta,
body[data-density="compact"] .timeline {
    gap: 10px;
}

body[data-density="compact"] .accordion-toggle {
    min-height: 48px;
    padding: 12px 14px;
}

body[data-density="compact"] .month-panel,
body[data-density="compact"] .day-panel {
    padding: 9px;
}

body[data-density="compact"] .event-item,
body[data-density="compact"] .detail-section,
body[data-density="compact"] .comment-item {
    padding: 11px;
}

body[data-density="compact"] .event-form {
    gap: 12px;
    margin-top: 16px;
}

body[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f172a;
    --surface: #121826;
    --surface-muted: #192235;
    --surface-quiet: #182033;
    --text: #edf2f7;
    --muted: #aab4c3;
    --border: #334155;
    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
    --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.24);
    --page-bg-start: #0f172a;
    --page-bg-mid: #111827;
    --page-bg-end: #182033;
}

body[data-theme="dark"] .panel,
body[data-theme="dark"] .button-secondary,
body[data-theme="dark"] .role-pill,
body[data-theme="dark"] .flash,
body[data-theme="dark"] .event-item,
body[data-theme="dark"] .comment-item,
body[data-theme="dark"] .modal-panel,
body[data-theme="dark"] .modal-close,
body[data-theme="dark"] .form-field input,
body[data-theme="dark"] .form-field textarea,
body[data-theme="dark"] .form-field select,
body[data-theme="dark"] .segmented-options span {
    background: var(--surface);
    color: var(--text);
}

body[data-theme="dark"] .dashboard-meta > div,
body[data-theme="dark"] .month-toggle,
body[data-theme="dark"] .timeline-month {
    background: rgba(18, 24, 38, 0.92);
}

body[data-theme="dark"] .month-panel,
body[data-theme="dark"] .timeline-day,
body[data-theme="dark"] .detail-stats div,
body[data-theme="dark"] .detail-section,
body[data-theme="dark"] .settings-group,
body[data-theme="dark"] .event-facts div,
body[data-theme="dark"] .comment-badge,
body[data-theme="dark"] .comment-status {
    background: var(--surface-muted);
}

body[data-theme="dark"] .detail-stats div,
body[data-theme="dark"] .detail-section {
    background-image: none;
}

body[data-theme="dark"] .modal-backdrop {
    background: rgba(0, 0, 0, 0.58);
}

body[data-theme="dark"] .segmented-options input:checked + span {
    background: rgba(96, 165, 250, 0.16);
    color: #dbeafe;
}

@media (prefers-color-scheme: dark) {
    body[data-theme="system"] {
        color-scheme: dark;
        --bg: #0f172a;
        --surface: #121826;
        --surface-muted: #192235;
        --surface-quiet: #182033;
        --text: #edf2f7;
        --muted: #aab4c3;
        --border: #334155;
        --success: #34d399;
        --danger: #f87171;
        --warning: #fbbf24;
        --shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
        --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.24);
        --page-bg-start: #0f172a;
        --page-bg-mid: #111827;
        --page-bg-end: #182033;
    }

    body[data-theme="system"] .panel,
    body[data-theme="system"] .button-secondary,
    body[data-theme="system"] .role-pill,
    body[data-theme="system"] .flash,
    body[data-theme="system"] .event-item,
    body[data-theme="system"] .comment-item,
    body[data-theme="system"] .modal-panel,
    body[data-theme="system"] .modal-close,
    body[data-theme="system"] .form-field input,
    body[data-theme="system"] .form-field textarea,
    body[data-theme="system"] .form-field select,
    body[data-theme="system"] .segmented-options span {
        background: var(--surface);
        color: var(--text);
    }

    body[data-theme="system"] .dashboard-meta > div,
    body[data-theme="system"] .month-toggle,
    body[data-theme="system"] .timeline-month {
        background: rgba(18, 24, 38, 0.92);
    }

    body[data-theme="system"] .month-panel,
    body[data-theme="system"] .timeline-day,
    body[data-theme="system"] .detail-stats div,
    body[data-theme="system"] .detail-section,
    body[data-theme="system"] .settings-group,
    body[data-theme="system"] .event-facts div,
    body[data-theme="system"] .comment-badge,
    body[data-theme="system"] .comment-status {
        background: var(--surface-muted);
    }

    body[data-theme="system"] .detail-stats div,
    body[data-theme="system"] .detail-section {
        background-image: none;
    }

    body[data-theme="system"] .modal-backdrop {
        background: rgba(0, 0, 0, 0.58);
    }

    body[data-theme="system"] .segmented-options input:checked + span {
        background: rgba(96, 165, 250, 0.16);
        color: #dbeafe;
    }
}

@media (max-width: 640px) {
    .settings-grid,
    .segmented-options,
    .color-control,
    .range-control {
        grid-template-columns: 1fr;
    }

    .range-control input[type="number"] {
        width: 100%;
    }
}

/* Phase 14 design refresh: expanded timeline cards and roomier detail modal */
:root {
    --radius: 10px;
    --radius-lg: 16px;
}

/* Color-coded feeling rate chip, shared by timeline cards and the detail modal */
.feeling-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-muted);
    padding: 5px 13px;
    font-weight: 800;
    white-space: nowrap;
}

.feeling-chip-num {
    font-size: 1.06rem;
    line-height: 1;
}

.feeling-chip-unit {
    font-size: 0.76rem;
    font-weight: 700;
    opacity: 0.7;
}

.feeling-chip[data-tier="low"] {
    border-color: color-mix(in srgb, var(--danger) 38%, transparent);
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    color: var(--danger);
}

.feeling-chip[data-tier="mid"] {
    border-color: color-mix(in srgb, var(--warning) 40%, transparent);
    background: color-mix(in srgb, var(--warning) 13%, var(--surface));
    color: var(--warning);
}

.feeling-chip[data-tier="high"] {
    border-color: color-mix(in srgb, var(--success) 36%, transparent);
    background: color-mix(in srgb, var(--success) 12%, var(--surface));
    color: var(--success);
}

/* Timeline event card: full event, thoughts and physical effect, inline "Label: value" */
.event-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(16px, 2.2vw, 20px);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 60%, transparent), 0 6px 18px rgba(15, 23, 42, 0.05);
}

.event-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 12px;
}

.event-head .event-badges {
    margin-left: auto;
    max-width: none;
}

.event-date {
    color: var(--muted);
    font-weight: 700;
    font-size: 0.9rem;
}

.event-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Each field is one flowing line: "Label: value", value wraps to the next line only when long */
.event-field {
    margin: 0;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.event-field-label {
    color: var(--muted);
    font-weight: 800;
    white-space: nowrap;
    margin-inline-end: 7px;
}

.event-field-value {
    color: var(--text);
    unicode-bidi: isolate;
}

.event-field-primary {
    font-size: 1.05rem;
}

.event-field-primary .event-field-value {
    font-weight: 600;
}

.event-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 700;
}

.event-open-icon {
    display: inline-flex;
    font-size: 1.1rem;
    transition: transform 180ms ease;
}

.event-detail-trigger:hover .event-open-icon {
    transform: translateX(5px);
}

/* Detail modal: a horizontal summary strip, then full-width stacked sections */
.detail-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 26px;
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.detail-summary-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.detail-summary-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.detail-summary-value {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.detail-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

.detail-sections .detail-section {
    padding: clamp(15px, 2.4vw, 20px);
}

.detail-section h3 {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.detail-section .detail-text {
    margin-top: 9px;
    font-size: 1rem;
}

.detail-comments h3 {
    color: var(--muted);
}

/* Tighter timeline nesting so cards do not sit inside heavy frame-in-frame padding */
.month-panel {
    gap: 12px;
    padding: 12px;
}

.day-panel {
    padding: 10px 11px;
}

.event-list {
    gap: 11px;
}

/* Dark mode: the day panel used a translucent white background that read as a gray
   frame around each card. Let the card sit directly on the panel surface instead. */
body[data-theme="dark"] .day-panel {
    background: transparent;
}

@media (prefers-color-scheme: dark) {
    body[data-theme="system"] .day-panel {
        background: transparent;
    }
}

@media (max-width: 640px) {
    .event-foot {
        font-size: 0.8rem;
    }

    .detail-summary {
        gap: 10px 18px;
    }
}

/* =====================================================================
   Phase 15 visual refinement
   Pure CSS, no framework: a utility framework (Bootstrap/Tailwind) would
   fight the existing custom-property design system, dark mode, density
   modes and live accent theming. Instead this layer (a) makes the whole
   UI respond to the chosen accent color, (b) adds depth, and (c) adds
   restrained, reduced-motion-safe entrance and hover motion.
   ===================================================================== */
:root {
    /* Accent-derived helpers so focus rings, hovers and shadows all
       follow the admin's chosen accent color instead of a fixed blue. */
    --ring: color-mix(in srgb, var(--accent) 34%, transparent);
    --ring-soft: color-mix(in srgb, var(--accent) 18%, transparent);
    --hover-tint: color-mix(in srgb, var(--accent) 9%, var(--surface));
    --accent-glow: color-mix(in srgb, var(--accent) 30%, transparent);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    scroll-behavior: smooth;
}

::selection {
    background: color-mix(in srgb, var(--accent) 24%, transparent);
}

/* Accent-aware, slim scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 40%, var(--border)) transparent;
}

*::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

*::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 36%, var(--border));
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent) 56%, var(--border));
    background-clip: content-box;
}

/* Focus states everywhere now track the accent color */
.button:focus-visible,
.accordion-toggle:focus-visible,
.event-detail-trigger:focus-visible,
.login-form input:focus,
.segmented-options input:focus-visible + span {
    outline-color: var(--ring);
}

.login-form input:focus,
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.modal-close:focus-visible {
    box-shadow: 0 0 0 4px var(--ring-soft);
}

/* Eyebrow labels pick up a hint of the accent for cohesion */
.eyebrow {
    color: color-mix(in srgb, var(--accent) 60%, var(--muted));
    letter-spacing: 0.13em;
}

/* Headings get a subtle accent-leaning gradient ink */
h1 {
    background: linear-gradient(118deg, var(--text) 0%, color-mix(in srgb, var(--accent) 52%, var(--text)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Primary buttons: accent gradient face and accent-colored lift shadow */
.button:not(.button-secondary):not(.button-danger) {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff) 0%, var(--accent) 52%, var(--accent-strong) 100%);
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.08), 0 10px 22px var(--accent-glow);
}

.button:not(.button-secondary):not(.button-danger):hover {
    background-image: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.1), 0 14px 30px color-mix(in srgb, var(--accent) 40%, transparent);
}

.button:active {
    transform: translateY(0) scale(0.99);
}

/* Login: a soft accent glow blooms behind the card */
.auth-shell {
    position: relative;
    overflow: hidden;
}

.auth-shell::before {
    content: "";
    position: absolute;
    top: -180px;
    left: 50%;
    width: 560px;
    height: 560px;
    transform: translateX(-50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}

.auth-shell .panel {
    position: relative;
    z-index: 1;
}

/* Dashboard status cards: gentle hover lift */
.dashboard-meta > div {
    transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.dashboard-meta > div:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.07);
}

/* Accordion: accent-tinted hover, circular icon chip, pill-shaped counts */
.accordion-toggle:hover {
    background: var(--hover-tint);
}

.accordion-item.is-open {
    border-color: var(--ring);
}

.accordion-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    font-size: 0.82rem;
    transition: transform 180ms var(--ease-out), background 180ms var(--ease-out);
}

.accordion-toggle[aria-expanded="true"] .accordion-icon {
    background: color-mix(in srgb, var(--accent) 22%, var(--surface));
}

.accordion-subtitle {
    display: inline-block;
    margin-top: 7px;
    padding: 2px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 9%, var(--surface-muted));
    color: color-mix(in srgb, var(--accent) 48%, var(--muted));
    font-size: 0.8rem;
    font-weight: 700;
}

/* Event cards: accent wash + chip pop on hover */
.event-detail-trigger {
    transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out), background 180ms var(--ease-out);
}

.event-detail-trigger:hover {
    background: linear-gradient(180deg, var(--surface) 0%, var(--hover-tint) 100%);
}

.feeling-chip {
    transition: transform 160ms var(--ease-out);
}

.event-detail-trigger:hover .feeling-chip {
    transform: scale(1.05);
}

/* Modal close button hover adapts to theme + accent */
.modal-close:hover {
    background: var(--hover-tint);
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
}

/* Modal panels carry a slim accent rule along the top edge */
.modal-panel {
    border-top: 3px solid var(--accent);
}

/* Entrance + interaction motion (skipped under reduced-motion) */
@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes panel-bloom {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .auth-shell .panel {
        animation: panel-bloom 520ms var(--ease-out) both;
    }

    .dashboard-header {
        animation: rise-in 460ms var(--ease-out) both;
    }

    .dashboard-meta {
        animation: rise-in 480ms 60ms var(--ease-out) both;
    }

    .empty-state {
        animation: rise-in 520ms 80ms var(--ease-out) both;
    }

    .timeline-month {
        animation: rise-in 500ms var(--ease-out) both;
    }

    .timeline-month:nth-child(1) { animation-delay: 80ms; }
    .timeline-month:nth-child(2) { animation-delay: 140ms; }
    .timeline-month:nth-child(3) { animation-delay: 200ms; }
    .timeline-month:nth-child(4) { animation-delay: 260ms; }
    .timeline-month:nth-child(5) { animation-delay: 320ms; }
    .timeline-month:nth-child(6) { animation-delay: 380ms; }
    .timeline-month:nth-child(n + 7) { animation-delay: 440ms; }
}

/* =====================================================================
   Phase 16: Table View
   A switch flips the dashboard between the accordion timeline and a flat
   table. Both are rendered server-side; visibility is class-driven so the
   choice survives reloads without a server round-trip.
   ===================================================================== */

/* View toggling. The table is hidden by default and revealed when the
   <html> element carries .show-table-view (set by the saved preference). */
[data-table-view] {
    display: none;
}

.show-table-view [data-timeline-view] {
    display: none;
}

.show-table-view [data-table-view] {
    display: block;
}

.view-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
}

/* iOS-style accent switch */
.view-switch {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    font-weight: 700;
    user-select: none;
}

.view-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.view-switch-track {
    position: relative;
    flex: none;
    width: 46px;
    height: 26px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 26%, var(--surface));
    transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

.view-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
    transition: transform 220ms var(--ease-out);
}

.view-switch-input:checked + .view-switch-track {
    border-color: var(--accent);
    background: var(--accent);
}

.view-switch-input:checked + .view-switch-track .view-switch-thumb {
    transform: translateX(20px);
}

.view-switch-input:focus-visible + .view-switch-track {
    outline: 3px solid var(--ring);
    outline-offset: 3px;
}

.view-switch:hover .view-switch-track {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.view-switch-text {
    color: var(--text);
}

/* Table shell: horizontal scroll on narrow screens so the layout never
   crushes; the table keeps a comfortable min-width and grows in height. */
.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    -webkit-overflow-scrolling: touch;
}

.events-table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.95rem;
}

/* Date and Rate stay tight; the three text columns split the rest evenly. */
.events-table col.col-date {
    width: 128px;
}

.events-table col.col-rate {
    width: 96px;
}

.events-table th,
.events-table td {
    padding: 13px 15px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

.events-table thead th {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 2px solid color-mix(in srgb, var(--accent) 32%, var(--border));
}

.events-table th.col-rate,
.events-table td.col-rate {
    text-align: center;
    padding-inline: 10px;
}

.events-table tbody tr {
    cursor: pointer;
    transition: background 150ms var(--ease-out);
}

.events-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--surface-muted) 55%, var(--surface));
}

.events-table tbody tr:hover {
    background: var(--hover-tint);
}

.events-table tbody tr:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: -3px;
}

.events-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Text cells: preserve line breaks, wrap long words, isolate RTL values
   so they read correctly inside the LTR table. Height grows with content. */
.cell-text {
    display: block;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    unicode-bidi: isolate;
}

.cell-date-day {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.cell-date-main {
    display: block;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .view-toolbar {
        justify-content: space-between;
    }
}

/* =====================================================================
   Phase 17 final polish: cohesion and finishing micro-details
   ===================================================================== */

/* Cards share the same slim accent rule as the modal panels, so login,
   empty states and setup panels all read as one branded family. */
.panel {
    border-top: 3px solid var(--accent);
}

/* The database indicator gets a soft status dot */
.dashboard-meta .status-ok::before,
.dashboard-meta .status-error::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-inline-end: 9px;
    border-radius: 999px;
    vertical-align: middle;
}

.dashboard-meta .status-ok::before {
    background: var(--success);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 16%, transparent);
}

.dashboard-meta .status-error::before {
    background: var(--danger);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent);
}

/* Numerals line up cleanly wherever they cluster (rates, dates, counts) */
.feeling-chip-num,
.cell-date-main,
.accordion-subtitle,
.view-toolbar-info strong {
    font-variant-numeric: tabular-nums;
}

/* Table toolbar: a quiet event count balances the switch on the right */
.view-toolbar {
    justify-content: space-between;
    gap: 14px;
}

.view-toolbar-info {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 600;
}

.view-toolbar-info strong {
    color: var(--text);
    font-weight: 800;
}

/* Empty / setup states read a touch calmer and more centered */
.empty-state .notice {
    max-width: 46rem;
}