:root[data-theme] {
    --bg: #f5f7fa;
    --surface: #fff;
    --surface-2: #f8fafc;
    --surface-3: #eaf0f5;
    --ink: #1c2935;
    --ink-2: #3a4b5a;
    --muted: #5b6b7a;
    --line: #dce3ea;
    --line-strong: #bdcbd6;
    --brand: #142a29;
    --brand-2: #244d46;
    --brand-ink: #f4f9f8;
    --brand-muted: #b8d1c9;
    --lime: #d1eedf;
    --lime-ink: #143d33;
    --accent: #166853;
    --accent-strong: #104e3e;
    --accent-soft: #e4f1ec;
    --accent-ink: #fff;
    --red: #a52f35;
    --red-soft: #fde9eb;
    --orange: #a84c0c;
    --orange-soft: #fceedd;
    --amber: #85510d;
    --amber-soft: #fff1d9;
    --blue: #305f8c;
    --blue-soft: #e7eef6;
    --purple: #6a4795;
    --purple-soft: #efeafa;
    --green: #34672f;
    --green-soft: #e0efdc;
    --focus: var(--accent);
    --overlay: #091522b3;
    --shadow-sm: 0 1px 2px #182a3b0d;
    --shadow: 0 1px 2px #182a3b0a, 0 6px 20px #182a3b0f;
    --shadow-lg: 0 18px 60px #182a3b33;
    --soft: var(--bg);
    --paper: var(--surface);
    --blue-dark: var(--accent-strong);
    color-scheme: light;
}
:root[data-theme="dark"] {
    --bg: #111827;
    --surface: #1b2533;
    --surface-2: #223040;
    --surface-3: #2a3b4d;
    --ink: #edf3f9;
    --ink-2: #ccd8e4;
    --muted: #abbac9;
    --line: #38475a;
    --line-strong: #53677c;
    --brand: #102723;
    --brand-2: #214d41;
    --brand-ink: #effaf5;
    --brand-muted: #b6d4c8;
    --lime: #c2ead3;
    --lime-ink: #12372b;
    --accent: #75d7b5;
    --accent-strong: #99e5ca;
    --accent-soft: #203f39;
    --accent-ink: #092b22;
    --red: #ffaba9;
    --red-soft: #47252c;
    --orange: #f4b884;
    --orange-soft: #49301e;
    --amber: #eac681;
    --amber-soft: #41351e;
    --blue: #accaf0;
    --blue-soft: #263d57;
    --purple: #d2b4f2;
    --purple-soft: #3a2b53;
    --green: #b5df9f;
    --green-soft: #29442a;
    --overlay: #000b;
    --shadow-sm: none;
    --shadow: 0 1px 0 #ffffff06;
    --shadow-lg: 0 20px 60px #000a;
    color-scheme: dark;
}
:root[data-theme-color="blue"] {
    --brand: #142940;
    --brand-2: #20496c;
    --lime: #cee7ff;
    --lime-ink: #183c5d;
    --accent: #1d5da5;
    --accent-strong: #174b85;
    --accent-soft: #e6effb;
}
:root[data-theme="dark"][data-theme-color="blue"] {
    --accent: #8fc4ff;
    --accent-strong: #b7d9ff;
    --accent-soft: #233c58;
    --accent-ink: #102c48;
}
:root[data-theme-color="plum"] {
    --brand: #2e2043;
    --brand-2: #503a68;
    --lime: #e8d9ff;
    --lime-ink: #4a285f;
    --accent: #754498;
    --accent-strong: #5c327b;
    --accent-soft: #f1e9f7;
}
:root[data-theme="dark"][data-theme-color="plum"] {
    --accent: #d3b0f2;
    --accent-strong: #e4ccfa;
    --accent-soft: #3d2d52;
    --accent-ink: #332043;
}
:root[data-theme-color="amber"] {
    --brand: #392919;
    --brand-2: #65472b;
    --lime: #f9dfb5;
    --lime-ink: #503316;
    --accent: #92540e;
    --accent-strong: #713f0c;
    --accent-soft: #fcf0dd;
}
:root[data-theme="dark"][data-theme-color="amber"] {
    --accent: #edc07b;
    --accent-strong: #f8d6a0;
    --accent-soft: #493924;
    --accent-ink: #3c290e;
}
.appearance-dialog {
    width: min(430px, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px;
    color: var(--ink);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    font-family: inherit;
}
.appearance-dialog::backdrop { background: var(--overlay); }
.appearance-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.appearance-header h2 { margin: 0; color: var(--ink); font-size: 22px; }
.appearance-close { width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 26px; line-height: 1; }
.appearance-mode { display: grid; gap: 8px; font-size: 14px; font-weight: 650; margin: 0 0 22px; }
.appearance-mode select { width: 100%; min-height: 48px; font-size: 16px; font-family: inherit; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); color: var(--ink); margin: 0; }
.appearance-colors { padding: 0; margin: 0; border: 0; min-width: 0; }
.appearance-save-status { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.appearance-save-status:empty { display: none; }
.appearance-colors legend { padding: 0; font-size: 14px; font-weight: 650; margin-bottom: 10px; }
.appearance-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.appearance-options button { display: flex; align-items: center; gap: 9px; min-height: 48px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.appearance-options button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 750; }
.appearance-swatch { width: 18px; height: 18px; flex: 0 0 auto; background: #166853; border-radius: 50%; border: 1px solid #fff8; }
[data-theme-choice="blue"] .appearance-swatch { background: #1d5da5; }
[data-theme-choice="plum"] .appearance-swatch { background: #754498; }
[data-theme-choice="amber"] .appearance-swatch { background: #92540e; }
.appearance-dialog :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sidebar-appearance { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 12px 14px; border: 0; border-radius: 10px; color: var(--brand-ink); background: transparent; font: inherit; text-align: left; }
.sidebar-appearance:hover { background: var(--brand-2); }
:root[data-theme] .install-dialog { background: var(--surface); color: var(--ink); border-color: var(--line); }
:root[data-theme] .install-dialog p { color: var(--muted); }
:root[data-theme] .install-dialog .install-close,
:root[data-theme] .install-dialog .install-status { background: var(--surface-3); color: var(--ink); }
:root[data-theme] .install-dialog .install-action { background: var(--accent); color: var(--accent-ink); }
:root[data-theme] .install-dialog button:focus-visible { outline-color: var(--accent); }
:root[data-theme] .button.danger { background: var(--red-soft); color: var(--red); border-color: var(--red); }
:root[data-theme] .home-action-primary strong { color: var(--accent-ink); }
:root[data-phone-webapp] { --paper: var(--bg); --white: var(--surface); --green: var(--accent); --dark: var(--brand); }