:root {
    --demo-theme-bg-light: #eef5ff;
    --demo-theme-bg-dark: #08152f;
    --demo-theme-panel-light: #ffffff;
    --demo-theme-panel-soft-light: #f7fbff;
    --demo-theme-panel-dark: #0d1c3f;
    --demo-theme-panel-soft-dark: #122552;
    --demo-theme-text-light: #163042;
    --demo-theme-text-dark: #f3f8ff;
    --demo-theme-muted-light: #5c7488;
    --demo-theme-muted-dark: #9fb3cd;
    --demo-theme-line-light: #d6e2ec;
    --demo-theme-line-dark: rgba(255, 255, 255, 0.1);
    --demo-bg: #eef5ff;
    --demo-panel: #ffffff;
    --demo-panel-soft: #f7fbff;
    --demo-text: #163042;
    --demo-muted: #5c7488;
    --demo-line: #d6e2ec;
    --demo-accent: var(--suite-accent);
    --demo-accent-strong: var(--suite-accent-strong);
    /* Derived accent surfaces belong on body[data-demo-theme] so --demo-accent is the active theme, not :root’s suite default. */
    --demo-danger: #b91c1c;
    --demo-shadow: 0 18px 36px rgba(19, 48, 73, 0.1);
}

body[data-demo-mode='light'] {
    --demo-bg: var(--demo-theme-bg-light);
    --demo-panel: var(--demo-theme-panel-light);
    --demo-panel-soft: var(--demo-theme-panel-soft-light);
    --demo-text: var(--demo-theme-text-light);
    --demo-muted: var(--demo-theme-muted-light);
    --demo-line: var(--demo-theme-line-light);
    --demo-shadow: 0 18px 36px rgba(19, 48, 73, 0.1);
}

body[data-demo-mode='dark'] {
    --demo-bg: var(--demo-theme-bg-dark);
    --demo-panel: var(--demo-theme-panel-dark);
    --demo-panel-soft: var(--demo-theme-panel-soft-dark);
    --demo-text: var(--demo-theme-text-dark);
    --demo-muted: var(--demo-theme-muted-dark);
    --demo-line: var(--demo-theme-line-dark);
    --demo-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
}

body[data-demo-theme='cyan'] {
    --demo-accent: #57d4ff;
    --demo-accent-strong: #15b8ff;
    --demo-theme-bg-light: #eef5ff;
    --demo-theme-bg-dark: #08152f;
    --demo-theme-panel-light: #ffffff;
    --demo-theme-panel-soft-light: #f7fbff;
    --demo-theme-panel-dark: #0d1c3f;
    --demo-theme-panel-soft-dark: #122552;
    --demo-theme-text-light: #163042;
    --demo-theme-text-dark: #f3f8ff;
    --demo-theme-muted-light: #5c7488;
    --demo-theme-muted-dark: #9fb3cd;
    --demo-theme-line-light: #d6e2ec;
    --demo-theme-line-dark: rgba(255, 255, 255, 0.1);
}

body[data-demo-theme='blue'] {
    --demo-accent: #6da8ff;
    --demo-accent-strong: #2f67e8;
    --demo-theme-bg-light: #edf2ff;
    --demo-theme-bg-dark: #0b1338;
    --demo-theme-panel-light: #fdfefe;
    --demo-theme-panel-soft-light: #f3f6ff;
    --demo-theme-panel-dark: #111c4f;
    --demo-theme-panel-soft-dark: #182762;
    --demo-theme-text-light: #1a2d58;
    --demo-theme-text-dark: #eff4ff;
    --demo-theme-muted-light: #61739a;
    --demo-theme-muted-dark: #a6b4df;
    --demo-theme-line-light: #d9e2f5;
    --demo-theme-line-dark: rgba(181, 198, 255, 0.16);
}

body[data-demo-theme='mint'] {
    --demo-accent: #57e3c1;
    --demo-accent-strong: #11b68e;
    --demo-theme-bg-light: #edf9f6;
    --demo-theme-bg-dark: #061f26;
    --demo-theme-panel-light: #fbfffd;
    --demo-theme-panel-soft-light: #f1fcf8;
    --demo-theme-panel-dark: #0b2f35;
    --demo-theme-panel-soft-dark: #124047;
    --demo-theme-text-light: #173b36;
    --demo-theme-text-dark: #eefcf8;
    --demo-theme-muted-light: #5a7d76;
    --demo-theme-muted-dark: #9cc8bf;
    --demo-theme-line-light: #d5ece4;
    --demo-theme-line-dark: rgba(138, 214, 191, 0.16);
}

body[data-demo-theme='amber'] {
    --demo-accent: #f0a43a;
    --demo-accent-strong: #9e3f35;
    --demo-theme-bg-light: #fff2dd;
    --demo-theme-bg-dark: #241109;
    --demo-theme-panel-light: #fffaf3;
    --demo-theme-panel-soft-light: #fff3df;
    --demo-theme-panel-dark: #3a1b14;
    --demo-theme-panel-soft-dark: #4c241c;
    --demo-theme-text-light: #5a281a;
    --demo-theme-text-dark: #ffe8ce;
    --demo-theme-muted-light: #916346;
    --demo-theme-muted-dark: #d7ae88;
    --demo-theme-line-light: #efd8ba;
    --demo-theme-line-dark: rgba(240, 164, 58, 0.2);
}

body[data-demo-theme='rose'] {
    --demo-theme-bg-light: #fff0f5;
    --demo-theme-bg-dark: #2a1020;
    --demo-theme-panel-light: #fffafd;
    --demo-theme-panel-soft-light: #fff4f8;
    --demo-theme-panel-dark: #3b1630;
    --demo-theme-panel-soft-dark: #4c1e3f;
    --demo-accent: #ef8aa8;
    --demo-accent-strong: #9f3e68;
    --demo-theme-text-light: #4c2139;
    --demo-theme-text-dark: #ffe9f2;
    --demo-theme-muted-light: #8a6172;
    --demo-theme-muted-dark: #d7afc1;
    --demo-theme-line-light: #efd8e2;
    --demo-theme-line-dark: rgba(239, 138, 168, 0.18);
}

body[data-demo-theme] {
    --demo-accent-soft: color-mix(in srgb, var(--demo-accent) 20%, transparent);
    --demo-accent-surface: color-mix(in srgb, var(--demo-accent) 16%, var(--demo-panel));
    --demo-accent-surface-strong: color-mix(in srgb, var(--demo-accent) 26%, var(--demo-panel-soft));
    --demo-accent-text: color-mix(in srgb, var(--demo-accent-strong) 82%, var(--demo-text));
    --demo-accent-heading: color-mix(in srgb, var(--demo-accent-strong) 68%, #5d1800);
    --demo-accent-glow: color-mix(in srgb, var(--demo-accent) 28%, transparent);
    --line: var(--demo-line);
    --panel: var(--demo-panel);
    --panel-soft: var(--demo-panel-soft);
    --text: var(--demo-text);
    --muted: var(--demo-muted);
    --bg: var(--demo-bg);
    --accent: var(--demo-accent);
    --accent-soft: var(--demo-accent-soft);
    --accent-surface: var(--demo-accent-surface);
    --accent-surface-strong: var(--demo-accent-surface-strong);
    --accent-text: var(--demo-accent-text);
}

body[data-demo-mode='dark'][data-demo-theme] {
    --demo-accent-soft: color-mix(in srgb, var(--demo-accent) 24%, transparent);
    --demo-accent-surface: color-mix(in srgb, var(--demo-accent) 18%, var(--demo-panel));
    --demo-accent-surface-strong: color-mix(in srgb, var(--demo-accent) 28%, var(--demo-panel-soft));
    --demo-accent-text: color-mix(in srgb, var(--demo-accent) 66%, white);
    --demo-accent-heading: color-mix(in srgb, var(--demo-accent) 72%, white);
    --demo-accent-glow: color-mix(in srgb, var(--demo-accent) 34%, transparent);
}

body {
    color: var(--demo-text);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--demo-accent) 18%, transparent) 0, transparent 36%),
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--demo-accent-strong) 14%, transparent) 0, transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--demo-panel-soft) 84%, white) 0%, var(--demo-bg) 100%);
}

body[data-demo-mode='dark'] {
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--demo-accent) 16%, transparent) 0, transparent 36%),
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--demo-accent-strong) 12%, transparent) 0, transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--demo-panel) 72%, black) 0%, var(--demo-bg) 100%);
}

.page,
.app-shell {
    position: relative;
    z-index: 1;
    width: min(1380px, 94vw);
    margin: 0 auto;
    padding: 18px;
}

.hero,
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
    margin-bottom: 18px;
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--demo-accent) 12%, transparent), transparent 38%),
        linear-gradient(160deg, color-mix(in srgb, var(--demo-panel-soft) 84%, white), var(--demo-panel));
    border: 1px solid var(--demo-line);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--demo-shadow);
}

body[data-demo-mode='dark'] .hero,
body[data-demo-mode='dark'] .app-header {
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--demo-accent) 16%, transparent), transparent 42%),
        linear-gradient(160deg, color-mix(in srgb, var(--demo-panel-soft) 92%, black), var(--demo-panel));
}

.eyebrow {
    margin: 0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--demo-accent);
    font-size: 12px;
    font-weight: 700;
}

h1 {
    margin: 4px 0;
    font-size: clamp(28px, 3.8vw, 42px);
    line-height: 1.05;
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    letter-spacing: -0.02em;
}

.sub,
.subtitle {
    margin: 0;
    color: var(--demo-muted);
}

.hero-actions,
.toolbar-left,
.toolbar-right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.reset-chip,
.reset-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--demo-accent) 18%, transparent);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--demo-accent-surface), var(--demo-accent-surface-strong));
    color: var(--demo-accent-text);
    font-size: 13px;
    font-weight: 600;
}

.reset-box {
    display: grid;
    justify-items: end;
    border-radius: 14px;
    padding: 10px 14px;
    min-width: 180px;
    margin-bottom: 0;
}

.reset-chip strong,
.reset-box strong {
    font-size: 20px;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--demo-accent);
}

.card,
.filters,
.toolbar.card,
.week-wrap,
.invoice-card,
.column,
.metric,
.payment-demo-panel,
.activity-panel,
.modal-panel,
dialog {
    background: linear-gradient(180deg, var(--demo-panel), var(--demo-panel-soft));
    border: 1px solid var(--demo-line);
    box-shadow: var(--demo-shadow);
}

.metric,
.invoice-card,
.card,
.column,
.payment-demo-panel,
.activity-panel,
.modal-panel {
    border-radius: 14px;
}

.metric .label,
.timeline-cell .day,
.invoice-meta,
.status,
.status-line,
.security-note,
.payment-note,
.demo-lock,
.list,
.activity-list,
.card p,
.metric .money {
    color: var(--demo-muted);
}

.metric .label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.metric .value {
    color: var(--demo-text);
}

button,
.btn {
    border: 1px solid var(--demo-line);
    background: linear-gradient(180deg, var(--demo-accent-surface), var(--demo-panel));
    color: var(--demo-text);
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

button:hover,
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(20, 48, 73, 0.12);
    border-color: color-mix(in srgb, var(--demo-accent) 22%, transparent);
    background: linear-gradient(180deg, var(--demo-accent-surface-strong), var(--demo-accent-surface));
}

.btn-primary,
button.btn-primary {
    background: linear-gradient(180deg, var(--demo-accent), var(--demo-accent-strong));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 24px var(--demo-accent-glow);
}

.btn-danger,
button.btn-danger {
    background: color-mix(in srgb, var(--demo-danger) 10%, var(--demo-panel));
    border-color: color-mix(in srgb, var(--demo-danger) 42%, transparent);
    color: color-mix(in srgb, var(--demo-danger) 82%, var(--demo-text));
}

body[data-demo-mode='dark'] button,
body[data-demo-mode='dark'] .btn,
body[data-demo-mode='dark'] select,
body[data-demo-mode='dark'] input[type="text"],
body[data-demo-mode='dark'] input[type="number"],
body[data-demo-mode='dark'] input[type="date"],
body[data-demo-mode='dark'] input[type="datetime-local"],
body[data-demo-mode='dark'] input[type="time"],
body[data-demo-mode='dark'] textarea {
    background: color-mix(in srgb, var(--demo-panel) 82%, black);
    color: var(--demo-text);
}

label {
    color: var(--demo-text);
    font-weight: 600;
}

select,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea {
    width: 100%;
    border: 1px solid var(--demo-line);
    border-radius: 10px;
    padding: 9px 11px;
    font: inherit;
    color: var(--demo-text);
    background: var(--demo-panel);
}

select:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--demo-accent) 34%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--demo-accent) 14%, transparent);
}

dialog {
    border: none;
    padding: 0;
}

dialog::backdrop {
    background:
        radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--demo-accent) 18%, transparent), transparent 42%),
        color-mix(in srgb, var(--demo-bg) 42%, rgba(0, 0, 0, 0.62));
}

.badge,
.column-count {
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--demo-accent) 14%, transparent);
    background: color-mix(in srgb, var(--demo-accent) 6%, transparent);
    color: var(--demo-muted);
}

.timeline-cell,
.security-note,
.modal-panel,
.activity-panel,
.payment-demo-panel {
    background: linear-gradient(180deg, var(--demo-accent-surface-strong), var(--demo-accent-surface));
}

#resetConfirmDialog .modal-panel {
    padding: 1rem 1rem 0.85rem;
    min-width: min(460px, 92vw);
}

#resetConfirmDialog h2 {
    margin: 0 0 0.55rem;
}

#resetConfirmDialog p {
    margin: 0 0 0.8rem;
}

body[data-demo-mode='dark'] .timeline-cell,
body[data-demo-mode='dark'] .security-note,
body[data-demo-mode='dark'] .modal-panel,
body[data-demo-mode='dark'] .activity-panel,
body[data-demo-mode='dark'] .payment-demo-panel {
    background: linear-gradient(180deg, color-mix(in srgb, var(--demo-accent) 20%, var(--demo-panel-soft)), var(--demo-accent-surface));
}

menu {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 6px 0 0;
    padding: 0;
}

@media (max-width: 800px) {
    .hero,
    .app-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .reset-box {
        width: 100%;
        justify-items: start;
    }
}