:root,
:root[data-theme="znode-dark"] {
    color-scheme: dark;

    --zn-color-scheme: dark;
    --zn-bg-app: #07101b;
    --zn-bg-app-member: #0b1018;
    --zn-bg-app-gradient-start: rgba(12, 23, 37, 0.98);
    --zn-bg-app-gradient-end: rgba(7, 16, 27, 1);
    --zn-bg-sidebar: #0a1421;
    --zn-bg-sidebar-alpha: rgba(10, 20, 33, 0.97);
    --zn-bg-surface: #101c2c;
    --zn-bg-surface-elevated: #0d1725;
    --zn-bg-surface-muted: #142236;
    --zn-bg-panel: linear-gradient(180deg, rgba(18, 27, 42, 0.98), rgba(15, 22, 35, 0.96));
    --zn-bg-surface-hover: rgba(255, 255, 255, 0.03);
    --zn-bg-surface-active: rgba(255, 255, 255, 0.05);
    --zn-bg-surface-faint: rgba(255, 255, 255, 0.02);
    --zn-bg-surface-raised: rgba(255, 255, 255, 0.035);
    --zn-surface-glint: rgba(255, 255, 255, 0.08);
    --zn-surface-glint-soft: rgba(255, 255, 255, 0.04);

    --zn-border: rgba(157, 183, 226, 0.14);
    --zn-border-soft: rgba(255, 255, 255, 0.06);
    --zn-border-muted: rgba(157, 183, 226, 0.1);
    --zn-border-strong: rgba(157, 183, 226, 0.24);

    --zn-text-primary: #ecf2ff;
    --zn-text-secondary: #95a4be;
    --zn-text-muted: #6e7d97;
    --zn-text-inverse: #0c1422;

    --zn-accent: #6f7dff;
    --zn-accent-hover: #7e8aff;
    --zn-accent-soft: rgba(111, 125, 255, 0.14);
    --zn-accent-surface: rgba(106, 120, 255, 0.12);
    --zn-accent-surface-strong: rgba(106, 120, 255, 0.16);
    --zn-accent-surface-lift: rgba(106, 120, 255, 0.22);
    --zn-accent-surface-muted: rgba(106, 120, 255, 0.08);
    --zn-accent-border: rgba(126, 138, 255, 0.28);
    --zn-accent-border-active: rgba(126, 138, 255, 0.26);
    --zn-accent-border-soft: rgba(126, 138, 255, 0.24);
    --zn-accent-border-subtle: rgba(126, 138, 255, 0.18);
    --zn-accent-border-focus: rgba(126, 138, 255, 0.3);
    --zn-accent-text: #dfe5ff;
    --zn-accent-text-muted: #dbe3ff;
    --zn-accent-text-strong: #edf1ff;
    --zn-accent-shadow: rgba(106, 120, 255, 0.14);

    --zn-success: #33c27f;
    --zn-success-soft-muted: rgba(51, 194, 127, 0.1);
    --zn-success-soft: rgba(51, 194, 127, 0.12);
    --zn-success-soft-strong: rgba(51, 194, 127, 0.16);
    --zn-success-border: rgba(51, 194, 127, 0.28);
    --zn-success-text: #dff8ea;
    --zn-warning: #e0a93b;
    --zn-warning-soft-muted: rgba(224, 169, 59, 0.11);
    --zn-warning-soft: rgba(224, 169, 59, 0.12);
    --zn-warning-soft-strong: rgba(224, 169, 59, 0.16);
    --zn-warning-border: rgba(224, 169, 59, 0.28);
    --zn-warning-border-strong: rgba(224, 169, 59, 0.3);
    --zn-warning-text: #fff1d6;
    --zn-danger: #ef6f7a;
    --zn-danger-soft: rgba(239, 111, 122, 0.12);
    --zn-danger-soft-strong: rgba(239, 111, 122, 0.16);
    --zn-danger-border: rgba(239, 111, 122, 0.32);
    --zn-danger-border-soft: rgba(239, 111, 122, 0.3);
    --zn-danger-border-strong: rgba(239, 111, 122, 0.46);
    --zn-danger-text: #ffdce0;
    --zn-danger-text-strong: #fff4f5;
    --zn-danger-surface: rgba(148, 44, 58, 0.18);
    --zn-danger-surface-hover: rgba(172, 48, 64, 0.24);
    --zn-danger-shadow: rgba(148, 44, 58, 0.12);
    --zn-success-ring: rgba(51, 194, 127, 0.08);
    --zn-warning-ring: rgba(224, 169, 59, 0.08);
    --zn-danger-ring: rgba(239, 111, 122, 0.08);

    --zn-shadow: 0 14px 34px rgba(2, 8, 15, 0.3);
    --zn-shadow-soft: 0 0 0 1px rgba(111, 125, 255, 0.08), 0 16px 34px rgba(6, 13, 24, 0.28);
    --zn-shadow-sidebar: 24px 0 80px rgba(3, 9, 18, 0.35);

    --zn-scrollbar-track: rgba(8, 16, 28, 0.36);
    --zn-scrollbar-thumb: rgba(112, 130, 164, 0.44);
    --zn-scrollbar-thumb-hover: rgba(138, 154, 192, 0.62);
    --zn-scrollbar-border: rgba(8, 16, 28, 0.86);
    --zn-scrollbar-fill-start: rgba(142, 157, 196, 0.5);
    --zn-scrollbar-fill-end: rgba(84, 101, 134, 0.48);
    --zn-brand-surface-end: rgba(124, 92, 255, 0.12);
    --zn-brand-border: rgba(133, 145, 255, 0.28);

    --zn-member-bg-app: #0b1018;
    --zn-member-bg-shell: #0f1621;
    --zn-member-bg-pane: #121b28;
    --zn-member-bg-card: rgba(15, 22, 33, 0.94);
    --zn-member-bg-bubble-in: #162235;
    --zn-member-bg-bubble-out: #2a3f7a;
    --zn-member-border: rgba(177, 196, 232, 0.12);
    --zn-member-border-soft: rgba(255, 255, 255, 0.08);
    --zn-member-border-strong: rgba(177, 196, 232, 0.18);
    --zn-member-border-bright: rgba(177, 196, 232, 0.16);
    --zn-member-border-muted: rgba(177, 196, 232, 0.08);
    --zn-member-text-primary: #edf3ff;
    --zn-member-text-secondary: #a2afc6;
    --zn-member-text-muted: #77849b;
    --zn-member-text-link: #c9d4ff;
    --zn-member-danger-text: #ffb8b8;
    --zn-member-danger-text-soft: #ffd7d7;
    --zn-member-warning-text: #f8de9d;
    --zn-member-success-text: #dff9ee;
    --zn-member-accent: #7b90ff;
    --zn-member-accent-soft: rgba(123, 144, 255, 0.16);
    --zn-member-accent-surface: rgba(123, 144, 255, 0.14);
    --zn-member-accent-surface-strong: rgba(123, 144, 255, 0.24);
    --zn-member-accent-border: rgba(123, 144, 255, 0.24);
    --zn-member-accent-border-muted: rgba(123, 144, 255, 0.18);
    --zn-member-accent-border-strong: rgba(123, 144, 255, 0.26);
    --zn-member-accent-text: #eef3ff;
    --zn-member-bg-surface-hover: rgba(255, 255, 255, 0.03);
    --zn-member-bg-surface-active: rgba(255, 255, 255, 0.04);
    --zn-member-bg-surface-strong: rgba(255, 255, 255, 0.05);
    --zn-member-bg-surface-lift: rgba(255, 255, 255, 0.035);
    --zn-member-bg-surface-faint: rgba(255, 255, 255, 0.02);
    --zn-member-primary: #7890ff;
    --zn-member-primary-hover: #6178e8;
    --zn-member-primary-text: #f5f8ff;
    --zn-member-shadow: 0 22px 60px rgba(3, 8, 15, 0.38);
    --zn-member-scrollbar-track: rgba(8, 13, 22, 0.24);
    --zn-member-scrollbar-thumb: rgba(111, 128, 164, 0.38);
    --zn-member-scrollbar-thumb-hover: rgba(139, 156, 198, 0.58);
    --zn-member-scrollbar-border: rgba(8, 13, 22, 0.92);
    --zn-member-scrollbar-fill-start: rgba(146, 162, 202, 0.5);
    --zn-member-scrollbar-fill-end: rgba(82, 100, 134, 0.45);
}

[data-theme="stormy-morning"] {
    --zn-color-scheme: dark;
    --zn-bg-app: #0B1220;
    --zn-bg-app-member: #0B1220;
    --zn-bg-app-gradient-start: rgba(15, 28, 46, 0.98);
    --zn-bg-app-gradient-end: #0B1220;
    --zn-bg-sidebar: #0F1C2E;
    --zn-bg-sidebar-alpha: rgba(15, 28, 46, 0.97);
    --zn-bg-surface: #1A2A3D;
    --zn-bg-surface-elevated: #142337;
    --zn-bg-surface-muted: #22354A;
    --zn-bg-panel: linear-gradient(180deg, rgba(26, 42, 61, 0.98), rgba(15, 28, 46, 0.96));
    --zn-bg-surface-hover: rgba(230, 237, 243, 0.04);
    --zn-bg-surface-active: rgba(230, 237, 243, 0.07);
    --zn-bg-surface-faint: rgba(230, 237, 243, 0.025);
    --zn-bg-surface-raised: rgba(230, 237, 243, 0.05);
    --zn-surface-glint: rgba(255, 255, 255, 0.08);
    --zn-surface-glint-soft: rgba(255, 255, 255, 0.04);

    --zn-border: #2C3E55;
    --zn-border-soft: #1F2A44;
    --zn-border-muted: #23354B;
    --zn-border-strong: #3A506B;

    --zn-text-primary: #E6EDF3;
    --zn-text-secondary: #A8B3C2;
    --zn-text-muted: #6B7C93;
    --zn-text-inverse: #07101B;

    --zn-accent: #4DA3FF;
    --zn-accent-hover: #3A8BE0;
    --zn-accent-soft: #1C3A5A;
    --zn-accent-surface: rgba(77, 163, 255, 0.14);
    --zn-accent-surface-strong: rgba(77, 163, 255, 0.2);
    --zn-accent-surface-lift: rgba(77, 163, 255, 0.26);
    --zn-accent-surface-muted: rgba(77, 163, 255, 0.09);
    --zn-accent-border: rgba(77, 163, 255, 0.34);
    --zn-accent-border-active: rgba(77, 163, 255, 0.3);
    --zn-accent-border-soft: rgba(77, 163, 255, 0.28);
    --zn-accent-border-subtle: rgba(77, 163, 255, 0.2);
    --zn-accent-border-focus: rgba(77, 163, 255, 0.42);
    --zn-accent-text: #E7F3FF;
    --zn-accent-text-muted: #CBE4FF;
    --zn-accent-text-strong: #F4FAFF;
    --zn-accent-shadow: rgba(77, 163, 255, 0.16);

    --zn-success: #3FB950;
    --zn-success-soft-muted: rgba(63, 185, 80, 0.1);
    --zn-success-soft: rgba(63, 185, 80, 0.13);
    --zn-success-soft-strong: rgba(63, 185, 80, 0.18);
    --zn-success-border: rgba(63, 185, 80, 0.34);
    --zn-success-text: #DFFFE9;
    --zn-warning: #F2C94C;
    --zn-warning-soft-muted: rgba(242, 201, 76, 0.1);
    --zn-warning-soft: rgba(242, 201, 76, 0.14);
    --zn-warning-soft-strong: rgba(242, 201, 76, 0.2);
    --zn-warning-border: rgba(242, 201, 76, 0.34);
    --zn-warning-border-strong: rgba(242, 201, 76, 0.4);
    --zn-warning-text: #FFF4C5;
    --zn-danger: #E5533D;
    --zn-danger-soft: rgba(229, 83, 61, 0.13);
    --zn-danger-soft-strong: rgba(229, 83, 61, 0.2);
    --zn-danger-border: rgba(229, 83, 61, 0.36);
    --zn-danger-border-soft: rgba(229, 83, 61, 0.32);
    --zn-danger-border-strong: rgba(229, 83, 61, 0.48);
    --zn-danger-text: #FFD8D1;
    --zn-danger-text-strong: #FFF4F2;
    --zn-danger-surface: rgba(229, 83, 61, 0.14);
    --zn-danger-surface-hover: rgba(229, 83, 61, 0.2);
    --zn-danger-shadow: rgba(229, 83, 61, 0.12);
    --zn-success-ring: rgba(63, 185, 80, 0.1);
    --zn-warning-ring: rgba(242, 201, 76, 0.1);
    --zn-danger-ring: rgba(229, 83, 61, 0.1);

    --zn-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
    --zn-shadow-soft: 0 0 0 1px rgba(77, 163, 255, 0.12), 0 16px 34px rgba(0, 0, 0, 0.32);
    --zn-shadow-sidebar: 24px 0 80px rgba(0, 0, 0, 0.36);

    --zn-scrollbar-track: rgba(11, 18, 32, 0.38);
    --zn-scrollbar-thumb: rgba(107, 124, 147, 0.48);
    --zn-scrollbar-thumb-hover: rgba(168, 179, 194, 0.58);
    --zn-scrollbar-border: rgba(11, 18, 32, 0.88);
    --zn-scrollbar-fill-start: rgba(168, 179, 194, 0.48);
    --zn-scrollbar-fill-end: rgba(107, 124, 147, 0.42);
    --zn-brand-surface-end: rgba(77, 163, 255, 0.12);
    --zn-brand-border: rgba(77, 163, 255, 0.3);

    --zn-member-bg-app: #0B1220;
    --zn-member-bg-shell: #0F1C2E;
    --zn-member-bg-pane: #1A2A3D;
    --zn-member-bg-card: rgba(15, 28, 46, 0.94);
    --zn-member-bg-bubble-in: #1A2A3D;
    --zn-member-bg-bubble-out: #1C3A5A;
    --zn-member-border: #2C3E55;
    --zn-member-border-soft: rgba(230, 237, 243, 0.08);
    --zn-member-border-strong: #3A506B;
    --zn-member-border-bright: rgba(168, 179, 194, 0.18);
    --zn-member-border-muted: rgba(168, 179, 194, 0.1);
    --zn-member-text-primary: #E6EDF3;
    --zn-member-text-secondary: #A8B3C2;
    --zn-member-text-muted: #6B7C93;
    --zn-member-text-link: #CBE4FF;
    --zn-member-danger-text: #FFD8D1;
    --zn-member-danger-text-soft: #FFE2DD;
    --zn-member-warning-text: #FFF4C5;
    --zn-member-success-text: #DFFFE9;
    --zn-member-accent: #4DA3FF;
    --zn-member-accent-soft: rgba(77, 163, 255, 0.16);
    --zn-member-accent-surface: rgba(77, 163, 255, 0.14);
    --zn-member-accent-surface-strong: rgba(77, 163, 255, 0.22);
    --zn-member-accent-border: rgba(77, 163, 255, 0.3);
    --zn-member-accent-border-muted: rgba(77, 163, 255, 0.2);
    --zn-member-accent-border-strong: rgba(77, 163, 255, 0.36);
    --zn-member-accent-text: #E7F3FF;
    --zn-member-bg-surface-hover: rgba(230, 237, 243, 0.04);
    --zn-member-bg-surface-active: rgba(230, 237, 243, 0.07);
    --zn-member-bg-surface-strong: rgba(230, 237, 243, 0.08);
    --zn-member-bg-surface-lift: rgba(230, 237, 243, 0.05);
    --zn-member-bg-surface-faint: rgba(230, 237, 243, 0.025);
    --zn-member-primary: #4DA3FF;
    --zn-member-primary-hover: #3A8BE0;
    --zn-member-primary-text: #F4FAFF;
    --zn-member-shadow: 0 22px 60px rgba(0, 0, 0, 0.4);
    --zn-member-scrollbar-track: rgba(11, 18, 32, 0.28);
    --zn-member-scrollbar-thumb: rgba(107, 124, 147, 0.42);
    --zn-member-scrollbar-thumb-hover: rgba(168, 179, 194, 0.58);
    --zn-member-scrollbar-border: rgba(11, 18, 32, 0.88);
    --zn-member-scrollbar-fill-start: rgba(168, 179, 194, 0.48);
    --zn-member-scrollbar-fill-end: rgba(107, 124, 147, 0.42);
}

[data-theme="urban-loft"] {
    --zn-color-scheme: dark;
    --zn-bg-app: #121212;
    --zn-bg-app-member: #121212;
    --zn-bg-app-gradient-start: rgba(26, 26, 26, 0.98);
    --zn-bg-app-gradient-end: #121212;
    --zn-bg-sidebar: #1A1A1A;
    --zn-bg-sidebar-alpha: rgba(26, 26, 26, 0.97);
    --zn-bg-surface: #222222;
    --zn-bg-surface-elevated: #1A1A1A;
    --zn-bg-surface-muted: #2C2C2C;
    --zn-bg-panel: linear-gradient(180deg, rgba(34, 34, 34, 0.98), rgba(26, 26, 26, 0.96));
    --zn-bg-surface-hover: rgba(241, 241, 241, 0.04);
    --zn-bg-surface-active: rgba(241, 241, 241, 0.07);
    --zn-bg-surface-faint: rgba(241, 241, 241, 0.025);
    --zn-bg-surface-raised: rgba(241, 241, 241, 0.05);
    --zn-surface-glint: rgba(255, 255, 255, 0.08);
    --zn-surface-glint-soft: rgba(255, 255, 255, 0.04);

    --zn-border: #3A3A3A;
    --zn-border-soft: #2A2A2A;
    --zn-border-muted: #303030;
    --zn-border-strong: #4A4A4A;

    --zn-text-primary: #F1F1F1;
    --zn-text-secondary: #C7C7C7;
    --zn-text-muted: #8A8A8A;
    --zn-text-inverse: #121212;

    --zn-accent: #A35E47;
    --zn-accent-hover: #8B4E3A;
    --zn-accent-soft: #3A2620;
    --zn-accent-surface: rgba(163, 94, 71, 0.16);
    --zn-accent-surface-strong: rgba(163, 94, 71, 0.22);
    --zn-accent-surface-lift: rgba(163, 94, 71, 0.28);
    --zn-accent-surface-muted: rgba(163, 94, 71, 0.1);
    --zn-accent-border: rgba(163, 94, 71, 0.36);
    --zn-accent-border-active: rgba(163, 94, 71, 0.32);
    --zn-accent-border-soft: rgba(163, 94, 71, 0.28);
    --zn-accent-border-subtle: rgba(163, 94, 71, 0.22);
    --zn-accent-border-focus: rgba(163, 94, 71, 0.44);
    --zn-accent-text: #FFE9E1;
    --zn-accent-text-muted: #F4CABC;
    --zn-accent-text-strong: #FFF5F1;
    --zn-accent-shadow: rgba(163, 94, 71, 0.16);

    --zn-success: #4CAF50;
    --zn-success-soft-muted: rgba(76, 175, 80, 0.1);
    --zn-success-soft: rgba(76, 175, 80, 0.13);
    --zn-success-soft-strong: rgba(76, 175, 80, 0.18);
    --zn-success-border: rgba(76, 175, 80, 0.34);
    --zn-success-text: #E2FFE4;
    --zn-warning: #E0A800;
    --zn-warning-soft-muted: rgba(224, 168, 0, 0.1);
    --zn-warning-soft: rgba(224, 168, 0, 0.14);
    --zn-warning-soft-strong: rgba(224, 168, 0, 0.2);
    --zn-warning-border: rgba(224, 168, 0, 0.34);
    --zn-warning-border-strong: rgba(224, 168, 0, 0.42);
    --zn-warning-text: #FFE8A6;
    --zn-danger: #D64545;
    --zn-danger-soft: rgba(214, 69, 69, 0.13);
    --zn-danger-soft-strong: rgba(214, 69, 69, 0.2);
    --zn-danger-border: rgba(214, 69, 69, 0.36);
    --zn-danger-border-soft: rgba(214, 69, 69, 0.32);
    --zn-danger-border-strong: rgba(214, 69, 69, 0.48);
    --zn-danger-text: #FFDADA;
    --zn-danger-text-strong: #FFF3F3;
    --zn-danger-surface: rgba(214, 69, 69, 0.14);
    --zn-danger-surface-hover: rgba(214, 69, 69, 0.2);
    --zn-danger-shadow: rgba(214, 69, 69, 0.12);
    --zn-success-ring: rgba(76, 175, 80, 0.1);
    --zn-warning-ring: rgba(224, 168, 0, 0.1);
    --zn-danger-ring: rgba(214, 69, 69, 0.1);

    --zn-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
    --zn-shadow-soft: 0 0 0 1px rgba(163, 94, 71, 0.12), 0 16px 34px rgba(0, 0, 0, 0.48);
    --zn-shadow-sidebar: 24px 0 80px rgba(0, 0, 0, 0.5);

    --zn-scrollbar-track: rgba(18, 18, 18, 0.38);
    --zn-scrollbar-thumb: rgba(138, 138, 138, 0.44);
    --zn-scrollbar-thumb-hover: rgba(199, 199, 199, 0.58);
    --zn-scrollbar-border: rgba(18, 18, 18, 0.88);
    --zn-scrollbar-fill-start: rgba(199, 199, 199, 0.42);
    --zn-scrollbar-fill-end: rgba(138, 138, 138, 0.38);
    --zn-brand-surface-end: rgba(163, 94, 71, 0.12);
    --zn-brand-border: rgba(163, 94, 71, 0.34);

    --zn-member-bg-app: #121212;
    --zn-member-bg-shell: #1A1A1A;
    --zn-member-bg-pane: #222222;
    --zn-member-bg-card: rgba(26, 26, 26, 0.94);
    --zn-member-bg-bubble-in: #222222;
    --zn-member-bg-bubble-out: #5B3328;
    --zn-member-border: #3A3A3A;
    --zn-member-border-soft: rgba(241, 241, 241, 0.08);
    --zn-member-border-strong: #4A4A4A;
    --zn-member-border-bright: rgba(199, 199, 199, 0.18);
    --zn-member-border-muted: rgba(199, 199, 199, 0.1);
    --zn-member-text-primary: #F1F1F1;
    --zn-member-text-secondary: #C7C7C7;
    --zn-member-text-muted: #8A8A8A;
    --zn-member-text-link: #F4CABC;
    --zn-member-danger-text: #FFDADA;
    --zn-member-danger-text-soft: #FFE6E6;
    --zn-member-warning-text: #FFE8A6;
    --zn-member-success-text: #E2FFE4;
    --zn-member-accent: #A35E47;
    --zn-member-accent-soft: rgba(163, 94, 71, 0.16);
    --zn-member-accent-surface: rgba(163, 94, 71, 0.16);
    --zn-member-accent-surface-strong: rgba(163, 94, 71, 0.24);
    --zn-member-accent-border: rgba(163, 94, 71, 0.32);
    --zn-member-accent-border-muted: rgba(163, 94, 71, 0.22);
    --zn-member-accent-border-strong: rgba(163, 94, 71, 0.4);
    --zn-member-accent-text: #FFE9E1;
    --zn-member-bg-surface-hover: rgba(241, 241, 241, 0.04);
    --zn-member-bg-surface-active: rgba(241, 241, 241, 0.07);
    --zn-member-bg-surface-strong: rgba(241, 241, 241, 0.08);
    --zn-member-bg-surface-lift: rgba(241, 241, 241, 0.05);
    --zn-member-bg-surface-faint: rgba(241, 241, 241, 0.025);
    --zn-member-primary: #A35E47;
    --zn-member-primary-hover: #8B4E3A;
    --zn-member-primary-text: #FFF5F1;
    --zn-member-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
    --zn-member-scrollbar-track: rgba(18, 18, 18, 0.28);
    --zn-member-scrollbar-thumb: rgba(138, 138, 138, 0.42);
    --zn-member-scrollbar-thumb-hover: rgba(199, 199, 199, 0.58);
    --zn-member-scrollbar-border: rgba(18, 18, 18, 0.88);
    --zn-member-scrollbar-fill-start: rgba(199, 199, 199, 0.42);
    --zn-member-scrollbar-fill-end: rgba(138, 138, 138, 0.38);
}

[data-theme="yacht-club"] {
    --zn-color-scheme: light;
    --zn-bg-app: #F2F0EF;
    --zn-bg-app-member: #F2F0EF;
    --zn-bg-app-gradient-start: rgba(247, 244, 241, 0.98);
    --zn-bg-app-gradient-end: #F2F0EF;
    --zn-bg-sidebar: #E5E0DA;
    --zn-bg-sidebar-alpha: rgba(229, 224, 218, 0.97);
    --zn-bg-surface: #FFFFFF;
    --zn-bg-surface-elevated: #F7F4F1;
    --zn-bg-surface-muted: #F7F4F1;
    --zn-bg-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 244, 241, 0.96));
    --zn-bg-surface-hover: rgba(44, 44, 44, 0.04);
    --zn-bg-surface-active: rgba(44, 44, 44, 0.06);
    --zn-bg-surface-faint: rgba(44, 44, 44, 0.025);
    --zn-bg-surface-raised: rgba(44, 44, 44, 0.035);
    --zn-surface-glint: rgba(255, 255, 255, 0.72);
    --zn-surface-glint-soft: rgba(255, 255, 255, 0.46);

    --zn-border: #D6D0C8;
    --zn-border-soft: #EAE5DF;
    --zn-border-muted: #E1DBD4;
    --zn-border-strong: #BDB4AA;

    --zn-text-primary: #2C2C2C;
    --zn-text-secondary: #5C5C5C;
    --zn-text-muted: #8A8A8A;
    --zn-text-inverse: #FFFFFF;

    --zn-accent: #245F73;
    --zn-accent-hover: #1C4C5D;
    --zn-accent-soft: #DDE8EC;
    --zn-accent-surface: #DDE8EC;
    --zn-accent-surface-strong: #D1E1E6;
    --zn-accent-surface-lift: #EAF2F5;
    --zn-accent-surface-muted: #EFF6F8;
    --zn-accent-border: #9CBBC6;
    --zn-accent-border-active: #A9C5CE;
    --zn-accent-border-soft: #BDD3DA;
    --zn-accent-border-subtle: #D1E1E6;
    --zn-accent-border-focus: #7EA9B8;
    --zn-accent-text: #174556;
    --zn-accent-text-muted: #245F73;
    --zn-accent-text-strong: #174556;
    --zn-accent-shadow: rgba(36, 95, 115, 0.12);

    --zn-success: #3A8D5D;
    --zn-success-soft-muted: rgba(58, 141, 93, 0.08);
    --zn-success-soft: rgba(58, 141, 93, 0.12);
    --zn-success-soft-strong: rgba(58, 141, 93, 0.16);
    --zn-success-border: rgba(58, 141, 93, 0.3);
    --zn-success-text: #276842;
    --zn-warning: #C89B3C;
    --zn-warning-soft-muted: rgba(200, 155, 60, 0.08);
    --zn-warning-soft: rgba(200, 155, 60, 0.13);
    --zn-warning-soft-strong: rgba(200, 155, 60, 0.18);
    --zn-warning-border: rgba(200, 155, 60, 0.3);
    --zn-warning-border-strong: rgba(200, 155, 60, 0.4);
    --zn-warning-text: #75591F;
    --zn-danger: #B04A3A;
    --zn-danger-soft: rgba(176, 74, 58, 0.1);
    --zn-danger-soft-strong: rgba(176, 74, 58, 0.16);
    --zn-danger-border: rgba(176, 74, 58, 0.3);
    --zn-danger-border-soft: rgba(176, 74, 58, 0.26);
    --zn-danger-border-strong: rgba(176, 74, 58, 0.42);
    --zn-danger-text: #8A3528;
    --zn-danger-text-strong: #6F291F;
    --zn-danger-surface: rgba(176, 74, 58, 0.1);
    --zn-danger-surface-hover: rgba(176, 74, 58, 0.15);
    --zn-danger-shadow: rgba(176, 74, 58, 0.08);
    --zn-success-ring: rgba(58, 141, 93, 0.08);
    --zn-warning-ring: rgba(200, 155, 60, 0.08);
    --zn-danger-ring: rgba(176, 74, 58, 0.08);

    --zn-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
    --zn-shadow-soft: 0 0 0 1px rgba(36, 95, 115, 0.08), 0 16px 34px rgba(0, 0, 0, 0.06);
    --zn-shadow-sidebar: 24px 0 80px rgba(0, 0, 0, 0.08);

    --zn-scrollbar-track: rgba(214, 208, 200, 0.36);
    --zn-scrollbar-thumb: rgba(138, 138, 138, 0.38);
    --zn-scrollbar-thumb-hover: rgba(92, 92, 92, 0.5);
    --zn-scrollbar-border: rgba(242, 240, 239, 0.92);
    --zn-scrollbar-fill-start: rgba(138, 138, 138, 0.3);
    --zn-scrollbar-fill-end: rgba(92, 92, 92, 0.26);
    --zn-brand-surface-end: #DDE8EC;
    --zn-brand-border: #9CBBC6;

    --zn-member-bg-app: #F2F0EF;
    --zn-member-bg-shell: #E5E0DA;
    --zn-member-bg-pane: #FFFFFF;
    --zn-member-bg-card: rgba(255, 255, 255, 0.94);
    --zn-member-bg-bubble-in: #FFFFFF;
    --zn-member-bg-bubble-out: #DDE8EC;
    --zn-member-border: #D6D0C8;
    --zn-member-border-soft: #EAE5DF;
    --zn-member-border-strong: #BDB4AA;
    --zn-member-border-bright: #D6D0C8;
    --zn-member-border-muted: #EAE5DF;
    --zn-member-text-primary: #2C2C2C;
    --zn-member-text-secondary: #5C5C5C;
    --zn-member-text-muted: #8A8A8A;
    --zn-member-text-link: #245F73;
    --zn-member-danger-text: #8A3528;
    --zn-member-danger-text-soft: #B04A3A;
    --zn-member-warning-text: #75591F;
    --zn-member-success-text: #276842;
    --zn-member-accent: #245F73;
    --zn-member-accent-soft: #DDE8EC;
    --zn-member-accent-surface: #DDE8EC;
    --zn-member-accent-surface-strong: #D1E1E6;
    --zn-member-accent-border: #9CBBC6;
    --zn-member-accent-border-muted: #BDD3DA;
    --zn-member-accent-border-strong: #7EA9B8;
    --zn-member-accent-text: #174556;
    --zn-member-bg-surface-hover: rgba(44, 44, 44, 0.04);
    --zn-member-bg-surface-active: rgba(44, 44, 44, 0.06);
    --zn-member-bg-surface-strong: rgba(44, 44, 44, 0.08);
    --zn-member-bg-surface-lift: rgba(44, 44, 44, 0.035);
    --zn-member-bg-surface-faint: rgba(44, 44, 44, 0.025);
    --zn-member-primary: #245F73;
    --zn-member-primary-hover: #1C4C5D;
    --zn-member-primary-text: #FFFFFF;
    --zn-member-shadow: 0 22px 60px rgba(0, 0, 0, 0.08);
    --zn-member-scrollbar-track: rgba(214, 208, 200, 0.28);
    --zn-member-scrollbar-thumb: rgba(138, 138, 138, 0.36);
    --zn-member-scrollbar-thumb-hover: rgba(92, 92, 92, 0.5);
    --zn-member-scrollbar-border: rgba(242, 240, 239, 0.92);
    --zn-member-scrollbar-fill-start: rgba(138, 138, 138, 0.3);
    --zn-member-scrollbar-fill-end: rgba(92, 92, 92, 0.26);
}

[data-theme="znode-light"] {
    --zn-color-scheme: light;
    --zn-bg-app: #FFFFFF;
    --zn-bg-app-member: #FFFFFF;
    --zn-bg-app-gradient-start: rgba(245, 247, 250, 0.98);
    --zn-bg-app-gradient-end: #FFFFFF;
    --zn-bg-sidebar: #F5F7FA;
    --zn-bg-sidebar-alpha: rgba(245, 247, 250, 0.97);
    --zn-bg-surface: #FFFFFF;
    --zn-bg-surface-elevated: #F8FAFC;
    --zn-bg-surface-muted: #F0F2F5;
    --zn-bg-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 250, 0.96));
    --zn-bg-surface-hover: rgba(26, 26, 26, 0.035);
    --zn-bg-surface-active: rgba(26, 26, 26, 0.055);
    --zn-bg-surface-faint: rgba(26, 26, 26, 0.02);
    --zn-bg-surface-raised: rgba(26, 26, 26, 0.03);
    --zn-surface-glint: rgba(255, 255, 255, 0.72);
    --zn-surface-glint-soft: rgba(255, 255, 255, 0.46);

    --zn-border: #E2E6EA;
    --zn-border-soft: #EEF1F4;
    --zn-border-muted: #E8ECF0;
    --zn-border-strong: #C8D0D8;

    --zn-text-primary: #1A1A1A;
    --zn-text-secondary: #555555;
    --zn-text-muted: #888888;
    --zn-text-inverse: #FFFFFF;

    --zn-accent: #007AFF;
    --zn-accent-hover: #0062CC;
    --zn-accent-soft: #E6F0FF;
    --zn-accent-surface: #E6F0FF;
    --zn-accent-surface-strong: #D7E7FF;
    --zn-accent-surface-lift: #F1F6FF;
    --zn-accent-surface-muted: #F5F9FF;
    --zn-accent-border: #9BC8FF;
    --zn-accent-border-active: #B4D6FF;
    --zn-accent-border-soft: #C9E0FF;
    --zn-accent-border-subtle: #DAEAFF;
    --zn-accent-border-focus: #6EAEFF;
    --zn-accent-text: #0055B3;
    --zn-accent-text-muted: #0062CC;
    --zn-accent-text-strong: #004A9F;
    --zn-accent-shadow: rgba(0, 122, 255, 0.1);

    --zn-success: #28A745;
    --zn-success-soft-muted: rgba(40, 167, 69, 0.08);
    --zn-success-soft: rgba(40, 167, 69, 0.12);
    --zn-success-soft-strong: rgba(40, 167, 69, 0.16);
    --zn-success-border: rgba(40, 167, 69, 0.3);
    --zn-success-text: #1D7A33;
    --zn-warning: #FFC107;
    --zn-warning-soft-muted: rgba(255, 193, 7, 0.08);
    --zn-warning-soft: rgba(255, 193, 7, 0.14);
    --zn-warning-soft-strong: rgba(255, 193, 7, 0.2);
    --zn-warning-border: rgba(180, 130, 0, 0.28);
    --zn-warning-border-strong: rgba(180, 130, 0, 0.38);
    --zn-warning-text: #765400;
    --zn-danger: #DC3545;
    --zn-danger-soft: rgba(220, 53, 69, 0.1);
    --zn-danger-soft-strong: rgba(220, 53, 69, 0.16);
    --zn-danger-border: rgba(220, 53, 69, 0.3);
    --zn-danger-border-soft: rgba(220, 53, 69, 0.26);
    --zn-danger-border-strong: rgba(220, 53, 69, 0.42);
    --zn-danger-text: #A71D2A;
    --zn-danger-text-strong: #821722;
    --zn-danger-surface: rgba(220, 53, 69, 0.1);
    --zn-danger-surface-hover: rgba(220, 53, 69, 0.15);
    --zn-danger-shadow: rgba(220, 53, 69, 0.08);
    --zn-success-ring: rgba(40, 167, 69, 0.08);
    --zn-warning-ring: rgba(255, 193, 7, 0.08);
    --zn-danger-ring: rgba(220, 53, 69, 0.08);

    --zn-shadow: 0 14px 34px rgba(0, 0, 0, 0.05);
    --zn-shadow-soft: 0 0 0 1px rgba(0, 122, 255, 0.06), 0 16px 34px rgba(0, 0, 0, 0.04);
    --zn-shadow-sidebar: 24px 0 80px rgba(0, 0, 0, 0.05);

    --zn-scrollbar-track: rgba(226, 230, 234, 0.36);
    --zn-scrollbar-thumb: rgba(136, 136, 136, 0.34);
    --zn-scrollbar-thumb-hover: rgba(85, 85, 85, 0.48);
    --zn-scrollbar-border: rgba(255, 255, 255, 0.92);
    --zn-scrollbar-fill-start: rgba(136, 136, 136, 0.28);
    --zn-scrollbar-fill-end: rgba(85, 85, 85, 0.24);
    --zn-brand-surface-end: #E6F0FF;
    --zn-brand-border: #9BC8FF;

    --zn-member-bg-app: #FFFFFF;
    --zn-member-bg-shell: #F5F7FA;
    --zn-member-bg-pane: #FFFFFF;
    --zn-member-bg-card: rgba(255, 255, 255, 0.94);
    --zn-member-bg-bubble-in: #FFFFFF;
    --zn-member-bg-bubble-out: #E6F0FF;
    --zn-member-border: #E2E6EA;
    --zn-member-border-soft: #EEF1F4;
    --zn-member-border-strong: #C8D0D8;
    --zn-member-border-bright: #E2E6EA;
    --zn-member-border-muted: #EEF1F4;
    --zn-member-text-primary: #1A1A1A;
    --zn-member-text-secondary: #555555;
    --zn-member-text-muted: #888888;
    --zn-member-text-link: #0062CC;
    --zn-member-danger-text: #A71D2A;
    --zn-member-danger-text-soft: #DC3545;
    --zn-member-warning-text: #765400;
    --zn-member-success-text: #1D7A33;
    --zn-member-accent: #007AFF;
    --zn-member-accent-soft: #E6F0FF;
    --zn-member-accent-surface: #E6F0FF;
    --zn-member-accent-surface-strong: #D7E7FF;
    --zn-member-accent-border: #9BC8FF;
    --zn-member-accent-border-muted: #C9E0FF;
    --zn-member-accent-border-strong: #6EAEFF;
    --zn-member-accent-text: #0055B3;
    --zn-member-bg-surface-hover: rgba(26, 26, 26, 0.035);
    --zn-member-bg-surface-active: rgba(26, 26, 26, 0.055);
    --zn-member-bg-surface-strong: rgba(26, 26, 26, 0.075);
    --zn-member-bg-surface-lift: rgba(26, 26, 26, 0.03);
    --zn-member-bg-surface-faint: rgba(26, 26, 26, 0.02);
    --zn-member-primary: #007AFF;
    --zn-member-primary-hover: #0062CC;
    --zn-member-primary-text: #FFFFFF;
    --zn-member-shadow: 0 22px 60px rgba(0, 0, 0, 0.05);
    --zn-member-scrollbar-track: rgba(226, 230, 234, 0.28);
    --zn-member-scrollbar-thumb: rgba(136, 136, 136, 0.32);
    --zn-member-scrollbar-thumb-hover: rgba(85, 85, 85, 0.48);
    --zn-member-scrollbar-border: rgba(255, 255, 255, 0.92);
    --zn-member-scrollbar-fill-start: rgba(136, 136, 136, 0.28);
    --zn-member-scrollbar-fill-end: rgba(85, 85, 85, 0.24);
}

[data-theme="cobalt-sky"],
[data-theme="tuscan-sunset"],
[data-theme="ink-wash"] {
    color-scheme: light;

    --zn-color-scheme: light;
    --zn-bg-app-member: var(--zn-bg-app);
    --zn-bg-app-gradient-start: var(--zn-bg-app);
    --zn-bg-app-gradient-end: var(--zn-bg-app);
    --zn-bg-sidebar-alpha: color-mix(in srgb, var(--zn-bg-sidebar) 97%, transparent);
    --zn-bg-surface-elevated: var(--zn-bg-surface-muted);
    --zn-bg-panel: linear-gradient(180deg, var(--zn-bg-surface), var(--zn-bg-surface-muted));
    --zn-bg-surface-hover: rgba(26, 26, 26, 0.035);
    --zn-bg-surface-active: rgba(26, 26, 26, 0.055);
    --zn-bg-surface-faint: rgba(26, 26, 26, 0.02);
    --zn-bg-surface-raised: rgba(26, 26, 26, 0.03);
    --zn-surface-glint: rgba(255, 255, 255, 0.72);
    --zn-surface-glint-soft: rgba(255, 255, 255, 0.46);

    --zn-border-muted: var(--zn-border-soft);
    --zn-border-strong: var(--zn-border);

    --zn-text-inverse: #FFFFFF;

    --zn-accent-surface: var(--zn-accent-soft);
    --zn-accent-surface-strong: color-mix(in srgb, var(--zn-accent-soft) 84%, var(--zn-accent) 16%);
    --zn-accent-surface-lift: color-mix(in srgb, var(--zn-accent-soft) 92%, #FFFFFF 8%);
    --zn-accent-surface-muted: color-mix(in srgb, var(--zn-accent-soft) 72%, #FFFFFF 28%);
    --zn-accent-border: color-mix(in srgb, var(--zn-accent) 34%, var(--zn-border) 66%);
    --zn-accent-border-active: color-mix(in srgb, var(--zn-accent) 42%, var(--zn-border) 58%);
    --zn-accent-border-soft: color-mix(in srgb, var(--zn-accent) 24%, var(--zn-border-soft) 76%);
    --zn-accent-border-subtle: color-mix(in srgb, var(--zn-accent) 16%, var(--zn-border-soft) 84%);
    --zn-accent-border-focus: color-mix(in srgb, var(--zn-accent) 52%, var(--zn-border) 48%);
    --zn-accent-text: var(--zn-accent-hover);
    --zn-accent-text-muted: var(--zn-accent);
    --zn-accent-text-strong: var(--zn-accent-hover);
    --zn-accent-shadow: color-mix(in srgb, var(--zn-accent) 14%, transparent);

    --zn-success-soft-muted: color-mix(in srgb, var(--zn-success) 8%, transparent);
    --zn-success-soft: color-mix(in srgb, var(--zn-success) 12%, transparent);
    --zn-success-soft-strong: color-mix(in srgb, var(--zn-success) 16%, transparent);
    --zn-success-border: color-mix(in srgb, var(--zn-success) 30%, transparent);
    --zn-success-text: var(--zn-success);
    --zn-warning-soft-muted: color-mix(in srgb, var(--zn-warning) 8%, transparent);
    --zn-warning-soft: color-mix(in srgb, var(--zn-warning) 13%, transparent);
    --zn-warning-soft-strong: color-mix(in srgb, var(--zn-warning) 18%, transparent);
    --zn-warning-border: color-mix(in srgb, var(--zn-warning) 30%, transparent);
    --zn-warning-border-strong: color-mix(in srgb, var(--zn-warning) 40%, transparent);
    --zn-warning-text: #75591F;
    --zn-danger-soft: color-mix(in srgb, var(--zn-danger) 10%, transparent);
    --zn-danger-soft-strong: color-mix(in srgb, var(--zn-danger) 16%, transparent);
    --zn-danger-border: color-mix(in srgb, var(--zn-danger) 30%, transparent);
    --zn-danger-border-soft: color-mix(in srgb, var(--zn-danger) 26%, transparent);
    --zn-danger-border-strong: color-mix(in srgb, var(--zn-danger) 42%, transparent);
    --zn-danger-text: var(--zn-danger);
    --zn-danger-text-strong: color-mix(in srgb, var(--zn-danger) 78%, #000000 22%);
    --zn-danger-surface: color-mix(in srgb, var(--zn-danger) 10%, transparent);
    --zn-danger-surface-hover: color-mix(in srgb, var(--zn-danger) 15%, transparent);
    --zn-danger-shadow: color-mix(in srgb, var(--zn-danger) 8%, transparent);
    --zn-success-ring: color-mix(in srgb, var(--zn-success) 8%, transparent);
    --zn-warning-ring: color-mix(in srgb, var(--zn-warning) 8%, transparent);
    --zn-danger-ring: color-mix(in srgb, var(--zn-danger) 8%, transparent);

    --zn-shadow-soft: var(--zn-shadow);
    --zn-shadow-sidebar: var(--zn-shadow);

    --zn-scrollbar-track: color-mix(in srgb, var(--zn-border-soft) 42%, transparent);
    --zn-scrollbar-thumb: color-mix(in srgb, var(--zn-text-muted) 42%, transparent);
    --zn-scrollbar-thumb-hover: color-mix(in srgb, var(--zn-text-secondary) 54%, transparent);
    --zn-scrollbar-border: color-mix(in srgb, var(--zn-bg-app) 92%, transparent);
    --zn-scrollbar-fill-start: color-mix(in srgb, var(--zn-text-muted) 30%, transparent);
    --zn-scrollbar-fill-end: color-mix(in srgb, var(--zn-text-secondary) 24%, transparent);
    --zn-brand-surface-end: var(--zn-accent-soft);
    --zn-brand-border: var(--zn-accent-border);

    --zn-member-bg-app: var(--zn-bg-app);
    --zn-member-bg-shell: var(--zn-bg-sidebar);
    --zn-member-bg-pane: var(--zn-bg-surface);
    --zn-member-bg-card: color-mix(in srgb, var(--zn-bg-surface) 94%, transparent);
    --zn-member-bg-bubble-in: var(--zn-bg-surface);
    --zn-member-bg-bubble-out: var(--zn-accent-soft);
    --zn-member-border: var(--zn-border);
    --zn-member-border-soft: var(--zn-border-soft);
    --zn-member-border-strong: var(--zn-border);
    --zn-member-border-bright: var(--zn-border);
    --zn-member-border-muted: var(--zn-border-soft);
    --zn-member-text-primary: var(--zn-text-primary);
    --zn-member-text-secondary: var(--zn-text-secondary);
    --zn-member-text-muted: var(--zn-text-muted);
    --zn-member-text-link: var(--zn-accent-hover);
    --zn-member-danger-text: var(--zn-danger);
    --zn-member-danger-text-soft: var(--zn-danger);
    --zn-member-warning-text: var(--zn-warning-text);
    --zn-member-success-text: var(--zn-success);
    --zn-member-accent: var(--zn-accent);
    --zn-member-accent-soft: var(--zn-accent-soft);
    --zn-member-accent-surface: var(--zn-accent-soft);
    --zn-member-accent-surface-strong: var(--zn-accent-surface-strong);
    --zn-member-accent-border: var(--zn-accent-border);
    --zn-member-accent-border-muted: var(--zn-accent-border-soft);
    --zn-member-accent-border-strong: var(--zn-accent-border-focus);
    --zn-member-accent-text: var(--zn-accent-text);
    --zn-member-bg-surface-hover: var(--zn-bg-surface-hover);
    --zn-member-bg-surface-active: var(--zn-bg-surface-active);
    --zn-member-bg-surface-strong: rgba(26, 26, 26, 0.075);
    --zn-member-bg-surface-lift: var(--zn-bg-surface-raised);
    --zn-member-bg-surface-faint: var(--zn-bg-surface-faint);
    --zn-member-primary: var(--zn-accent);
    --zn-member-primary-hover: var(--zn-accent-hover);
    --zn-member-primary-text: #FFFFFF;
    --zn-member-shadow: var(--zn-shadow);
    --zn-member-scrollbar-track: var(--zn-scrollbar-track);
    --zn-member-scrollbar-thumb: var(--zn-scrollbar-thumb);
    --zn-member-scrollbar-thumb-hover: var(--zn-scrollbar-thumb-hover);
    --zn-member-scrollbar-border: var(--zn-scrollbar-border);
    --zn-member-scrollbar-fill-start: var(--zn-scrollbar-fill-start);
    --zn-member-scrollbar-fill-end: var(--zn-scrollbar-fill-end);
}

[data-theme="cobalt-sky"] {
    --zn-bg-app: #F3F7FB;
    --zn-bg-sidebar: #E6EEF7;
    --zn-bg-surface: #FFFFFF;
    --zn-bg-surface-muted: #EDF3F8;

    --zn-border: #B8CBE0;
    --zn-border-soft: #D8E4F0;

    --zn-text-primary: #0B1B33;
    --zn-text-secondary: #3F5368;
    --zn-text-muted: #6D8196;

    --zn-accent: #0047AB;
    --zn-accent-hover: #000080;
    --zn-accent-soft: #C8DAF2;
    --zn-accent-surface: color-mix(in srgb, var(--zn-accent) 18%, #FFFFFF 82%);
    --zn-accent-surface-strong: color-mix(in srgb, var(--zn-accent) 28%, #FFFFFF 72%);
    --zn-accent-surface-lift: color-mix(in srgb, var(--zn-accent) 20%, #FFFFFF 80%);
    --zn-accent-surface-muted: color-mix(in srgb, var(--zn-accent) 14%, #FFFFFF 86%);
    --zn-accent-border: color-mix(in srgb, var(--zn-accent) 54%, var(--zn-border) 46%);
    --zn-accent-border-active: color-mix(in srgb, var(--zn-accent) 62%, var(--zn-border) 38%);
    --zn-accent-border-soft: color-mix(in srgb, var(--zn-accent) 38%, var(--zn-border-soft) 62%);
    --zn-accent-border-subtle: color-mix(in srgb, var(--zn-accent) 28%, var(--zn-border-soft) 72%);
    --zn-accent-border-focus: color-mix(in srgb, var(--zn-accent) 72%, var(--zn-border) 28%);

    --zn-success: #2E8B57;
    --zn-warning: #D99A2B;
    --zn-danger: #C94A3A;

    --zn-shadow: 0 12px 32px rgba(0, 71, 171, 0.12);
}

[data-theme="tuscan-sunset"] {
    --zn-bg-app: #FFF5EC;
    --zn-bg-sidebar: #F6E4D4;
    --zn-bg-surface: #FFFFFF;
    --zn-bg-surface-muted: #FFE8D3;

    --zn-border: #E5C3AE;
    --zn-border-soft: #F1D8C8;

    --zn-text-primary: #2A1710;
    --zn-text-secondary: #6B4A3A;
    --zn-text-muted: #9988A1;

    --zn-accent: #E35336;
    --zn-accent-hover: #8A2B0E;
    --zn-accent-soft: #FFD3AC;

    --zn-success: #4F8A5B;
    --zn-warning: #D99A2B;
    --zn-danger: #B93224;

    --zn-shadow: 0 12px 32px rgba(138, 43, 14, 0.14);
}

[data-theme="ink-wash"] {
    --zn-bg-app: #F2F2EF;
    --zn-bg-sidebar: #E5E5E0;
    --zn-bg-surface: #FFFFFF;
    --zn-bg-surface-muted: #EEEEEA;

    --zn-border: #BEBEB8;
    --zn-border-soft: #DADAD4;

    --zn-text-primary: #1F1F1F;
    --zn-text-secondary: #4A4A4A;
    --zn-text-muted: #747474;

    --zn-accent: #4A4A4A;
    --zn-accent-hover: #2F2F2F;
    --zn-accent-soft: #D2D2CE;
    --zn-accent-surface-lift: color-mix(in srgb, var(--zn-accent-soft) 88%, #FFFFE3 12%);
    --zn-accent-surface-muted: color-mix(in srgb, var(--zn-accent-soft) 86%, #FFFFE3 14%);

    --zn-success: #3A7A5A;
    --zn-warning: #B8842C;
    --zn-danger: #B34A3A;

    --zn-shadow: 0 12px 32px rgba(74, 74, 74, 0.10);
}

.in-app-toast-container {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    top: max(18px, env(safe-area-inset-top));
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: min(380px, calc(100vw - 28px));
    pointer-events: none;
}

.in-app-toast {
    width: 100%;
    border: 1px solid var(--zn-border-strong);
    border-left: 3px solid var(--zn-accent);
    border-radius: 8px;
    padding: 11px 12px;
    background: var(--zn-bg-surface-elevated);
    background: color-mix(in srgb, var(--zn-bg-surface-elevated) 94%, black);
    box-shadow: var(--zn-shadow);
    color: var(--zn-text-primary);
    pointer-events: auto;
}

.in-app-toast.is-clickable {
    cursor: pointer;
}

.in-app-toast.is-clickable:hover,
.in-app-toast.is-clickable:focus-visible {
    border-color: var(--zn-accent-border);
    outline: none;
    box-shadow: var(--zn-shadow), 0 0 0 3px var(--zn-accent-soft);
}

.in-app-toast.severity-warn {
    border-left-color: var(--zn-warning);
}

.in-app-toast.severity-error,
.in-app-toast.severity-urgent {
    border-left-color: var(--zn-danger);
}

.in-app-toast-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.in-app-toast-source,
.in-app-toast-action {
    color: var(--zn-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.in-app-toast-action {
    color: var(--zn-accent-text);
    letter-spacing: 0;
    text-transform: none;
}

.in-app-toast-title {
    display: block;
    color: var(--zn-text-primary);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.25;
}

.in-app-toast-detail {
    display: block;
    margin-top: 3px;
    color: var(--zn-text-secondary);
    font-size: 0.78rem;
    line-height: 1.35;
}

.surface-switcher-link.has-in-app-activity,
.user-bottom-nav-link.has-in-app-activity,
.sidebar-link.has-in-app-activity {
    position: relative;
    border-color: var(--zn-warning-border, var(--zn-accent-border));
    box-shadow: inset 0 1px 0 var(--zn-surface-glint-soft), 0 0 0 1px var(--zn-warning-soft, var(--zn-accent-soft));
}

.surface-switcher-link.has-in-app-activity::before,
.user-bottom-nav-link.has-in-app-activity::before,
.sidebar-link.has-in-app-activity::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--zn-warning);
    box-shadow: 0 0 0 3px var(--zn-warning-soft), 0 0 18px var(--zn-warning);
}

.surface-switcher-link.has-in-app-activity::before,
.user-bottom-nav-link.has-in-app-activity::before {
    top: 5px;
    right: 7px;
}

.sidebar-link.has-in-app-activity::after {
    top: 10px;
    right: 10px;
}

.surface-switcher-link[data-in-app-severity="error"]::before,
.surface-switcher-link[data-in-app-severity="urgent"]::before,
.user-bottom-nav-link[data-in-app-severity="error"]::before,
.user-bottom-nav-link[data-in-app-severity="urgent"]::before,
.sidebar-link[data-in-app-severity="error"]::after,
.sidebar-link[data-in-app-severity="urgent"]::after {
    background: var(--zn-danger);
    box-shadow: 0 0 0 3px var(--zn-danger-soft), 0 0 18px var(--zn-danger);
}

@media (max-width: 720px) {
    .in-app-toast-container {
        right: 12px;
        top: max(12px, env(safe-area-inset-top));
        width: calc(100vw - 24px);
    }

    .in-app-toast {
        padding: 10px 11px;
    }
}