html[data-hubs-theme="padrao"] {
    color-scheme: light;
}

html[data-hubs-theme="black-blue"] {
    color-scheme: dark;
    --bg: #07101d;
    --bg-soft: #0d1727;
    --card: #101b2c;
    --card-soft: rgba(16, 27, 44, 0.82);
    --blue: #45a3ff;
    --blue-dark: #0145f2;
    --cyan: #4debff;
    --text: #eaf2ff;
    --ink: #eaf2ff;
    --muted: #9fb1c9;
    --muted-light: #7d91ad;
    --surface: #101b2c;
    --line: rgba(148, 181, 226, 0.18);
    --border: rgba(148, 181, 226, 0.18);
    --border-strong: rgba(77, 235, 255, 0.26);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.36);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.28);
    --hubs-theme-panel: #101b2c;
    --hubs-theme-panel-soft: #0c1625;
    --hubs-theme-field: #0b1524;
    --hubs-theme-field-text: #eaf2ff;
    --hubs-theme-hero: linear-gradient(135deg, #111d31, #08111f 55%, #0b2d4a);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(77, 235, 255, 0.14), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(1, 69, 242, 0.22), transparent 28%),
        linear-gradient(135deg, #07101d 0%, #0a1321 100%);
}

html[data-hubs-theme="sakura"] {
    color-scheme: light;
    --bg: #fff1f6;
    --bg-soft: #fff7fb;
    --card: #ffffff;
    --card-soft: rgba(255, 255, 255, 0.82);
    --blue: #db2777;
    --blue-dark: #be185d;
    --cyan: #f9a8d4;
    --green: #16a34a;
    --gold: #c0840b;
    --text: #24111d;
    --ink: #24111d;
    --muted: #8a5a70;
    --muted-light: #b47b94;
    --surface: #ffffff;
    --line: rgba(190, 24, 93, 0.14);
    --border: rgba(190, 24, 93, 0.14);
    --border-strong: rgba(219, 39, 119, 0.22);
    --shadow: 0 20px 50px rgba(190, 24, 93, 0.12);
    --shadow-soft: 0 12px 28px rgba(190, 24, 93, 0.09);
    --hubs-theme-panel: #ffffff;
    --hubs-theme-panel-soft: #fff7fb;
    --hubs-theme-field: #fffafd;
    --hubs-theme-field-text: #24111d;
    --hubs-theme-hero: linear-gradient(135deg, #ffffff, #fff1f6 62%, #ffe4ef);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(249, 168, 212, 0.34), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(219, 39, 119, 0.12), transparent 28%),
        linear-gradient(135deg, #fff1f6 0%, #fff7fb 100%);
}

html .dash-sheet-list button {
    position: relative !important;
    overflow: hidden !important;
    align-items: flex-start !important;
    text-align: left !important;
}

html .dash-sheet-list button.is-selected {
    border-color: color-mix(in srgb, var(--blue) 58%, var(--border)) !important;
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--blue) 10%, var(--hubs-theme-panel, var(--card))),
            var(--hubs-theme-field, var(--card))) !important;
    box-shadow:
        0 14px 34px rgba(1, 69, 242, .12),
        inset 0 0 0 1px color-mix(in srgb, var(--blue) 18%, transparent) !important;
}

html .dash-sheet-preview-hint {
    display: block !important;
    width: 100% !important;
    margin-top: 6px !important;
    color: var(--muted) !important;
    font-size: .54rem !important;
    font-weight: 750 !important;
    letter-spacing: .03em !important;
}

html .dash-sheet-list button.is-selected .dash-sheet-preview-hint {
    display: none !important;
}

html .dash-sheet-preview-slot {
    display: block !important;
    width: 100% !important;
    margin-top: 8px !important;
}

html .dash-sheet-generated-preview {
    display: grid !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 8px !important;
    border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--border)) !important;
    border-radius: 11px !important;
    background:
        radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--blue) 15%, transparent), transparent 46%),
        color-mix(in srgb, var(--hubs-theme-field, var(--card)) 86%, var(--blue) 5%) !important;
}

html .dash-sheet-generated-preview > span {
    display: block !important;
    overflow: hidden !important;
    color: var(--text) !important;
    font-size: .64rem !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html .dash-sheet-generated-preview em {
    color: var(--muted) !important;
    font-size: .56rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
}

html .dash-sheet-generated-preview .widget-chart,
html .dash-sheet-generated-preview .widget-bars {
    height: 46px !important;
    margin-top: 0 !important;
    padding-right: 0 !important;
}

html .dash-sheet-generated-preview .widget-pie {
    width: 56px !important;
    height: 56px !important;
}

@media (max-width: 720px) {
    html .dash-sheet-generated-preview {
        padding: 9px !important;
    }

    html .dash-sheet-generated-preview .widget-chart,
    html .dash-sheet-generated-preview .widget-bars {
        height: 54px !important;
    }
}

html[data-hubs-theme="golden-hour"] {
    color-scheme: light;
    --bg: #fff8e6;
    --bg-soft: #fffdf5;
    --card: #ffffff;
    --card-soft: rgba(255, 255, 255, 0.84);
    --blue: #d99a08;
    --blue-dark: #a76c00;
    --cyan: #ffe08a;
    --green: #15803d;
    --gold: #d99a08;
    --text: #271a06;
    --ink: #271a06;
    --muted: #84622c;
    --muted-light: #b08a45;
    --surface: #ffffff;
    --line: rgba(217, 154, 8, 0.16);
    --border: rgba(160, 105, 0, 0.14);
    --border-strong: rgba(217, 154, 8, 0.28);
    --shadow: 0 22px 54px rgba(160, 105, 0, 0.13);
    --shadow-soft: 0 12px 30px rgba(160, 105, 0, 0.09);
    --hubs-theme-panel: #ffffff;
    --hubs-theme-panel-soft: #fff8e8;
    --hubs-theme-field: #fffbf1;
    --hubs-theme-field-text: #271a06;
    --hubs-theme-hero: linear-gradient(135deg, #ffffff, #fff7df 58%, #ffe7a8);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(255, 224, 138, 0.42), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(217, 154, 8, 0.13), transparent 28%),
        linear-gradient(135deg, #fff8e6 0%, #fffdf5 100%);
}

html[data-hubs-theme="black-sakura"] {
    color-scheme: dark;
    --bg: #120914;
    --bg-soft: #1d101f;
    --card: #211423;
    --card-soft: rgba(33, 20, 35, 0.84);
    --blue: #f472b6;
    --blue-dark: #db2777;
    --cyan: #f9a8d4;
    --green: #86efac;
    --gold: #f8c45c;
    --text: #fff0f7;
    --ink: #fff0f7;
    --muted: #d4a6ba;
    --muted-light: #b8839b;
    --surface: #211423;
    --line: rgba(244, 114, 182, 0.18);
    --border: rgba(244, 114, 182, 0.18);
    --border-strong: rgba(249, 168, 212, 0.26);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.28);
    --hubs-theme-panel: #211423;
    --hubs-theme-panel-soft: #180d1a;
    --hubs-theme-field: #170b19;
    --hubs-theme-field-text: #fff0f7;
    --hubs-theme-hero: linear-gradient(135deg, #251327, #120914 56%, #3b1230);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(244, 114, 182, 0.16), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(219, 39, 119, 0.18), transparent 28%),
        linear-gradient(135deg, #120914 0%, #1d101f 100%);
}

html[data-hubs-theme="golden-wind"] {
    color-scheme: dark;
    --bg: #100c05;
    --bg-soft: #1b1408;
    --card: #211808;
    --card-soft: rgba(33, 24, 8, 0.84);
    --blue: #f5b82e;
    --blue-dark: #d99a08;
    --cyan: #ffe08a;
    --green: #bef264;
    --gold: #f8c45c;
    --text: #fff7df;
    --ink: #fff7df;
    --muted: #d4bb7a;
    --muted-light: #a88b48;
    --surface: #211808;
    --line: rgba(245, 184, 46, 0.18);
    --border: rgba(245, 184, 46, 0.18);
    --border-strong: rgba(255, 224, 138, 0.28);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.40);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.30);
    --hubs-theme-panel: #211808;
    --hubs-theme-panel-soft: #171005;
    --hubs-theme-field: #160f05;
    --hubs-theme-field-text: #fff7df;
    --hubs-theme-hero: linear-gradient(135deg, #261b08, #100c05 56%, #4a3107);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(245, 184, 46, 0.18), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(255, 224, 138, 0.14), transparent 28%),
        linear-gradient(135deg, #100c05 0%, #1b1408 100%);
}

html[data-hubs-theme="solar-glass"] {
    color-scheme: light;
    --bg: #fffbea;
    --bg-soft: #ffffff;
    --card: #fffef8;
    --card-soft: rgba(255, 254, 248, 0.84);
    --blue: #eab308;
    --blue-dark: #a16207;
    --cyan: #fde68a;
    --green: #16a34a;
    --gold: #f59e0b;
    --text: #241a06;
    --ink: #241a06;
    --muted: #7c5d18;
    --muted-light: #a9852a;
    --surface: #fffef8;
    --line: rgba(234, 179, 8, 0.16);
    --border: rgba(161, 98, 7, 0.14);
    --border-strong: rgba(234, 179, 8, 0.28);
    --shadow: 0 22px 54px rgba(161, 98, 7, 0.12);
    --shadow-soft: 0 12px 30px rgba(161, 98, 7, 0.08);
    --hubs-theme-panel: #fffef8;
    --hubs-theme-panel-soft: #fff7d6;
    --hubs-theme-field: #fffbed;
    --hubs-theme-field-text: #241a06;
    --hubs-theme-hero: linear-gradient(135deg, #ffffff, #fff7d6 58%, #fde68a);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(253, 230, 138, 0.42), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(234, 179, 8, 0.14), transparent 28%),
        linear-gradient(135deg, #fffbea, #ffffff);
}

html[data-hubs-theme="graphite-gold"] {
    color-scheme: dark;
    --bg: #0d0d0b;
    --bg-soft: #17140d;
    --card: #1e1b13;
    --card-soft: rgba(30, 27, 19, 0.84);
    --blue: #f6c453;
    --blue-dark: #d29a20;
    --cyan: #ffe7a3;
    --green: #a3e635;
    --gold: #f6c453;
    --text: #fff8e8;
    --ink: #fff8e8;
    --muted: #cbb887;
    --muted-light: #a79466;
    --surface: #1e1b13;
    --line: rgba(246, 196, 83, 0.18);
    --border: rgba(246, 196, 83, 0.17);
    --border-strong: rgba(255, 231, 163, 0.28);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.32);
    --hubs-theme-panel: #1e1b13;
    --hubs-theme-panel-soft: #13110c;
    --hubs-theme-field: #141109;
    --hubs-theme-field-text: #fff8e8;
    --hubs-theme-hero: linear-gradient(135deg, #272113, #0d0d0b 56%, #3b2b09);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(246, 196, 83, 0.16), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(255, 231, 163, 0.12), transparent 28%),
        linear-gradient(135deg, #0d0d0b, #17140d);
}

html[data-hubs-theme="midas-iron"] {
    color-scheme: dark;
    --bg: #11110f;
    --bg-soft: #1c1a15;
    --card: #28251d;
    --card-soft: rgba(40, 37, 29, 0.86);
    --blue: #ffcc33;
    --blue-dark: #c98905;
    --cyan: #ffe58a;
    --green: #a3e635;
    --gold: #ffcc33;
    --text: #fff8e8;
    --ink: #fff8e8;
    --muted: #c9bfa6;
    --muted-light: #978b72;
    --surface: #28251d;
    --line: rgba(255, 204, 51, 0.18);
    --border: rgba(255, 204, 51, 0.16);
    --border-strong: rgba(255, 204, 51, 0.34);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.44);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.32);
    --hubs-theme-panel: #28251d;
    --hubs-theme-panel-soft: #16140f;
    --hubs-theme-field: #191710;
    --hubs-theme-field-text: #fff8e8;
    --hubs-theme-hero: linear-gradient(135deg, #332f23, #11110f 56%, #5a3b05);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(255, 204, 51, 0.16), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(130, 93, 20, 0.24), transparent 28%),
        linear-gradient(135deg, #11110f, #1c1a15);
}

html[data-hubs-theme="ivory-capital"] {
    color-scheme: light;
    --bg: #fbf7ed;
    --bg-soft: #fffdfa;
    --card: #ffffff;
    --card-soft: rgba(255, 255, 255, 0.86);
    --blue: #b7791f;
    --blue-dark: #8a4f0d;
    --cyan: #f6d365;
    --green: #2f855a;
    --gold: #c99a2e;
    --text: #1f2933;
    --ink: #1f2933;
    --muted: #776850;
    --muted-light: #a08e70;
    --surface: #fffdfa;
    --line: rgba(183, 121, 31, 0.14);
    --border: rgba(183, 121, 31, 0.14);
    --border-strong: rgba(201, 154, 46, 0.26);
    --shadow: 0 20px 48px rgba(100, 73, 31, 0.11);
    --shadow-soft: 0 12px 28px rgba(100, 73, 31, 0.08);
    --hubs-theme-panel: #ffffff;
    --hubs-theme-panel-soft: #f7efe0;
    --hubs-theme-field: #fffaf0;
    --hubs-theme-field-text: #1f2933;
    --hubs-theme-hero: linear-gradient(135deg, #ffffff, #fbf7ed 58%, #f3dfb4);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(246, 211, 101, 0.28), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(183, 121, 31, 0.10), transparent 28%),
        linear-gradient(135deg, #fbf7ed, #fffdfa);
}

html[data-hubs-theme="aurora-core"] {
    color-scheme: dark;
    --bg: #031712;
    --bg-soft: #07251d;
    --card: #0b3027;
    --card-soft: rgba(11, 48, 39, 0.84);
    --blue: #34d399;
    --blue-dark: #059669;
    --cyan: #4debff;
    --green: #22c55e;
    --gold: #f8c45c;
    --text: #ecfdf5;
    --ink: #ecfdf5;
    --muted: #99f6d4;
    --muted-light: #6ee7b7;
    --surface: #0b3027;
    --line: rgba(52, 211, 153, 0.18);
    --border: rgba(52, 211, 153, 0.18);
    --border-strong: rgba(77, 235, 255, 0.26);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.28);
    --hubs-theme-panel: #0b3027;
    --hubs-theme-panel-soft: #061d17;
    --hubs-theme-field: #062019;
    --hubs-theme-field-text: #ecfdf5;
    --hubs-theme-hero: linear-gradient(135deg, #0d3d30, #031712 56%, #0b4550);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(52, 211, 153, 0.16), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(77, 235, 255, 0.16), transparent 28%),
        linear-gradient(135deg, #031712, #07251d);
}

html[data-hubs-theme="obsidian-mint"] {
    color-scheme: dark;
    --bg: #050f0d;
    --bg-soft: #0b1f1a;
    --card: #102a24;
    --card-soft: rgba(16, 42, 36, 0.86);
    --blue: #6ee7b7;
    --blue-dark: #10b981;
    --cyan: #a7f3d0;
    --green: #34d399;
    --gold: #facc15;
    --text: #effff9;
    --ink: #effff9;
    --muted: #98d8c1;
    --muted-light: #6eb79f;
    --surface: #102a24;
    --line: rgba(110, 231, 183, 0.16);
    --border: rgba(110, 231, 183, 0.16);
    --border-strong: rgba(167, 243, 208, 0.24);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.30);
    --hubs-theme-panel: #102a24;
    --hubs-theme-panel-soft: #091915;
    --hubs-theme-field: #0a1c17;
    --hubs-theme-field-text: #effff9;
    --hubs-theme-hero: linear-gradient(135deg, #12352c, #050f0d 58%, #0b3b2d);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(110, 231, 183, 0.14), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(16, 185, 129, 0.14), transparent 28%),
        linear-gradient(135deg, #050f0d, #0b1f1a);
}

html[data-hubs-theme="emerald-boardroom"] {
    color-scheme: light;
    --bg: #ecfdf5;
    --bg-soft: #f8fffb;
    --card: #ffffff;
    --card-soft: rgba(255, 255, 255, 0.86);
    --blue: #059669;
    --blue-dark: #047857;
    --cyan: #6ee7b7;
    --green: #10b981;
    --gold: #d99a08;
    --text: #08251d;
    --ink: #08251d;
    --muted: #4d7467;
    --muted-light: #71998a;
    --surface: #ffffff;
    --line: rgba(5, 150, 105, 0.14);
    --border: rgba(5, 150, 105, 0.14);
    --border-strong: rgba(16, 185, 129, 0.24);
    --shadow: 0 20px 48px rgba(5, 150, 105, 0.11);
    --shadow-soft: 0 12px 28px rgba(5, 150, 105, 0.08);
    --hubs-theme-panel: #ffffff;
    --hubs-theme-panel-soft: #e7fbf2;
    --hubs-theme-field: #f5fffa;
    --hubs-theme-field-text: #08251d;
    --hubs-theme-hero: linear-gradient(135deg, #ffffff, #ecfdf5 58%, #d1fae5);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(110, 231, 183, 0.30), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(5, 150, 105, 0.10), transparent 28%),
        linear-gradient(135deg, #ecfdf5, #f8fffb);
}

html[data-hubs-theme="lime-signal"] {
    color-scheme: dark;
    --bg: #091005;
    --bg-soft: #111d08;
    --card: #17260c;
    --card-soft: rgba(23, 38, 12, 0.86);
    --blue: #bef264;
    --blue-dark: #84cc16;
    --cyan: #d9f99d;
    --green: #a3e635;
    --gold: #fde047;
    --text: #f7ffe8;
    --ink: #f7ffe8;
    --muted: #bddb8a;
    --muted-light: #8fb15b;
    --surface: #17260c;
    --line: rgba(190, 242, 100, 0.16);
    --border: rgba(190, 242, 100, 0.16);
    --border-strong: rgba(217, 249, 157, 0.26);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.40);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.30);
    --hubs-theme-panel: #17260c;
    --hubs-theme-panel-soft: #0d1606;
    --hubs-theme-field: #0e1807;
    --hubs-theme-field-text: #f7ffe8;
    --hubs-theme-hero: linear-gradient(135deg, #21330f, #091005 58%, #2f480e);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(190, 242, 100, 0.14), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(132, 204, 22, 0.14), transparent 28%),
        linear-gradient(135deg, #091005, #111d08);
}

html[data-hubs-theme="black-emerald"] {
    color-scheme: dark;
    --bg: #040c09;
    --bg-soft: #071611;
    --card: #0b2119;
    --card-soft: rgba(11, 33, 25, 0.86);
    --blue: #10b981;
    --blue-dark: #047857;
    --cyan: #6ee7b7;
    --green: #22c55e;
    --gold: #f8c45c;
    --text: #ecfdf5;
    --ink: #ecfdf5;
    --muted: #93cbb8;
    --muted-light: #6ea995;
    --surface: #0b2119;
    --line: rgba(16, 185, 129, 0.17);
    --border: rgba(16, 185, 129, 0.17);
    --border-strong: rgba(110, 231, 183, 0.24);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.44);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.32);
    --hubs-theme-panel: #0b2119;
    --hubs-theme-panel-soft: #06130f;
    --hubs-theme-field: #071510;
    --hubs-theme-field-text: #ecfdf5;
    --hubs-theme-hero: linear-gradient(135deg, #103226, #040c09 58%, #123f2b);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(16, 185, 129, 0.16), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(110, 231, 183, 0.12), transparent 28%),
        linear-gradient(135deg, #040c09, #071611);
}

html[data-hubs-theme="emerald-iron"] {
    color-scheme: dark;
    --bg: #0f1210;
    --bg-soft: #171d19;
    --card: #202823;
    --card-soft: rgba(32, 40, 35, 0.86);
    --blue: #00e676;
    --blue-dark: #00a85a;
    --cyan: #66ffbf;
    --green: #00e676;
    --gold: #f8c45c;
    --text: #effff6;
    --ink: #effff6;
    --muted: #aec4b7;
    --muted-light: #82998b;
    --surface: #202823;
    --line: rgba(0, 230, 118, 0.18);
    --border: rgba(0, 230, 118, 0.15);
    --border-strong: rgba(0, 230, 118, 0.34);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.44);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.32);
    --hubs-theme-panel: #202823;
    --hubs-theme-panel-soft: #121713;
    --hubs-theme-field: #151a16;
    --hubs-theme-field-text: #effff6;
    --hubs-theme-hero: linear-gradient(135deg, #29332d, #0f1210 56%, #064327);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(0, 230, 118, 0.15), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(0, 110, 64, 0.22), transparent 28%),
        linear-gradient(135deg, #0f1210, #171d19);
}

html[data-hubs-theme="arctic-pulse"] {
    color-scheme: light;
    --bg: #eff6ff;
    --bg-soft: #ffffff;
    --card: #ffffff;
    --card-soft: rgba(255, 255, 255, 0.86);
    --blue: #0284c7;
    --blue-dark: #0369a1;
    --cyan: #67e8f9;
    --green: #10b981;
    --gold: #f59e0b;
    --text: #082f49;
    --ink: #082f49;
    --muted: #547086;
    --muted-light: #7e9ab0;
    --surface: #ffffff;
    --line: rgba(2, 132, 199, 0.14);
    --border: rgba(2, 132, 199, 0.14);
    --border-strong: rgba(103, 232, 249, 0.30);
    --shadow: 0 20px 48px rgba(2, 132, 199, 0.11);
    --shadow-soft: 0 12px 28px rgba(2, 132, 199, 0.08);
    --hubs-theme-panel: #ffffff;
    --hubs-theme-panel-soft: #e0f2fe;
    --hubs-theme-field: #f8fcff;
    --hubs-theme-field-text: #082f49;
    --hubs-theme-hero: linear-gradient(135deg, #ffffff, #eff6ff 58%, #cffafe);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(103, 232, 249, 0.32), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(2, 132, 199, 0.12), transparent 28%),
        linear-gradient(135deg, #eff6ff, #ffffff);
}

html[data-hubs-theme="neon-slate"] {
    color-scheme: dark;
    --bg: #070b13;
    --bg-soft: #101827;
    --card: #151f31;
    --card-soft: rgba(21, 31, 49, 0.86);
    --blue: #38bdf8;
    --blue-dark: #0284c7;
    --cyan: #22d3ee;
    --green: #34d399;
    --gold: #facc15;
    --text: #e8f4ff;
    --ink: #e8f4ff;
    --muted: #9fb4cd;
    --muted-light: #7890ad;
    --surface: #151f31;
    --line: rgba(56, 189, 248, 0.17);
    --border: rgba(56, 189, 248, 0.17);
    --border-strong: rgba(34, 211, 238, 0.25);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.30);
    --hubs-theme-panel: #151f31;
    --hubs-theme-panel-soft: #0c1422;
    --hubs-theme-field: #0d1625;
    --hubs-theme-field-text: #e8f4ff;
    --hubs-theme-hero: linear-gradient(135deg, #18243a, #070b13 58%, #06354a);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.15), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(34, 211, 238, 0.13), transparent 28%),
        linear-gradient(135deg, #070b13, #101827);
}

html[data-hubs-theme="cobalt-iron"] {
    color-scheme: dark;
    --bg: #101217;
    --bg-soft: #181d25;
    --card: #222936;
    --card-soft: rgba(34, 41, 54, 0.86);
    --blue: #2563ff;
    --blue-dark: #123dcc;
    --cyan: #4debff;
    --green: #34d399;
    --gold: #f8c45c;
    --text: #f0f6ff;
    --ink: #f0f6ff;
    --muted: #aeb8c9;
    --muted-light: #828fa3;
    --surface: #222936;
    --line: rgba(37, 99, 255, 0.18);
    --border: rgba(77, 235, 255, 0.14);
    --border-strong: rgba(37, 99, 255, 0.36);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.44);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.32);
    --hubs-theme-panel: #222936;
    --hubs-theme-panel-soft: #121720;
    --hubs-theme-field: #151a23;
    --hubs-theme-field-text: #f0f6ff;
    --hubs-theme-hero: linear-gradient(135deg, #2b3445, #101217 56%, #092a76);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(37, 99, 255, 0.17), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(77, 235, 255, 0.12), transparent 28%),
        linear-gradient(135deg, #101217, #181d25);
}

html[data-hubs-theme="ocean-grid"] {
    color-scheme: dark;
    --bg: #031525;
    --bg-soft: #082033;
    --card: #0d2b43;
    --card-soft: rgba(13, 43, 67, 0.86);
    --blue: #0ea5e9;
    --blue-dark: #0369a1;
    --cyan: #4debff;
    --green: #22c55e;
    --gold: #f8c45c;
    --text: #eefaff;
    --ink: #eefaff;
    --muted: #9bd2e7;
    --muted-light: #72acc5;
    --surface: #0d2b43;
    --line: rgba(14, 165, 233, 0.17);
    --border: rgba(14, 165, 233, 0.17);
    --border-strong: rgba(77, 235, 255, 0.25);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.40);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.30);
    --hubs-theme-panel: #0d2b43;
    --hubs-theme-panel-soft: #061c2e;
    --hubs-theme-field: #071f33;
    --hubs-theme-field-text: #eefaff;
    --hubs-theme-hero: linear-gradient(135deg, #103755, #031525 58%, #064c62);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(77, 235, 255, 0.14), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(14, 165, 233, 0.14), transparent 28%),
        linear-gradient(135deg, #031525, #082033);
}

html[data-hubs-theme="moonlight-steel"] {
    color-scheme: dark;
    --bg: #111827;
    --bg-soft: #1f2937;
    --card: #273244;
    --card-soft: rgba(39, 50, 68, 0.86);
    --blue: #93c5fd;
    --blue-dark: #60a5fa;
    --cyan: #c7d2fe;
    --green: #86efac;
    --gold: #f8c45c;
    --text: #f8fafc;
    --ink: #f8fafc;
    --muted: #cbd5e1;
    --muted-light: #94a3b8;
    --surface: #273244;
    --line: rgba(147, 197, 253, 0.16);
    --border: rgba(147, 197, 253, 0.16);
    --border-strong: rgba(199, 210, 254, 0.24);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.40);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.30);
    --hubs-theme-panel: #273244;
    --hubs-theme-panel-soft: #172033;
    --hubs-theme-field: #182235;
    --hubs-theme-field-text: #f8fafc;
    --hubs-theme-hero: linear-gradient(135deg, #303d52, #111827 58%, #1e3a5f);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(147, 197, 253, 0.14), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(199, 210, 254, 0.12), transparent 28%),
        linear-gradient(135deg, #111827, #1f2937);
}

html[data-hubs-theme="deep-space"] {
    color-scheme: dark;
    --bg: #050816;
    --bg-soft: #0d1328;
    --card: #121a35;
    --card-soft: rgba(18, 26, 53, 0.86);
    --blue: #6366f1;
    --blue-dark: #4338ca;
    --cyan: #38bdf8;
    --green: #34d399;
    --gold: #f8c45c;
    --text: #eef2ff;
    --ink: #eef2ff;
    --muted: #aeb8df;
    --muted-light: #7f8bb8;
    --surface: #121a35;
    --line: rgba(99, 102, 241, 0.18);
    --border: rgba(99, 102, 241, 0.18);
    --border-strong: rgba(56, 189, 248, 0.24);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.44);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.32);
    --hubs-theme-panel: #121a35;
    --hubs-theme-panel-soft: #0a1024;
    --hubs-theme-field: #0b1126;
    --hubs-theme-field-text: #eef2ff;
    --hubs-theme-hero: linear-gradient(135deg, #1c2450, #050816 58%, #162252);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(99, 102, 241, 0.16), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(56, 189, 248, 0.12), transparent 28%),
        linear-gradient(135deg, #050816, #0d1328);
}

html[data-hubs-theme="quantum-cyan"] {
    color-scheme: dark;
    --bg: #031316;
    --bg-soft: #06252b;
    --card: #0a323a;
    --card-soft: rgba(10, 50, 58, 0.86);
    --blue: #22d3ee;
    --blue-dark: #0891b2;
    --cyan: #67e8f9;
    --green: #34d399;
    --gold: #f8c45c;
    --text: #ecfeff;
    --ink: #ecfeff;
    --muted: #a5f3fc;
    --muted-light: #67c8d8;
    --surface: #0a323a;
    --line: rgba(34, 211, 238, 0.18);
    --border: rgba(34, 211, 238, 0.18);
    --border-strong: rgba(103, 232, 249, 0.28);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.40);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.30);
    --hubs-theme-panel: #0a323a;
    --hubs-theme-panel-soft: #061c21;
    --hubs-theme-field: #062026;
    --hubs-theme-field-text: #ecfeff;
    --hubs-theme-hero: linear-gradient(135deg, #0d414a, #031316 58%, #075563);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.17), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(103, 232, 249, 0.13), transparent 28%),
        linear-gradient(135deg, #031316, #06252b);
}

html[data-hubs-theme="frosted-navy"] {
    color-scheme: dark;
    --bg: #08111f;
    --bg-soft: #101b2c;
    --card: #17243a;
    --card-soft: rgba(23, 36, 58, 0.86);
    --blue: #60a5fa;
    --blue-dark: #2563eb;
    --cyan: #bae6fd;
    --green: #86efac;
    --gold: #f8c45c;
    --text: #eff6ff;
    --ink: #eff6ff;
    --muted: #b5c9df;
    --muted-light: #8aa2bc;
    --surface: #17243a;
    --line: rgba(96, 165, 250, 0.17);
    --border: rgba(96, 165, 250, 0.17);
    --border-strong: rgba(186, 230, 253, 0.24);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.40);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.30);
    --hubs-theme-panel: #17243a;
    --hubs-theme-panel-soft: #0c1627;
    --hubs-theme-field: #0d182a;
    --hubs-theme-field-text: #eff6ff;
    --hubs-theme-hero: linear-gradient(135deg, #20314c, #08111f 58%, #12365c);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(96, 165, 250, 0.15), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(186, 230, 253, 0.10), transparent 28%),
        linear-gradient(135deg, #08111f, #101b2c);
}

html[data-hubs-theme="blue-monarch"] {
    color-scheme: light;
    --bg: #eef4ff;
    --bg-soft: #ffffff;
    --card: #ffffff;
    --card-soft: rgba(255, 255, 255, 0.86);
    --blue: #1d4ed8;
    --blue-dark: #1e40af;
    --cyan: #60a5fa;
    --green: #10b981;
    --gold: #f59e0b;
    --text: #101b3f;
    --ink: #101b3f;
    --muted: #596a91;
    --muted-light: #8390b2;
    --surface: #ffffff;
    --line: rgba(29, 78, 216, 0.14);
    --border: rgba(29, 78, 216, 0.14);
    --border-strong: rgba(96, 165, 250, 0.28);
    --shadow: 0 20px 48px rgba(29, 78, 216, 0.11);
    --shadow-soft: 0 12px 28px rgba(29, 78, 216, 0.08);
    --hubs-theme-panel: #ffffff;
    --hubs-theme-panel-soft: #e7efff;
    --hubs-theme-field: #f7faff;
    --hubs-theme-field-text: #101b3f;
    --hubs-theme-hero: linear-gradient(135deg, #ffffff, #eef4ff 58%, #dbeafe);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(96, 165, 250, 0.28), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(29, 78, 216, 0.10), transparent 28%),
        linear-gradient(135deg, #eef4ff, #ffffff);
}

html[data-hubs-theme="cloud-terminal"] {
    color-scheme: light;
    --bg: #f3f7fb;
    --bg-soft: #ffffff;
    --card: #ffffff;
    --card-soft: rgba(255, 255, 255, 0.86);
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --cyan: #38bdf8;
    --green: #10b981;
    --gold: #f59e0b;
    --text: #111827;
    --ink: #111827;
    --muted: #64748b;
    --muted-light: #94a3b8;
    --surface: #ffffff;
    --line: rgba(37, 99, 235, 0.12);
    --border: rgba(37, 99, 235, 0.12);
    --border-strong: rgba(56, 189, 248, 0.26);
    --shadow: 0 20px 48px rgba(15, 23, 42, 0.10);
    --shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.07);
    --hubs-theme-panel: #ffffff;
    --hubs-theme-panel-soft: #eef4fb;
    --hubs-theme-field: #f8fbff;
    --hubs-theme-field-text: #111827;
    --hubs-theme-hero: linear-gradient(135deg, #ffffff, #f3f7fb 58%, #dbeafe);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.22), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(37, 99, 235, 0.08), transparent 28%),
        linear-gradient(135deg, #f3f7fb, #ffffff);
}

html[data-hubs-theme="polar-black"] {
    color-scheme: dark;
    --bg: #030712;
    --bg-soft: #0b1120;
    --card: #111827;
    --card-soft: rgba(17, 24, 39, 0.86);
    --blue: #e0f2fe;
    --blue-dark: #93c5fd;
    --cyan: #67e8f9;
    --green: #86efac;
    --gold: #f8c45c;
    --text: #f8fafc;
    --ink: #f8fafc;
    --muted: #cbd5e1;
    --muted-light: #94a3b8;
    --surface: #111827;
    --line: rgba(224, 242, 254, 0.14);
    --border: rgba(224, 242, 254, 0.14);
    --border-strong: rgba(103, 232, 249, 0.24);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.46);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.34);
    --hubs-theme-panel: #111827;
    --hubs-theme-panel-soft: #080d18;
    --hubs-theme-field: #090f1c;
    --hubs-theme-field-text: #f8fafc;
    --hubs-theme-hero: linear-gradient(135deg, #172033, #030712 58%, #0f2740);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(224, 242, 254, 0.10), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(103, 232, 249, 0.10), transparent 28%),
        linear-gradient(135deg, #030712, #0b1120);
}

html[data-hubs-theme="white-orbit"] {
    color-scheme: light;
    --bg: #f8fafc;
    --bg-soft: #ffffff;
    --card: #ffffff;
    --card-soft: rgba(255, 255, 255, 0.88);
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --cyan: #a5f3fc;
    --green: #10b981;
    --gold: #f59e0b;
    --text: #0f172a;
    --ink: #0f172a;
    --muted: #64748b;
    --muted-light: #94a3b8;
    --surface: #ffffff;
    --line: rgba(37, 99, 235, 0.11);
    --border: rgba(37, 99, 235, 0.11);
    --border-strong: rgba(37, 99, 235, 0.24);
    --shadow: 0 20px 48px rgba(15, 23, 42, 0.09);
    --shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.06);
    --hubs-theme-panel: #ffffff;
    --hubs-theme-panel-soft: #f1f5f9;
    --hubs-theme-field: #fbfdff;
    --hubs-theme-field-text: #0f172a;
    --hubs-theme-hero: linear-gradient(135deg, #ffffff, #f8fafc 58%, #e0f2fe);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(165, 243, 252, 0.25), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(37, 99, 235, 0.08), transparent 28%),
        linear-gradient(135deg, #f8fafc, #ffffff);
}

html[data-hubs-theme="violet-circuit"] {
    color-scheme: dark;
    --bg: #10091f;
    --bg-soft: #1b1230;
    --card: #261942;
    --card-soft: rgba(38, 25, 66, 0.86);
    --blue: #a78bfa;
    --blue-dark: #7c3aed;
    --cyan: #c084fc;
    --green: #86efac;
    --gold: #f8c45c;
    --text: #f5f3ff;
    --ink: #f5f3ff;
    --muted: #cbb9e8;
    --muted-light: #a18ac6;
    --surface: #261942;
    --line: rgba(167, 139, 250, 0.18);
    --border: rgba(167, 139, 250, 0.18);
    --border-strong: rgba(192, 132, 252, 0.25);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.30);
    --hubs-theme-panel: #261942;
    --hubs-theme-panel-soft: #160d29;
    --hubs-theme-field: #170f2c;
    --hubs-theme-field-text: #f5f3ff;
    --hubs-theme-hero: linear-gradient(135deg, #302055, #10091f 58%, #31156b);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(167, 139, 250, 0.16), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(192, 132, 252, 0.12), transparent 28%),
        linear-gradient(135deg, #10091f, #1b1230);
}

html[data-hubs-theme="cyber-lavender"] {
    color-scheme: light;
    --bg: #f5f3ff;
    --bg-soft: #ffffff;
    --card: #ffffff;
    --card-soft: rgba(255, 255, 255, 0.86);
    --blue: #7c3aed;
    --blue-dark: #6d28d9;
    --cyan: #c084fc;
    --green: #10b981;
    --gold: #f59e0b;
    --text: #20113a;
    --ink: #20113a;
    --muted: #715f92;
    --muted-light: #9b86be;
    --surface: #ffffff;
    --line: rgba(124, 58, 237, 0.14);
    --border: rgba(124, 58, 237, 0.14);
    --border-strong: rgba(192, 132, 252, 0.26);
    --shadow: 0 20px 48px rgba(124, 58, 237, 0.10);
    --shadow-soft: 0 12px 28px rgba(124, 58, 237, 0.07);
    --hubs-theme-panel: #ffffff;
    --hubs-theme-panel-soft: #ede9fe;
    --hubs-theme-field: #fbfaff;
    --hubs-theme-field-text: #20113a;
    --hubs-theme-hero: linear-gradient(135deg, #ffffff, #f5f3ff 58%, #ede9fe);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(192, 132, 252, 0.30), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(124, 58, 237, 0.10), transparent 28%),
        linear-gradient(135deg, #f5f3ff, #ffffff);
}

html[data-hubs-theme="iron-violet"] {
    color-scheme: dark;
    --bg: #111116;
    --bg-soft: #1b1b24;
    --card: #272534;
    --card-soft: rgba(39, 37, 52, 0.86);
    --blue: #8b5cf6;
    --blue-dark: #6d28d9;
    --cyan: #a78bfa;
    --green: #86efac;
    --gold: #f8c45c;
    --text: #f4f2ff;
    --ink: #f4f2ff;
    --muted: #b8b0cc;
    --muted-light: #9289a8;
    --surface: #272534;
    --line: rgba(139, 92, 246, 0.18);
    --border: rgba(139, 92, 246, 0.18);
    --border-strong: rgba(167, 139, 250, 0.25);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.30);
    --hubs-theme-panel: #272534;
    --hubs-theme-panel-soft: #171720;
    --hubs-theme-field: #181823;
    --hubs-theme-field-text: #f4f2ff;
    --hubs-theme-hero: linear-gradient(135deg, #302d41, #111116 58%, #2d1950);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.15), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(167, 139, 250, 0.11), transparent 28%),
        linear-gradient(135deg, #111116, #1b1b24);
}

html[data-hubs-theme="crimson-protocol"] {
    color-scheme: dark;
    --bg: #160608;
    --bg-soft: #270b10;
    --card: #351017;
    --card-soft: rgba(53, 16, 23, 0.86);
    --blue: #fb7185;
    --blue-dark: #e11d48;
    --cyan: #fecdd3;
    --green: #86efac;
    --gold: #f8c45c;
    --text: #fff1f2;
    --ink: #fff1f2;
    --muted: #e3a5ad;
    --muted-light: #b97b83;
    --surface: #351017;
    --line: rgba(251, 113, 133, 0.18);
    --border: rgba(251, 113, 133, 0.18);
    --border-strong: rgba(254, 205, 211, 0.25);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.30);
    --hubs-theme-panel: #351017;
    --hubs-theme-panel-soft: #1f080c;
    --hubs-theme-field: #230a0e;
    --hubs-theme-field-text: #fff1f2;
    --hubs-theme-hero: linear-gradient(135deg, #43131d, #160608 58%, #5b1020);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(251, 113, 133, 0.15), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(225, 29, 72, 0.13), transparent 28%),
        linear-gradient(135deg, #160608, #270b10);
}

html[data-hubs-theme="king-crimson"] {
    color-scheme: dark;
    --bg: #111111;
    --bg-soft: #1b1718;
    --card: #262121;
    --card-soft: rgba(38, 33, 33, 0.86);
    --blue: #ff1f3d;
    --blue-dark: #b90f24;
    --cyan: #ff6b7d;
    --green: #86efac;
    --gold: #f8c45c;
    --text: #f8f3f2;
    --ink: #f8f3f2;
    --muted: #b9aaa8;
    --muted-light: #8f7f7d;
    --surface: #262121;
    --line: rgba(255, 31, 61, 0.17);
    --border: rgba(255, 88, 110, 0.16);
    --border-strong: rgba(255, 31, 61, 0.34);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.44);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.32);
    --hubs-theme-panel: #262121;
    --hubs-theme-panel-soft: #161313;
    --hubs-theme-field: #1a1717;
    --hubs-theme-field-text: #f8f3f2;
    --hubs-theme-hero: linear-gradient(135deg, #332c2c, #111111 56%, #4a1018);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(255, 31, 61, 0.15), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(120, 25, 34, 0.24), transparent 28%),
        linear-gradient(135deg, #111111, #1b1718);
}

html[data-hubs-theme="ruby-control"] {
    color-scheme: dark;
    --bg: #12070b;
    --bg-soft: #211016;
    --card: #2d141d;
    --card-soft: rgba(45, 20, 29, 0.86);
    --blue: #f43f5e;
    --blue-dark: #be123c;
    --cyan: #fda4af;
    --green: #86efac;
    --gold: #f8c45c;
    --text: #fff1f4;
    --ink: #fff1f4;
    --muted: #d8a4ae;
    --muted-light: #ad7b85;
    --surface: #2d141d;
    --line: rgba(244, 63, 94, 0.18);
    --border: rgba(244, 63, 94, 0.18);
    --border-strong: rgba(253, 164, 175, 0.25);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.30);
    --hubs-theme-panel: #2d141d;
    --hubs-theme-panel-soft: #1a0b11;
    --hubs-theme-field: #1c0c12;
    --hubs-theme-field-text: #fff1f4;
    --hubs-theme-hero: linear-gradient(135deg, #3a1824, #12070b 58%, #4a1225);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(244, 63, 94, 0.15), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(253, 164, 175, 0.10), transparent 28%),
        linear-gradient(135deg, #12070b, #211016);
}

html[data-hubs-theme="midnight-coral"] {
    color-scheme: dark;
    --bg: #0b111d;
    --bg-soft: #151b2a;
    --card: #202636;
    --card-soft: rgba(32, 38, 54, 0.86);
    --blue: #fb7185;
    --blue-dark: #f97316;
    --cyan: #fdba74;
    --green: #86efac;
    --gold: #f8c45c;
    --text: #fff7f2;
    --ink: #fff7f2;
    --muted: #d0b1a7;
    --muted-light: #a98d86;
    --surface: #202636;
    --line: rgba(251, 113, 133, 0.17);
    --border: rgba(251, 113, 133, 0.17);
    --border-strong: rgba(253, 186, 116, 0.25);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.30);
    --hubs-theme-panel: #202636;
    --hubs-theme-panel-soft: #111827;
    --hubs-theme-field: #131a29;
    --hubs-theme-field-text: #fff7f2;
    --hubs-theme-hero: linear-gradient(135deg, #2d3447, #0b111d 58%, #4b1c25);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(251, 113, 133, 0.15), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(249, 115, 22, 0.12), transparent 28%),
        linear-gradient(135deg, #0b111d, #151b2a);
}

html[data-hubs-theme="rose-quartz"] {
    color-scheme: light;
    --bg: #fff7f8;
    --bg-soft: #ffffff;
    --card: #ffffff;
    --card-soft: rgba(255, 255, 255, 0.86);
    --blue: #e11d48;
    --blue-dark: #be123c;
    --cyan: #fecdd3;
    --green: #10b981;
    --gold: #f59e0b;
    --text: #2d1118;
    --ink: #2d1118;
    --muted: #8b5a66;
    --muted-light: #b98592;
    --surface: #ffffff;
    --line: rgba(225, 29, 72, 0.13);
    --border: rgba(225, 29, 72, 0.13);
    --border-strong: rgba(251, 113, 133, 0.24);
    --shadow: 0 20px 48px rgba(225, 29, 72, 0.10);
    --shadow-soft: 0 12px 28px rgba(225, 29, 72, 0.07);
    --hubs-theme-panel: #ffffff;
    --hubs-theme-panel-soft: #fff1f2;
    --hubs-theme-field: #fffafb;
    --hubs-theme-field-text: #2d1118;
    --hubs-theme-hero: linear-gradient(135deg, #ffffff, #fff7f8 58%, #ffe4e6);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(254, 205, 211, 0.36), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(225, 29, 72, 0.10), transparent 28%),
        linear-gradient(135deg, #fff7f8, #ffffff);
}

html[data-hubs-theme="plasma-pink"] {
    color-scheme: dark;
    --bg: #120716;
    --bg-soft: #210d28;
    --card: #2e1238;
    --card-soft: rgba(46, 18, 56, 0.86);
    --blue: #ec4899;
    --blue-dark: #be185d;
    --cyan: #f0abfc;
    --green: #86efac;
    --gold: #f8c45c;
    --text: #fdf2ff;
    --ink: #fdf2ff;
    --muted: #d9a6d9;
    --muted-light: #af7caf;
    --surface: #2e1238;
    --line: rgba(236, 72, 153, 0.18);
    --border: rgba(236, 72, 153, 0.18);
    --border-strong: rgba(240, 171, 252, 0.25);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.30);
    --hubs-theme-panel: #2e1238;
    --hubs-theme-panel-soft: #190b20;
    --hubs-theme-field: #1b0c23;
    --hubs-theme-field-text: #fdf2ff;
    --hubs-theme-hero: linear-gradient(135deg, #3c1849, #120716 58%, #4a0f3d);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(236, 72, 153, 0.16), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(240, 171, 252, 0.12), transparent 28%),
        linear-gradient(135deg, #120716, #210d28);
}

html[data-hubs-theme="copper-flow"] {
    color-scheme: light;
    --bg: #fff7ed;
    --bg-soft: #ffffff;
    --card: #ffffff;
    --card-soft: rgba(255, 255, 255, 0.86);
    --blue: #c2410c;
    --blue-dark: #9a3412;
    --cyan: #fdba74;
    --green: #16a34a;
    --gold: #d97706;
    --text: #2d1608;
    --ink: #2d1608;
    --muted: #825d45;
    --muted-light: #ac836a;
    --surface: #ffffff;
    --line: rgba(194, 65, 12, 0.13);
    --border: rgba(194, 65, 12, 0.13);
    --border-strong: rgba(217, 119, 6, 0.25);
    --shadow: 0 20px 48px rgba(194, 65, 12, 0.10);
    --shadow-soft: 0 12px 28px rgba(194, 65, 12, 0.07);
    --hubs-theme-panel: #ffffff;
    --hubs-theme-panel-soft: #ffedd5;
    --hubs-theme-field: #fffaf5;
    --hubs-theme-field-text: #2d1608;
    --hubs-theme-hero: linear-gradient(135deg, #ffffff, #fff7ed 58%, #fed7aa);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(253, 186, 116, 0.34), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(194, 65, 12, 0.10), transparent 28%),
        linear-gradient(135deg, #fff7ed, #ffffff);
}

html[data-hubs-theme="copper-iron"] {
    color-scheme: dark;
    --bg: #12100e;
    --bg-soft: #1f1814;
    --card: #2b211b;
    --card-soft: rgba(43, 33, 27, 0.86);
    --blue: #ff7a1a;
    --blue-dark: #c2410c;
    --cyan: #ffb36b;
    --green: #86efac;
    --gold: #f8c45c;
    --text: #fff5ec;
    --ink: #fff5ec;
    --muted: #c8b1a0;
    --muted-light: #9a8373;
    --surface: #2b211b;
    --line: rgba(255, 122, 26, 0.18);
    --border: rgba(255, 122, 26, 0.15);
    --border-strong: rgba(255, 122, 26, 0.34);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.44);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.32);
    --hubs-theme-panel: #2b211b;
    --hubs-theme-panel-soft: #17110e;
    --hubs-theme-field: #1a130f;
    --hubs-theme-field-text: #fff5ec;
    --hubs-theme-hero: linear-gradient(135deg, #382b23, #12100e 56%, #5a2305);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(255, 122, 26, 0.16), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(120, 55, 18, 0.22), transparent 28%),
        linear-gradient(135deg, #12100e, #1f1814);
}

html[data-hubs-theme="sandstone"] {
    color-scheme: light;
    --bg: #f8f1e7;
    --bg-soft: #fffdf8;
    --card: #ffffff;
    --card-soft: rgba(255, 255, 255, 0.86);
    --blue: #7c6f55;
    --blue-dark: #57503f;
    --cyan: #d7c6a1;
    --green: #2f855a;
    --gold: #b88a3b;
    --text: #221d15;
    --ink: #221d15;
    --muted: #736a5c;
    --muted-light: #9b9181;
    --surface: #ffffff;
    --line: rgba(124, 111, 85, 0.13);
    --border: rgba(124, 111, 85, 0.13);
    --border-strong: rgba(184, 138, 59, 0.24);
    --shadow: 0 20px 48px rgba(79, 64, 38, 0.10);
    --shadow-soft: 0 12px 28px rgba(79, 64, 38, 0.07);
    --hubs-theme-panel: #ffffff;
    --hubs-theme-panel-soft: #efe4d2;
    --hubs-theme-field: #fffaf2;
    --hubs-theme-field-text: #221d15;
    --hubs-theme-hero: linear-gradient(135deg, #ffffff, #f8f1e7 58%, #e9d8b7);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(215, 198, 161, 0.32), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(124, 111, 85, 0.10), transparent 28%),
        linear-gradient(135deg, #f8f1e7, #fffdf8);
}

html[data-hubs-theme="sunset-ops"] {
    color-scheme: light;
    --bg: #fff3ed;
    --bg-soft: #ffffff;
    --card: #ffffff;
    --card-soft: rgba(255, 255, 255, 0.86);
    --blue: #f97316;
    --blue-dark: #c2410c;
    --cyan: #fb7185;
    --green: #16a34a;
    --gold: #f59e0b;
    --text: #2b1307;
    --ink: #2b1307;
    --muted: #845c48;
    --muted-light: #ad826d;
    --surface: #ffffff;
    --line: rgba(249, 115, 22, 0.14);
    --border: rgba(249, 115, 22, 0.14);
    --border-strong: rgba(251, 113, 133, 0.24);
    --shadow: 0 20px 48px rgba(249, 115, 22, 0.11);
    --shadow-soft: 0 12px 28px rgba(249, 115, 22, 0.08);
    --hubs-theme-panel: #ffffff;
    --hubs-theme-panel-soft: #ffedd5;
    --hubs-theme-field: #fff9f5;
    --hubs-theme-field-text: #2b1307;
    --hubs-theme-hero: linear-gradient(135deg, #ffffff, #fff3ed 58%, #fed7aa);
    --hubs-theme-body:
        radial-gradient(circle at top left, rgba(251, 113, 133, 0.28), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(249, 115, 22, 0.12), transparent 28%),
        linear-gradient(135deg, #fff3ed, #ffffff);
}

html[data-hubs-theme] body {
    background: var(--hubs-theme-body, 
        radial-gradient(circle at top left, rgba(77, 235, 255, 0.16), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(1, 69, 242, 0.10), transparent 28%),
        linear-gradient(135deg, var(--bg) 0%, #e8edf4 100%)
    );
    color: var(--text);
}

html[data-hubs-theme] :where(.public-header) {
    border-color: var(--border);
    background: color-mix(in srgb, var(--hubs-theme-panel, #fff) 86%, transparent);
}

html[data-hubs-theme] :where(.public-header.is-scrolled) {
    background: color-mix(in srgb, var(--hubs-theme-panel, #fff) 94%, transparent);
    box-shadow: var(--shadow-soft);
}

html[data-hubs-theme] :where(
    .hero-section,
    .about-hero,
    .light-section,
    .resources-section,
    .flow-section,
    .principles-section
) {
    background: var(--hubs-theme-body, var(--bg));
    color: var(--text);
}

html[data-hubs-theme] :where(
    .product-preview,
    .preview-main-card,
    .preview-kpis article,
    .preview-list article,
    .trust-strip,
    .trust-grid article,
    .operation-cards article,
    .resources-grid article,
    .flow-grid article,
    .narrative-grid article,
    .principles-cards article,
    .auth-card,
    .auth-panel,
    .form-card
) {
    border-color: var(--border);
    background: var(--hubs-theme-panel, var(--surface));
    color: var(--text, var(--ink));
    box-shadow: var(--shadow-soft);
}

html[data-hubs-theme] :where(
    .hero-copy h1,
    .about-hero h1,
    .public-logo,
    .public-nav a,
    .resources-grid h3,
    .operation-cards h3,
    .narrative-grid h2,
    .principles-cards h3
) {
    color: var(--text, var(--ink));
}

html[data-hubs-theme] :where(
    .hero-copy p,
    .about-hero p,
    .resources-grid p,
    .operation-cards p,
    .narrative-grid p,
    .principles-cards p,
    .trust-grid span
) {
    color: var(--muted);
}

html[data-hubs-theme] .cta-card h2 {
    color: #ffffff;
}

html[data-hubs-theme] .cta-card p {
    color: rgba(226, 232, 240, 0.78);
}

html[data-hubs-theme] :where(
    .main-content,
    .settings-content,
    .home-content,
    .organization-content
) {
    color: var(--text);
}

html[data-hubs-theme] :where(
    .sidebar,
    .topbar,
    .profile-chip,
    .card,
    .kpi-card,
    .large-card,
    .organization-card,
    .organizations-list-item,
    .organization-modal-card,
    .organization-choice-card,
    .organization-project-card,
    .hub-card-link,
    .task-card,
    .project-card,
    .metric-card,
    .document-card,
    .settings-card,
    .settings-modal,
    .finance-panel,
    .finance-file-card,
    .finance-modal,
    .members-card,
    .members-modal,
    .teams-card,
    .projects-panel,
    .projects-modal,
    .calendar-panel,
    .calendar-modal,
    .goal-panel,
    .goal-card,
    .goal-modal,
    .process-panel,
    .process-card,
    .process-modal,
    .dash-panel,
    .dash-widget,
    .dash-modal,
    .documents-panel,
    .documents-modal,
    .document-reader,
    .audit-panel,
    .audit-modal,
    .report-panel,
    .report-card
) {
    border-color: var(--border);
    background: var(--hubs-theme-panel, var(--card));
    color: var(--text);
    box-shadow: var(--shadow-soft);
}

html[data-hubs-theme] :where(
    .settings-hero,
    .finance-hero,
    .organization-hero,
    .dashboard-hero,
    .projects-hero,
    .tasks-hero,
    .metrics-hero,
    .documents-hero,
    .reports-hero,
    .audit-hero
) {
    border-color: var(--border);
    background: var(--hubs-theme-hero, linear-gradient(135deg, #fff, #f1f7ff));
    color: var(--text);
    box-shadow: var(--shadow-soft);
}

html[data-hubs-theme] :where(
    h1,
    h2,
    h3,
    .topbar-left h2,
    .card-header h3,
    .settings-card h2,
    .settings-lines strong,
    .settings-status-list strong,
    .finance-file-main h3,
    .organization-card strong,
    .profile-chip strong
) {
    color: var(--text);
}

html[data-hubs-theme] :where(
    p,
    small,
    .settings-note,
    .settings-lines span,
    .settings-status-list small,
    .finance-panel p,
    .finance-file-main p,
    .topbar-left span,
    .profile-chip span,
    .card-header span
) {
    color: var(--muted);
}

html[data-hubs-theme] :where(
    input,
    select,
    textarea,
    .settings-lines div,
    .settings-status-list div,
    .finance-filters input,
    .finance-filters select,
    .finance-form input,
    .finance-form select,
    .finance-form textarea,
    .settings-form input,
    .settings-form select,
    .settings-form textarea
) {
    border-color: var(--border);
    background: var(--hubs-theme-field, #ffffff);
    color: var(--hubs-theme-field-text, var(--text));
}

html[data-hubs-theme] :where(input, select, textarea)::placeholder {
    color: var(--muted-light);
}

html[data-hubs-theme] :where(
    .settings-card-icon,
    .card-badge,
    .nav-item.active,
    .finance-file-icon
) {
    background: color-mix(in srgb, var(--blue) 12%, transparent);
    color: var(--blue);
}

html[data-hubs-theme] :where(
    .primary-button,
    .settings-primary,
    .settings-link-button.primary,
    .finance-primary,
    .organization-action-button.primary,
    .ghost-button.primary,
    .sidebar-central-button
) {
    border-color: var(--blue);
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    color: #ffffff;
}

html[data-hubs-theme="sakura"] :where(
    .primary-button,
    .settings-primary,
    .settings-link-button.primary,
    .finance-primary,
    .organization-action-button.primary,
    .ghost-button.primary,
    .sidebar-central-button
) {
    box-shadow: 0 14px 30px rgba(219, 39, 119, 0.22);
}

html[data-hubs-theme="sakura"] :where(
    .primary-button,
    .settings-primary,
    .settings-link-button.primary,
    .finance-primary,
    .organization-action-button.primary,
    .ghost-button.primary,
    .sidebar-central-button
):hover {
    box-shadow: 0 18px 38px rgba(219, 39, 119, 0.30);
}

html[data-hubs-theme="black-sakura"] :where(
    .primary-button,
    .settings-primary,
    .settings-link-button.primary,
    .finance-primary,
    .organization-action-button.primary,
    .ghost-button.primary,
    .sidebar-central-button,
    .process-primary,
    .reports-actions .primary,
    .reports-presets .primary
) {
    box-shadow: 0 14px 34px rgba(244, 114, 182, 0.24);
}

html[data-hubs-theme="black-sakura"] :where(
    .primary-button,
    .settings-primary,
    .settings-link-button.primary,
    .finance-primary,
    .organization-action-button.primary,
    .ghost-button.primary,
    .sidebar-central-button,
    .process-primary,
    .reports-actions .primary,
    .reports-presets .primary
):hover {
    box-shadow: 0 18px 42px rgba(244, 114, 182, 0.32);
}

html[data-hubs-theme] :where(
    .ghost-button,
    .secondary-button,
    .settings-secondary,
    .settings-link-button,
    .finance-secondary
) {
    border-color: var(--border);
    background: var(--hubs-theme-field, #ffffff);
    color: var(--text);
}

html[data-hubs-theme] :where(
    .section-label,
    .page-kicker,
    .card-header a,
    .settings-role strong
) {
    color: var(--blue);
}

html[data-hubs-theme] .settings-role {
    border-color: var(--border-strong);
    background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 12%, transparent), var(--hubs-theme-panel, #fff));
}

html[data-hubs-theme] .settings-card.danger {
    border-color: color-mix(in srgb, var(--red) 34%, var(--border));
    background: linear-gradient(180deg, var(--hubs-theme-panel, #fff), color-mix(in srgb, var(--red) 7%, var(--hubs-theme-panel, #fff)));
}

html[data-hubs-theme="black-blue"] :where(
    .hero-copy,
    .settings-hero,
    .organization-hero,
    .projects-hero,
    .tasks-hero,
    .metrics-hero,
    .finance-hero,
    .reports-hero,
    .audit-hero,
    .process-toolbar,
    .reports-filters,
    article[class*="card"],
    article[class*="panel"],
    article[class*="item"],
    article[class*="kpi"],
    div[class*="card"]:not(.brand-mark):not(.profile-avatar):not(.kpi-icon):not(.settings-card-icon):not(.card-header):not(.card-badge):not(.preview-main-card),
    div[class*="panel"]:not(.hero-panel-grid),
    div[class*="item"],
    div[class*="empty"],
    section[class*="panel"],
    section[class*="modal"],
    form[class*="form"]
),
html[data-hubs-theme="black-sakura"] :where(
    .hero-copy,
    .settings-hero,
    .organization-hero,
    .projects-hero,
    .tasks-hero,
    .metrics-hero,
    .finance-hero,
    .reports-hero,
    .audit-hero,
    .process-toolbar,
    .reports-filters,
    article[class*="card"],
    article[class*="panel"],
    article[class*="item"],
    article[class*="kpi"],
    div[class*="card"]:not(.brand-mark):not(.profile-avatar):not(.kpi-icon):not(.settings-card-icon):not(.card-header):not(.card-badge):not(.preview-main-card),
    div[class*="panel"]:not(.hero-panel-grid),
    div[class*="item"],
    div[class*="empty"],
    section[class*="panel"],
    section[class*="modal"],
    form[class*="form"]
),
html[data-hubs-theme="golden-wind"] :where(
    .hero-copy,
    .settings-hero,
    .organization-hero,
    .projects-hero,
    .tasks-hero,
    .metrics-hero,
    .finance-hero,
    .reports-hero,
    .audit-hero,
    .process-toolbar,
    .reports-filters,
    article[class*="card"],
    article[class*="panel"],
    article[class*="item"],
    article[class*="kpi"],
    div[class*="card"]:not(.brand-mark):not(.profile-avatar):not(.kpi-icon):not(.settings-card-icon):not(.card-header):not(.card-badge):not(.preview-main-card),
    div[class*="panel"]:not(.hero-panel-grid),
    div[class*="item"],
    div[class*="empty"],
    section[class*="panel"],
    section[class*="modal"],
    form[class*="form"]
) {
    border-color: var(--border);
    background:
        radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 30%),
        linear-gradient(145deg, var(--hubs-theme-panel) 0%, var(--hubs-theme-panel-soft) 100%);
    color: var(--text);
    box-shadow: var(--shadow-soft);
}

html[data-hubs-theme="black-blue"] .hero-copy::after,
html[data-hubs-theme="black-sakura"] .hero-copy::after,
html[data-hubs-theme="golden-wind"] .hero-copy::after {
    background: color-mix(in srgb, var(--blue) 18%, transparent);
}

html[data-hubs-theme="black-blue"] :where(
    .settings-lines div,
    .settings-status-list div,
    .process-steps,
    .process-meta span,
    .reports-meta span,
    .reports-list article,
    .workload-list article,
    .activity-list article,
    .metrics-grid article,
    .health-factors span,
    .finance-drop,
    .finance-note,
    .finance-empty,
    .process-empty,
    .reports-empty,
    .organization-loading,
    .hubs-skeleton-card
),
html[data-hubs-theme="black-sakura"] :where(
    .settings-lines div,
    .settings-status-list div,
    .process-steps,
    .process-meta span,
    .reports-meta span,
    .reports-list article,
    .workload-list article,
    .activity-list article,
    .metrics-grid article,
    .health-factors span,
    .finance-drop,
    .finance-note,
    .finance-empty,
    .process-empty,
    .reports-empty,
    .organization-loading,
    .hubs-skeleton-card
),
html[data-hubs-theme="golden-wind"] :where(
    .settings-lines div,
    .settings-status-list div,
    .process-steps,
    .process-meta span,
    .reports-meta span,
    .reports-list article,
    .workload-list article,
    .activity-list article,
    .metrics-grid article,
    .health-factors span,
    .finance-drop,
    .finance-note,
    .finance-empty,
    .process-empty,
    .reports-empty,
    .organization-loading,
    .hubs-skeleton-card
) {
    border-color: var(--border);
    background: var(--hubs-theme-field);
    color: var(--text);
}

html[data-hubs-theme="black-blue"] :where(
    button:not(.settings-danger):not(.finance-danger):not(.process-danger):not(.projects-modal footer .danger),
    a.settings-link-button,
    .ghost-button,
    .settings-secondary,
    .finance-secondary,
    .process-secondary,
    .reports-actions button,
    .reports-presets button,
    .project-card footer button
),
html[data-hubs-theme="black-sakura"] :where(
    button:not(.settings-danger):not(.finance-danger):not(.process-danger):not(.projects-modal footer .danger),
    a.settings-link-button,
    .ghost-button,
    .settings-secondary,
    .finance-secondary,
    .process-secondary,
    .reports-actions button,
    .reports-presets button,
    .project-card footer button
),
html[data-hubs-theme="golden-wind"] :where(
    button:not(.settings-danger):not(.finance-danger):not(.process-danger):not(.projects-modal footer .danger),
    a.settings-link-button,
    .ghost-button,
    .settings-secondary,
    .finance-secondary,
    .process-secondary,
    .reports-actions button,
    .reports-presets button,
    .project-card footer button
) {
    border-color: var(--border);
    background: var(--hubs-theme-field);
    color: var(--text);
}

html[data-hubs-theme="black-blue"] :where(.primary-button, .settings-primary, .finance-primary, .process-primary, .reports-actions .primary, .reports-presets .primary),
html[data-hubs-theme="black-sakura"] :where(.primary-button, .settings-primary, .finance-primary, .process-primary, .reports-actions .primary, .reports-presets .primary),
html[data-hubs-theme="golden-wind"] :where(.primary-button, .settings-primary, .finance-primary, .process-primary, .reports-actions .primary, .reports-presets .primary) {
    border-color: var(--blue);
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    color: #fff;
}

html[data-hubs-theme="black-blue"] :where(
    .health-ring::before,
    .goal-ring
),
html[data-hubs-theme="black-sakura"] :where(
    .health-ring::before,
    .goal-ring
),
html[data-hubs-theme="golden-wind"] :where(
    .health-ring::before,
    .goal-ring
) {
    background: var(--hubs-theme-panel-soft);
}

html[data-hubs-theme="black-blue"] .sidebar,
html[data-hubs-theme="black-sakura"] .sidebar {
    background: rgba(7, 16, 29, 0.72);
    backdrop-filter: blur(18px);
}

html[data-hubs-theme="black-sakura"] .sidebar {
    background: rgba(18, 9, 20, 0.74);
}

html[data-hubs-theme="golden-wind"] .sidebar {
    background:
        radial-gradient(circle at top left, rgba(245, 184, 46, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(16, 12, 5, 0.92), rgba(27, 20, 8, 0.82));
    border-right-color: rgba(245, 184, 46, 0.16);
    backdrop-filter: blur(18px);
}

html[data-hubs-theme="sakura"] .sidebar {
    background: rgba(255, 250, 253, 0.82);
    backdrop-filter: blur(18px);
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .sidebar .brand-mark img,
    .chat-nav-trigger img
) {
    content: url("../assets/Logos/vantara_hubs_png2branco.webp");
}

html[data-hubs-theme="black-blue"] .chat-bubble {
    background: linear-gradient(180deg, #101b2c, #0c1625);
    border-color: rgba(148, 181, 226, 0.18);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
}

html[data-hubs-theme="black-blue"] .chat-message.mine .chat-bubble {
    background: linear-gradient(180deg, rgba(69, 163, 255, 0.18), rgba(13, 27, 46, 0.96));
    border-color: rgba(77, 235, 255, 0.22);
}

html[data-hubs-theme="sakura"] .chat-bubble::before {
    background: linear-gradient(90deg, rgba(219, 39, 119, 0.24), rgba(249, 168, 212, 0.34));
}

html[data-hubs-theme="sakura"] .chat-message.mine .chat-bubble::before {
    background: linear-gradient(90deg, #db2777, #f9a8d4);
}

html[data-hubs-theme="black-sakura"] .chat-bubble {
    background: linear-gradient(180deg, #211423, #180d1a);
    border-color: rgba(244, 114, 182, 0.18);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

html[data-hubs-theme="black-sakura"] .chat-message.mine .chat-bubble {
    background: linear-gradient(180deg, rgba(244, 114, 182, 0.17), rgba(29, 16, 31, 0.96));
    border-color: rgba(249, 168, 212, 0.24);
}

/* Camada global para impedir cards claros em temas escuros.
   Várias páginas antigas ainda têm background:#fff hardcoded nos CSS locais.
   Esta camada centraliza a correção sem precisar duplicar regras em cada página. */
:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .card,
    .large-card,
    .kpi-card,
    .hero-copy,
    .topbar,
    .profile-chip,
    .organization-loading,
    [class$="-hero"],
    [class$="-toolbar"],
    [class$="-panel"],
    [class$="-card"],
    [class$="-modal"],
    [class$="-item"],
    [class$="-empty"],
    [class$="-filters"],
    [class$="-summary"],
    [class$="-reader"],
    [class$="-list-item"],
    [class$="-widget"],
    [class$="-kpi"],
    [class$="-drop"],
    [class$="-note"],
    [class$="-form"],
    [class*="-panel "],
    [class*="-card "],
    [class*="-modal "],
    [class*="-item "],
    [class*="-empty "],
    [class*="-filters "],
    [class*="-summary "],
    [class*="-toolbar "],
    [class*="-widget "],
    [class*="-kpi "]
):not(.brand-mark):not(.profile-avatar):not(.nav-icon):not(.kpi-icon):not(.settings-card-icon):not(.card-header):not(.card-badge):not(.theme-preview):not(.theme-option):not(.hero-panel):not(.hero-panel-grid):not(.hero-panel-header):not(.health-ring):not(.health-ring-inner) {
    border-color: var(--border) !important;
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 32%),
        linear-gradient(145deg, var(--hubs-theme-panel) 0%, var(--hubs-theme-panel-soft) 100%) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-soft);
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    input,
    select,
    textarea,
    table,
    thead,
    tbody,
    tr,
    td,
    th,
    [class$="-line"],
    [class$="-row"],
    [class$="-chip"],
    [class$="-badge"],
    [class$="-meta"],
    [class$="-tags"],
    [class$="-facts"],
    [class$="-steps"],
    [class$="-actions"],
    [class$="-controls"],
    [class*="-line "],
    [class*="-row "],
    [class*="-chip "],
    [class*="-badge "],
    [class*="-meta "],
    [class*="-tags "],
    [class*="-facts "],
    [class*="-steps "],
    [class*="-actions "],
    [class*="-controls "]
) {
    border-color: var(--border) !important;
    background-color: var(--hubs-theme-field) !important;
    color: var(--text) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    button,
    a[class$="-button"],
    a[class*="-button "],
    .ghost-button,
    .secondary-button,
    .settings-link-button
):not(.primary):not(.settings-primary):not(.finance-primary):not(.process-primary):not(.documents-primary):not(.metrics-primary):not(.projects-primary-action):not(.sidebar-central-button):not(.danger):not(.settings-danger):not(.finance-danger):not(.process-danger):not(.documents-danger) {
    border-color: var(--border) !important;
    background: var(--hubs-theme-field) !important;
    color: var(--text) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .primary-button,
    .settings-primary,
    .finance-primary,
    .process-primary,
    .documents-primary,
    .metrics-primary,
    .projects-primary-action,
    .reports-actions .primary,
    .reports-presets .primary,
    button.primary,
    a.primary
) {
    border-color: var(--blue) !important;
    background: linear-gradient(135deg, var(--blue), var(--cyan)) !important;
    color: #ffffff !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    h1,
    h2,
    h3,
    h4,
    strong,
    b,
    .topbar-left h2,
    .card-header h3
) {
    color: var(--text) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    p,
    small,
    span,
    label,
    .settings-note,
    .page-kicker
):not(.section-label):not(.nav-icon):not(.brand-mark):not(.profile-avatar):not(.theme-preview):not(.theme-preview *) {
    color: var(--muted) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .section-label,
    .page-kicker,
    .nav-item.active,
    .card-header a,
    .metric-card-title > span,
    .task-actions button.primary,
    .project-card footer button:first-child
) {
    color: var(--blue) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .task-badges span,
    .document-tags span,
    .document-context span,
    .finance-tags span,
    .reports-meta span,
    .project-facts > span,
    .process-meta span,
    .health-factors span,
    .settings-permissions span
) {
    border-color: var(--border) !important;
    background: color-mix(in srgb, var(--blue) 10%, var(--hubs-theme-field)) !important;
    color: var(--muted) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .health-track,
    .execution-bar,
    .metric-target-track,
    .task-progress-track,
    .workload-list article > div:nth-child(2) > i,
    .status-bars > div > i,
    .mini-progress
) {
    background: color-mix(in srgb, var(--text) 12%, transparent) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .documents-modal > header,
    .finance-modal > header,
    .settings-modal.large > header
) {
    background: color-mix(in srgb, var(--hubs-theme-panel) 92%, transparent) !important;
    border-color: var(--border) !important;
}

/* Ajustes pontuais: componentes que escapam por serem spans, botões ou filhos diretos. */
:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .search-box,
    .search-box input,
    .organizations-search,
    .organizations-search input,
    .organizations-search select,
    .organizations-search button,
    .projects-filters,
    .projects-filters input,
    .projects-filters select,
    .tasks-controls input,
    .tasks-controls select,
    .metrics-filters input,
    .metrics-filters select,
    .finance-filters input,
    .finance-filters select,
    .documents-filters input,
    .documents-filters select,
    .reports-filters input,
    .reports-filters select,
    .audit-filters input,
    .audit-filters select,
    .process-filters input,
    .process-filters select,
    .teams-filters input,
    .teams-filters select
) {
    border-color: var(--border) !important;
    background: var(--hubs-theme-field) !important;
    color: var(--text) !important;
    box-shadow: none;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .hero-badge,
    .organization-origin-badge,
    .organization-current-badge,
    .hub-badges span,
    .team-area,
    .team-status,
    .team-member-status,
    .team-member-groups > span,
    .team-member-groups b,
    .team-member-groups small,
    .team-group-stats span,
    .team-members-strip span,
    .team-members-strip b,
    .task-badges span,
    .project-card-badges span,
    .project-priority,
    .project-late,
    .process-badge,
    .process-meta span,
    .recurrence-chip,
    .document-tags span,
    .document-context span,
    .document-reader-meta span,
    .finance-tags span,
    .report-badge,
    .reports-meta span,
    .health-factors span,
    .settings-permissions span
) {
    border-color: var(--border) !important;
    background: color-mix(in srgb, var(--blue) 13%, var(--hubs-theme-field)) !important;
    color: var(--text) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .calendar-weekdays,
    .calendar-weekdays span,
    .calendar-day,
    .calendar-day.outside,
    .calendar-day.today,
    .calendar-event,
    .calendar-summary article
) {
    border-color: var(--border) !important;
    background: var(--hubs-theme-field) !important;
    color: var(--text) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .process-summary article,
    .finance-summary article,
    .documents-summary article,
    .metrics-summary article,
    .task-summary,
    .teams-summary-card,
    .projects-summary-card,
    .report-kpi,
    .calendar-summary article
) {
    border-color: var(--border) !important;
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 32%),
        linear-gradient(145deg, var(--hubs-theme-panel), var(--hubs-theme-panel-soft)) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-soft) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .process-tabs,
    .process-tabs button,
    .process-tabs button.active,
    .calendar-filters,
    .calendar-filters button,
    .calendar-filters button.active,
    .task-scope,
    .task-scope button,
    .task-scope button.active,
    .goal-scope,
    .goal-scope button,
    .goal-scope button.active
) {
    border-color: var(--border) !important;
    background: var(--hubs-theme-field) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .process-tabs button.active,
    .calendar-filters button.active,
    .task-scope button.active,
    .goal-scope button.active
) {
    background: color-mix(in srgb, var(--blue) 18%, var(--hubs-theme-field)) !important;
    color: var(--blue) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .teams-management-card,
    .teams-management-card.primary,
    .teams-management-card.dark,
    .team-group-card,
    .team-member-row,
    .team-member-actions-menu,
    .teams-member-picker,
    .team-member-pick,
    .team-pick-row,
    .members-role-guide,
    .members-role-guide article,
    .members-permissions-note,
    .members-permissions-note > div,
    .members-permissions-note span,
    .role-guide-card,
    .member-role,
    .member-card
) {
    border-color: var(--border) !important;
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--cyan) 6%, transparent), transparent 32%),
        linear-gradient(145deg, var(--hubs-theme-panel), var(--hubs-theme-panel-soft)) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-soft) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .audit-panel,
    .audit-timeline,
    .audit-timeline article,
    .audit-actors,
    .audit-actors div,
    .audit-detail-grid div,
    .audit-json,
    .audit-modal,
    .audit-empty
) {
    border-color: var(--border) !important;
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--cyan) 6%, transparent), transparent 32%),
        linear-gradient(145deg, var(--hubs-theme-panel), var(--hubs-theme-panel-soft)) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-soft) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .hub-quick-row,
    .hub-progress-item,
    .hub-overview-empty,
    .hub-metric-card,
    .hub-badges span,
    .hub-progress-track,
    .project-facts > span,
    .process-steps,
    .process-step > span:first-child,
    .step-editor,
    .process-recurrence
) {
    border-color: var(--border) !important;
    background: var(--hubs-theme-field) !important;
    color: var(--text) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .finance-summary strong,
    .documents-summary strong,
    .process-summary strong,
    .teams-summary-card strong,
    .audit-actors strong,
    .hub-metric-card strong,
    .hub-progress-item strong
) {
    color: var(--text) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .finance-summary span,
    .documents-summary span,
    .process-summary span,
    .teams-summary-card span,
    .audit-actors span,
    .audit-actors small,
    .hub-metric-card span,
    .hub-progress-item span,
    .hub-progress-item b
) {
    color: var(--muted) !important;
}

/* Ajustes finais de superfícies claras que alguns CSS de página ainda forçam. */
:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .organization-card,
    .organizations-list-item,
    .teams-hero,
    .teams-panel,
    .teams-summary-card,
    .teams-management-card,
    .team-group-card,
    .members-hero,
    .members-panel,
    .members-summary-card,
    .dash-toolbar,
    .dash-head,
    .dash-empty
) {
    border-color: var(--border) !important;
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--cyan) 5%, transparent), transparent 30%),
        linear-gradient(145deg, var(--hubs-theme-panel), var(--hubs-theme-panel-soft)) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-soft) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .organizations-list-item.is-current,
    .teams-management-card.primary
) {
    border-color: var(--border-strong) !important;
    background:
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--blue) 13%, transparent), transparent 32%),
        linear-gradient(145deg, color-mix(in srgb, var(--blue) 9%, var(--hubs-theme-panel)), var(--hubs-theme-panel-soft)) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), inset 0 0 0 1px var(--border) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .organization-meta span,
    .organizations-list-meta span,
    .organization-origin-badge,
    .organization-current-badge,
    .dash-head-meta span,
    .hub-badges span,
    .teams-org-meta span,
    .team-area,
    .team-status,
    .team-member-name span,
    .team-member-groups b,
    .team-member-groups small,
    .member-horizon,
    .member-you,
    .member-status,
    .audit-event-main footer span
) {
    border-color: var(--border) !important;
    background: color-mix(in srgb, var(--hubs-theme-field) 86%, var(--blue) 5%) !important;
    color: var(--muted) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .organization-origin-badge.is-connect,
    .organization-current-badge,
    .team-area,
    .team-member-name span,
    .team-member-groups b,
    .member-you,
    .member-status.ativo
) {
    border-color: color-mix(in srgb, var(--blue) 26%, var(--border)) !important;
    background: color-mix(in srgb, var(--blue) 12%, var(--hubs-theme-field)) !important;
    color: var(--blue) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .team-member-name span.horizon,
    .member-horizon
) {
    border-color: color-mix(in srgb, var(--gold, #f8c45c) 28%, var(--border)) !important;
    background: color-mix(in srgb, var(--gold, #f8c45c) 13%, var(--hubs-theme-field)) !important;
    color: var(--gold, #f8c45c) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .team-status.inativa,
    .team-member-status.suspenso,
    .member-status.suspenso
) {
    border-color: color-mix(in srgb, #ef4444 24%, var(--border)) !important;
    background: color-mix(in srgb, #ef4444 12%, var(--hubs-theme-field)) !important;
    color: #fca5a5 !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .team-group-stats span,
    .team-member-row,
    .team-member-actions-menu,
    .audit-event
) {
    border-color: var(--border) !important;
    background: color-mix(in srgb, var(--hubs-theme-field) 92%, transparent) !important;
    color: var(--text) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .team-member-row.is-clickable:hover,
    .team-member-row.is-clickable:focus-visible,
    .team-member-actions-menu button:hover,
    .team-member-actions-menu button:focus-visible
) {
    background: color-mix(in srgb, var(--blue) 10%, var(--hubs-theme-field)) !important;
    color: var(--blue) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .organization-topline h4,
    .organizations-list-heading h3,
    .dash-head h1,
    .dash-empty strong,
    .teams-hero h1,
    .team-group-card h3,
    .team-group-stats strong,
    .team-member-name strong,
    .team-member-data strong,
    .members-hero h1,
    .members-panel-header h2,
    .member-identity strong,
    .member-role strong,
    .member-position strong,
    .audit-event-main strong,
    .audit-panel h2
) {
    color: var(--text) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .organization-info p,
    .organizations-list-main > p,
    .dash-head p,
    .teams-hero p,
    .team-group-card p,
    .team-member-identity small,
    .team-member-data span,
    .team-member-data small,
    .team-member-groups > span,
    .members-hero p,
    .members-panel-header > p,
    .audit-panel > header > span,
    .audit-event-main header span,
    .audit-event-main p
) {
    color: var(--muted) !important;
}

.theme-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    max-height: 286px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 6px 2px 2px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--blue) 46%, transparent) transparent;
}

.theme-options::-webkit-scrollbar {
    width: 7px;
}

.theme-options::-webkit-scrollbar-track {
    background: transparent;
}

.theme-options::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--blue) 42%, transparent);
    border-radius: 999px;
}

.theme-group-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 2px 1px;
    color: var(--blue);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.theme-group-label::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 36%, transparent), transparent);
}

.theme-option {
    position: relative;
    display: grid;
    grid-template-columns: minmax(92px, 0.78fr) auto minmax(0, 1.4fr);
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--hubs-theme-field, #ffffff);
    color: var(--text);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.theme-option:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-soft);
}

.theme-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.theme-option:has(input:checked) {
    border-color: var(--blue);
    background: color-mix(in srgb, var(--blue) 7%, var(--hubs-theme-field, #fff));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 14%, transparent);
}

.theme-preview {
    display: inline-grid;
    grid-template-columns: repeat(3, 18px);
    gap: 5px;
    justify-content: center;
    height: 18px;
}

.theme-preview i {
    display: block;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 5px;
}

.theme-preview.padrao i:nth-child(1) { background: #edf1f5; }
.theme-preview.padrao i:nth-child(2) { background: #0145f2; }
.theme-preview.padrao i:nth-child(3) { background: #0f172a; }
.theme-preview.black-blue i:nth-child(1) { background: #07101d; }
.theme-preview.black-blue i:nth-child(2) { background: #45a3ff; }
.theme-preview.black-blue i:nth-child(3) { background: #4debff; }
.theme-preview.sakura i:nth-child(1) { background: #fff1f6; }
.theme-preview.sakura i:nth-child(2) { background: #db2777; }
.theme-preview.sakura i:nth-child(3) { background: #8a5a70; }
.theme-preview.black-sakura i:nth-child(1) { background: #120914; }
.theme-preview.black-sakura i:nth-child(2) { background: #f472b6; }
.theme-preview.black-sakura i:nth-child(3) { background: #fff0f7; }
.theme-preview.golden-hour i:nth-child(1) { background: #fff8e6; }
.theme-preview.golden-hour i:nth-child(2) { background: #d99a08; }
.theme-preview.golden-hour i:nth-child(3) { background: #271a06; }
.theme-preview.golden-wind i:nth-child(1) { background: #100c05; }
.theme-preview.golden-wind i:nth-child(2) { background: #f5b82e; }
.theme-preview.golden-wind i:nth-child(3) { background: #fff7df; }
.theme-preview.solar-glass i:nth-child(1) { background: #fffbea; }
.theme-preview.solar-glass i:nth-child(2) { background: #eab308; }
.theme-preview.solar-glass i:nth-child(3) { background: #241a06; }
.theme-preview.graphite-gold i:nth-child(1) { background: #0d0d0b; }
.theme-preview.graphite-gold i:nth-child(2) { background: #f6c453; }
.theme-preview.graphite-gold i:nth-child(3) { background: #fff8e8; }
.theme-preview.midas-iron i:nth-child(1) { background: #11110f; }
.theme-preview.midas-iron i:nth-child(2) { background: #ffcc33; }
.theme-preview.midas-iron i:nth-child(3) { background: #c9bfa6; }
.theme-preview.ivory-capital i:nth-child(1) { background: #fbf7ed; }
.theme-preview.ivory-capital i:nth-child(2) { background: #b7791f; }
.theme-preview.ivory-capital i:nth-child(3) { background: #1f2933; }
.theme-preview.aurora-core i:nth-child(1) { background: #031712; }
.theme-preview.aurora-core i:nth-child(2) { background: #34d399; }
.theme-preview.aurora-core i:nth-child(3) { background: #4debff; }
.theme-preview.obsidian-mint i:nth-child(1) { background: #050f0d; }
.theme-preview.obsidian-mint i:nth-child(2) { background: #6ee7b7; }
.theme-preview.obsidian-mint i:nth-child(3) { background: #effff9; }
.theme-preview.emerald-boardroom i:nth-child(1) { background: #ecfdf5; }
.theme-preview.emerald-boardroom i:nth-child(2) { background: #059669; }
.theme-preview.emerald-boardroom i:nth-child(3) { background: #08251d; }
.theme-preview.lime-signal i:nth-child(1) { background: #091005; }
.theme-preview.lime-signal i:nth-child(2) { background: #bef264; }
.theme-preview.lime-signal i:nth-child(3) { background: #f7ffe8; }
.theme-preview.black-emerald i:nth-child(1) { background: #040c09; }
.theme-preview.black-emerald i:nth-child(2) { background: #10b981; }
.theme-preview.black-emerald i:nth-child(3) { background: #ecfdf5; }
.theme-preview.emerald-iron i:nth-child(1) { background: #0f1210; }
.theme-preview.emerald-iron i:nth-child(2) { background: #00e676; }
.theme-preview.emerald-iron i:nth-child(3) { background: #aec4b7; }
.theme-preview.arctic-pulse i:nth-child(1) { background: #eff6ff; }
.theme-preview.arctic-pulse i:nth-child(2) { background: #0284c7; }
.theme-preview.arctic-pulse i:nth-child(3) { background: #082f49; }
.theme-preview.neon-slate i:nth-child(1) { background: #070b13; }
.theme-preview.neon-slate i:nth-child(2) { background: #38bdf8; }
.theme-preview.neon-slate i:nth-child(3) { background: #e8f4ff; }
.theme-preview.cobalt-iron i:nth-child(1) { background: #101217; }
.theme-preview.cobalt-iron i:nth-child(2) { background: #2563ff; }
.theme-preview.cobalt-iron i:nth-child(3) { background: #4debff; }
.theme-preview.ocean-grid i:nth-child(1) { background: #031525; }
.theme-preview.ocean-grid i:nth-child(2) { background: #0ea5e9; }
.theme-preview.ocean-grid i:nth-child(3) { background: #4debff; }
.theme-preview.moonlight-steel i:nth-child(1) { background: #111827; }
.theme-preview.moonlight-steel i:nth-child(2) { background: #93c5fd; }
.theme-preview.moonlight-steel i:nth-child(3) { background: #f8fafc; }
.theme-preview.deep-space i:nth-child(1) { background: #050816; }
.theme-preview.deep-space i:nth-child(2) { background: #6366f1; }
.theme-preview.deep-space i:nth-child(3) { background: #38bdf8; }
.theme-preview.quantum-cyan i:nth-child(1) { background: #031316; }
.theme-preview.quantum-cyan i:nth-child(2) { background: #22d3ee; }
.theme-preview.quantum-cyan i:nth-child(3) { background: #ecfeff; }
.theme-preview.frosted-navy i:nth-child(1) { background: #08111f; }
.theme-preview.frosted-navy i:nth-child(2) { background: #60a5fa; }
.theme-preview.frosted-navy i:nth-child(3) { background: #eff6ff; }
.theme-preview.blue-monarch i:nth-child(1) { background: #eef4ff; }
.theme-preview.blue-monarch i:nth-child(2) { background: #1d4ed8; }
.theme-preview.blue-monarch i:nth-child(3) { background: #101b3f; }
.theme-preview.cloud-terminal i:nth-child(1) { background: #f3f7fb; }
.theme-preview.cloud-terminal i:nth-child(2) { background: #2563eb; }
.theme-preview.cloud-terminal i:nth-child(3) { background: #111827; }
.theme-preview.polar-black i:nth-child(1) { background: #030712; }
.theme-preview.polar-black i:nth-child(2) { background: #e0f2fe; }
.theme-preview.polar-black i:nth-child(3) { background: #67e8f9; }
.theme-preview.white-orbit i:nth-child(1) { background: #f8fafc; }
.theme-preview.white-orbit i:nth-child(2) { background: #2563eb; }
.theme-preview.white-orbit i:nth-child(3) { background: #0f172a; }
.theme-preview.violet-circuit i:nth-child(1) { background: #10091f; }
.theme-preview.violet-circuit i:nth-child(2) { background: #a78bfa; }
.theme-preview.violet-circuit i:nth-child(3) { background: #f5f3ff; }
.theme-preview.cyber-lavender i:nth-child(1) { background: #f5f3ff; }
.theme-preview.cyber-lavender i:nth-child(2) { background: #7c3aed; }
.theme-preview.cyber-lavender i:nth-child(3) { background: #20113a; }
.theme-preview.iron-violet i:nth-child(1) { background: #111116; }
.theme-preview.iron-violet i:nth-child(2) { background: #8b5cf6; }
.theme-preview.iron-violet i:nth-child(3) { background: #f4f2ff; }
.theme-preview.crimson-protocol i:nth-child(1) { background: #160608; }
.theme-preview.crimson-protocol i:nth-child(2) { background: #fb7185; }
.theme-preview.crimson-protocol i:nth-child(3) { background: #fff1f2; }
.theme-preview.king-crimson i:nth-child(1) { background: #111111; }
.theme-preview.king-crimson i:nth-child(2) { background: #ff1f3d; }
.theme-preview.king-crimson i:nth-child(3) { background: #b9aaa8; }
.theme-preview.ruby-control i:nth-child(1) { background: #12070b; }
.theme-preview.ruby-control i:nth-child(2) { background: #f43f5e; }
.theme-preview.ruby-control i:nth-child(3) { background: #fff1f4; }
.theme-preview.midnight-coral i:nth-child(1) { background: #0b111d; }
.theme-preview.midnight-coral i:nth-child(2) { background: #fb7185; }
.theme-preview.midnight-coral i:nth-child(3) { background: #fdba74; }
.theme-preview.rose-quartz i:nth-child(1) { background: #fff7f8; }
.theme-preview.rose-quartz i:nth-child(2) { background: #e11d48; }
.theme-preview.rose-quartz i:nth-child(3) { background: #2d1118; }
.theme-preview.plasma-pink i:nth-child(1) { background: #120716; }
.theme-preview.plasma-pink i:nth-child(2) { background: #ec4899; }
.theme-preview.plasma-pink i:nth-child(3) { background: #fdf2ff; }
.theme-preview.copper-flow i:nth-child(1) { background: #fff7ed; }
.theme-preview.copper-flow i:nth-child(2) { background: #c2410c; }
.theme-preview.copper-flow i:nth-child(3) { background: #2d1608; }
.theme-preview.copper-iron i:nth-child(1) { background: #12100e; }
.theme-preview.copper-iron i:nth-child(2) { background: #ff7a1a; }
.theme-preview.copper-iron i:nth-child(3) { background: #c8b1a0; }
.theme-preview.sandstone i:nth-child(1) { background: #f8f1e7; }
.theme-preview.sandstone i:nth-child(2) { background: #7c6f55; }
.theme-preview.sandstone i:nth-child(3) { background: #221d15; }
.theme-preview.sunset-ops i:nth-child(1) { background: #fff3ed; }
.theme-preview.sunset-ops i:nth-child(2) { background: #f97316; }
.theme-preview.sunset-ops i:nth-child(3) { background: #2b1307; }

.theme-option strong {
    color: var(--text);
    font-size: 0.58rem;
    white-space: nowrap;
}

.theme-option span:not(.theme-preview) {
    color: var(--muted);
    font-size: 0.47rem;
    line-height: 1.35;
}

@media (max-width: 640px) {
    .theme-option {
        grid-template-columns: 1fr auto;
    }

    .theme-option span:not(.theme-preview) {
        grid-column: 1 / -1;
    }
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .central-sidebar,
    .central-nav-item
) {
    border-color: var(--border) !important;
    background: var(--hubs-theme-panel) !important;
    color: var(--text) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) :where(
    .central-nav-item:hover,
    .central-nav-item:focus-visible,
    .central-nav-item.active
) {
    border-color: var(--border-strong) !important;
    background: color-mix(in srgb, var(--blue) 12%, var(--hubs-theme-field)) !important;
    color: var(--blue) !important;
}

:is(html[data-hubs-theme="black-blue"], html[data-hubs-theme="black-sakura"], html[data-hubs-theme="golden-wind"]) .central-sidebar-note {
    border-color: color-mix(in srgb, var(--gold, #f8c45c) 24%, var(--border)) !important;
    background:
        radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--gold, #f8c45c) 14%, transparent), transparent 34%),
        linear-gradient(145deg, var(--hubs-theme-field), var(--hubs-theme-panel-soft)) !important;
}

/* Camada universal para qualquer tema escuro novo.
   Sem isso, temas adicionados depois herdam fundos claros de CSS antigos de páginas específicas. */
html[data-hubs-tone="dark"] :where(
    .sidebar,
    .central-sidebar,
    .central-nav-item,
    .topbar,
    .profile-chip,
    .hero-copy,
    .settings-hero,
    .organization-hero,
    .projects-hero,
    .tasks-hero,
    .metrics-hero,
    .finance-hero,
    .reports-hero,
    .audit-hero,
    .teams-hero,
    .members-hero,
    .documents-hero,
    .dashboard-hero,
    .process-toolbar,
    .reports-filters,
    article[class*="card"],
    article[class*="panel"],
    article[class*="item"],
    article[class*="kpi"],
    div[class*="card"]:not(.brand-mark):not(.profile-avatar):not(.nav-icon):not(.kpi-icon):not(.settings-card-icon):not(.card-header):not(.card-badge):not(.theme-preview):not(.theme-option):not(.hero-panel):not(.hero-panel-grid):not(.hero-panel-header):not(.health-ring):not(.health-ring-inner),
    div[class*="panel"]:not(.hero-panel-grid),
    div[class*="item"],
    div[class*="empty"],
    section[class*="panel"],
    section[class*="modal"],
    form[class*="form"],
    .organization-card,
    .organizations-list-item,
    .teams-panel,
    .teams-summary-card,
    .teams-management-card,
    .team-group-card,
    .members-panel,
    .members-summary-card,
    .dash-toolbar,
    .dash-head,
    .dash-empty,
    .finance-summary article,
    .documents-summary article,
    .process-summary article,
    .audit-panel,
    .audit-timeline,
    .audit-actors,
    .hub-quick-row,
    .hub-progress-item,
    .hub-overview-empty,
    .hub-metric-card
) {
    border-color: var(--border) !important;
    background:
        radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 30%),
        linear-gradient(145deg, var(--hubs-theme-panel), var(--hubs-theme-panel-soft)) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-soft) !important;
}

html[data-hubs-tone="dark"] :where(
    input,
    select,
    textarea,
    .search-box,
    .search-box input,
    .settings-lines div,
    .settings-status-list div,
    .process-steps,
    .process-meta span,
    .reports-meta span,
    .reports-list article,
    .workload-list article,
    .activity-list article,
    .metrics-grid article,
    .health-factors span,
    .finance-drop,
    .finance-note,
    .finance-empty,
    .process-empty,
    .reports-empty,
    .organization-loading,
    .hubs-skeleton-card,
    .calendar-weekdays,
    .calendar-weekdays span,
    .process-tabs,
    .process-tabs button,
    .team-group-stats span,
    .team-member-row,
    .team-member-actions-menu,
    .audit-event,
    .theme-option
) {
    border-color: var(--border) !important;
    background: var(--hubs-theme-field) !important;
    color: var(--hubs-theme-field-text, var(--text)) !important;
}

html[data-hubs-tone="dark"] :where(
    button:not(.settings-danger):not(.finance-danger):not(.process-danger):not(.projects-modal footer .danger),
    a.settings-link-button,
    .ghost-button,
    .settings-secondary,
    .finance-secondary,
    .process-secondary,
    .reports-actions button,
    .reports-presets button,
    .project-card footer button
) {
    border-color: var(--border) !important;
    background: var(--hubs-theme-field) !important;
    color: var(--text) !important;
}

html[data-hubs-tone="dark"] :where(
    .primary-button,
    .settings-primary,
    .settings-link-button.primary,
    .finance-primary,
    .process-primary,
    .reports-actions .primary,
    .reports-presets .primary,
    .organization-action-button.primary,
    .ghost-button.primary,
    .sidebar-central-button
) {
    border-color: var(--blue) !important;
    background: linear-gradient(135deg, var(--blue), var(--cyan)) !important;
    color: #fff !important;
}

html[data-hubs-tone="dark"] :where(
    h1,
    h2,
    h3,
    h4,
    strong,
    .topbar-left h2,
    .card-header h3,
    .organization-topline h4,
    .organizations-list-heading h3,
    .dash-head h1,
    .dash-empty strong,
    .team-group-card h3,
    .team-group-stats strong,
    .team-member-name strong,
    .team-member-data strong,
    .member-identity strong,
    .member-role strong,
    .member-position strong,
    .audit-event-main strong,
    .audit-panel h2
):not(.section-label):not(.nav-icon):not(.brand-mark):not(.profile-avatar):not(.theme-preview):not(.theme-preview *) {
    color: var(--text) !important;
}

html[data-hubs-tone="dark"] :where(
    p,
    small,
    span,
    .settings-note,
    .settings-lines span,
    .settings-status-list small,
    .topbar-left span,
    .profile-chip span,
    .card-header span,
    .organization-info p,
    .organizations-list-main > p,
    .dash-head p,
    .team-group-card p,
    .team-member-identity small,
    .team-member-data span,
    .team-member-data small,
    .team-member-groups > span,
    .members-panel-header > p,
    .audit-panel > header > span,
    .audit-event-main header span,
    .audit-event-main p
):not(.section-label):not(.nav-icon):not(.brand-mark):not(.profile-avatar):not(.theme-preview):not(.theme-preview *) {
    color: var(--muted) !important;
}

html[data-hubs-tone="dark"] :where(
    .section-label,
    .page-kicker,
    .card-header a,
    .settings-role strong,
    .central-nav-item:hover,
    .central-nav-item:focus-visible,
    .central-nav-item.active
) {
    color: var(--blue) !important;
}

html[data-hubs-tone="dark"] :where(
    .hero-badge,
    .organization-meta span,
    .organizations-list-meta span,
    .organization-origin-badge,
    .organization-current-badge,
    .dash-head-meta span,
    .hub-badges span,
    .teams-org-meta span,
    .team-area,
    .team-status,
    .team-member-name span,
    .team-member-groups b,
    .team-member-groups small,
    .member-horizon,
    .member-you,
    .member-status,
    .audit-event-main footer span
) {
    border-color: var(--border) !important;
    background: color-mix(in srgb, var(--hubs-theme-field) 86%, var(--blue) 5%) !important;
    color: var(--muted) !important;
}

html[data-hubs-tone="dark"] :where(
    .organization-origin-badge.is-connect,
    .organization-current-badge,
    .team-area,
    .team-member-name span,
    .team-member-groups b,
    .member-you,
    .member-status.ativo
) {
    border-color: color-mix(in srgb, var(--blue) 26%, var(--border)) !important;
    background: color-mix(in srgb, var(--blue) 12%, var(--hubs-theme-field)) !important;
    color: var(--blue) !important;
}

html[data-hubs-tone="dark"] :where(
    .team-member-name span.horizon,
    .member-horizon
) {
    border-color: color-mix(in srgb, var(--gold, #f8c45c) 28%, var(--border)) !important;
    background: color-mix(in srgb, var(--gold, #f8c45c) 13%, var(--hubs-theme-field)) !important;
    color: var(--gold, #f8c45c) !important;
}

html[data-hubs-tone="dark"] :where(
    .sidebar .brand-mark img,
    .chat-nav-trigger img
) {
    content: url("../assets/Logos/vantara_hubs_png2branco.webp");
}

html[data-hubs-tone="dark"] .sidebar {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--blue) 14%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--hubs-theme-panel) 92%, #000), color-mix(in srgb, var(--hubs-theme-panel-soft) 82%, #000)) !important;
    border-right-color: var(--border) !important;
    backdrop-filter: blur(18px);
}

/* Mobile density pass: a Hubs deve parecer painel/app, não desktop espremido. */
@media (max-width: 780px) {
    :root {
        --radius-xl: 15px;
        --radius-lg: 12px;
        --radius-md: 9px;
        --shadow-soft: 0 8px 18px rgba(15, 23, 42, 0.05);
    }

    body {
        font-size: 14px;
    }

    :where(
        .topbar,
        .hero-copy,
        .central-hero,
        .settings-hero,
        [class$="-hero"],
        [class$="-toolbar"],
        [class$="-filters"],
        [class$="-panel"],
        [class$="-card"],
        [class$="-item"],
        [class$="-empty"],
        [class$="-summary"],
        [class$="-reader"],
        [class$="-widget"],
        [class$="-kpi"],
        [class$="-drop"],
        [class$="-note"],
        [class*="-panel "],
        [class*="-card "],
        [class*="-item "],
        [class*="-empty "]
    ) {
        border-radius: 12px !important;
    }

    :where(
        .hero-copy,
        .central-hero,
        .settings-hero,
        .teams-hero,
        .projects-hero,
        .tasks-hero,
        .finance-hero,
        .reports-hero,
        .audit-hero,
        .hub-overview-hero,
        [class$="-hero"]
    ) {
        padding: 14px !important;
        gap: 10px !important;
    }

    :where(
        .card,
        .large-card,
        .kpi-card,
        .central-card,
        .settings-card,
        .organization-card,
        .organizations-list-item,
        .hub-card-link,
        .task-card,
        .project-card,
        .metric-card,
        .goal-card,
        .process-card,
        .document-card,
        .finance-file-card,
        .report-kpi,
        .teams-card,
        .teams-panel,
        .members-card,
        .dash-widget,
        [class$="-card"],
        [class$="-panel"],
        [class$="-item"],
        [class$="-kpi"]
    ) {
        padding: 11px !important;
        gap: 8px !important;
    }

    :where(
        .content-grid,
        .kpi-grid,
        .settings-grid,
        .central-content,
        .central-list,
        .organizations-list,
        .hub-overview-grid,
        .tasks-content,
        .projects-content,
        .metrics-content,
        .goals-content,
        .process-content,
        .teams-content,
        .members-content,
        .finance-content,
        .documents-content,
        .reports-content,
        .audit-content,
        [class$="-content"],
        [class$="-grid"],
        [class$="-list"]
    ) {
        gap: 9px !important;
    }

    :where(
        h1,
        .hero-copy h1,
        .central-hero h1,
        .settings-hero h1,
        [class$="-hero"] h1
    ) {
        font-size: clamp(1.25rem, 7vw, 1.72rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.055em !important;
    }

    :where(
        h2,
        .topbar-left h2,
        .card-header h3,
        [class$="-panel"] h2,
        [class$="-card"] h2
    ) {
        font-size: clamp(0.86rem, 4.4vw, 1.08rem) !important;
        line-height: 1.14 !important;
    }

    :where(
        p,
        .hero-copy p,
        .central-hero p,
        .settings-hero p,
        [class$="-hero"] p,
        [class$="-card"] p,
        [class$="-panel"] p
    ) {
        font-size: 0.62rem !important;
        line-height: 1.42 !important;
    }

    :where(
        .primary-button,
        .secondary-button,
        .ghost-button,
        .mini-button,
        .organization-action-button,
        .settings-primary,
        .settings-secondary,
        .settings-danger,
        .settings-link-button,
        .projects-primary-action,
        .tasks-primary,
        .finance-primary,
        .finance-secondary,
        .finance-danger,
        .dash-actions button,
        .task-actions button,
        .project-card footer button,
        .metric-actions button,
        .goal-actions button,
        .process-actions button,
        .process-actions a,
        .agenda-actions button,
        .agenda-actions a,
        button
    ) {
        min-height: 34px !important;
        height: auto !important;
        padding: 8px 10px !important;
        border-radius: 9px !important;
        font-size: 0.61rem !important;
        line-height: 1.05 !important;
    }

    :where(input, select, textarea) {
        min-height: 34px !important;
        padding: 7px 9px !important;
        border-radius: 8px !important;
        font-size: 0.62rem !important;
    }

    :where(
        .nav-item,
        .central-nav-item
    ) {
        min-height: 34px !important;
        padding: 7px 8px !important;
        border-radius: 9px !important;
        font-size: 0.66rem !important;
        line-height: 1.1 !important;
    }

    .nav-icon,
    .central-nav-item span {
        width: 20px !important;
        height: 20px !important;
        border-radius: 7px !important;
        font-size: 0.62rem !important;
    }

    .brand-mark,
    .central-sidebar-brand .brand-mark {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        max-width: 44px !important;
        border: 0 !important;
        border-radius: 13px !important;
        font-size: 0.78rem !important;
        line-height: 1 !important;
        box-shadow: none !important;
    }

    body.sidebar-mobile-open .brand-mark,
    body.sidebar-mobile-open .central-sidebar-brand .brand-mark {
        width: 100% !important;
        height: 54px !important;
        flex: 1 1 auto !important;
        max-width: 190px !important;
        border-radius: 0 !important;
    }

    :where(
        .profile-avatar,
        .organization-logo,
        .organization-avatar,
        .project-avatar,
        .task-avatar,
        .member-avatar,
        .central-logo,
        .finance-file-icon
    ) {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        font-size: 0.68rem !important;
    }

    .profile-chip {
        min-height: 36px !important;
        height: auto !important;
        padding: 5px 8px 5px 5px !important;
        border-radius: 11px !important;
    }

    .profile-chip strong {
        font-size: 0.66rem !important;
    }

    .profile-chip span {
        font-size: 0.54rem !important;
    }

    :where(
        .central-meta span,
        .organization-meta span,
        .organizations-list-meta span,
        .task-badges span,
        .finance-tags span,
        .reports-meta span,
        .team-area,
        .team-status,
        .member-status,
        .member-horizon,
        .central-badge,
        .organization-origin-badge,
        .organization-current-badge
    ) {
        padding: 3px 6px !important;
        border-radius: 7px !important;
        font-size: 0.45rem !important;
        line-height: 1.1 !important;
    }

    :where(
        .hubs-skeleton-hero,
        .hubs-skeleton-card,
        .hubs-skeleton-panel
    ) {
        padding: 12px !important;
        border-radius: 12px !important;
        min-height: 96px !important;
    }
}

@media (max-width: 520px) {
    .main-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .topbar {
        gap: 8px !important;
    }

    .topbar-actions {
        gap: 6px !important;
    }

    :where(
        .content-grid,
        .kpi-grid,
        .settings-grid,
        .reports-kpis,
        .finance-summary,
        .documents-summary,
        .projects-summary,
        .tasks-summary,
        .metrics-summary,
        .goal-summary,
        .process-summary,
        .teams-summary
    ) {
        grid-template-columns: 1fr !important;
    }

    :where(
        .card,
        .large-card,
        .kpi-card,
        .central-card,
        .settings-card,
        .organization-card,
        .organizations-list-item,
        .task-card,
        .project-card,
        .metric-card,
        .goal-card,
        .process-card,
        .document-card,
        .finance-file-card,
        .dash-widget
    ) {
        padding: 10px !important;
    }

    :where(
        .primary-button,
        .secondary-button,
        .ghost-button,
        .organization-action-button,
        .settings-primary,
        .settings-secondary,
        .settings-danger,
        .settings-link-button,
        button
    ) {
        min-height: 32px !important;
        padding: 7px 9px !important;
    }
}

/* A logo da Hubs ja vem transparente. O container nao deve virar card/badge em nenhum tema. */
:where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand-mark, .central-sidebar-brand .brand-mark),
html[data-hubs-theme] :where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand-mark, .central-sidebar-brand .brand-mark),
html[data-hubs-tone="dark"] :where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand-mark, .central-sidebar-brand .brand-mark) {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    filter: none !important;
}

:where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand-mark img, .brand-logo-wide),
html[data-hubs-theme] :where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand-mark img, .brand-logo-wide),
html[data-hubs-tone="dark"] :where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand-mark img, .brand-logo-wide) {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

:where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand, .central-sidebar-brand) :where(.brand-mark, .brand-logo-wide, .sidebar-mobile-trigger),
html[data-hubs-theme] :where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand, .central-sidebar-brand) :where(.brand-mark, .brand-logo-wide, .sidebar-mobile-trigger),
html[data-hubs-tone="dark"] :where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand, .central-sidebar-brand) :where(.brand-mark, .brand-logo-wide, .sidebar-mobile-trigger) {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

:where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand-mark img),
html[data-hubs-theme] :where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand-mark img),
html[data-hubs-tone="dark"] :where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand-mark img) {
    background-color: transparent !important;
    mix-blend-mode: normal !important;
}

/* Camada de consistencia visual: remove superficies fixas brancas/cinza das paginas operacionais. */
html[data-hubs-theme] :where(
    .hub-hero,
    .tasks-hero,
    .goals-hero,
    .metrics-hero,
    .calendar-toolbar,
    .documents-toolbar,
    .audit-hero
) {
    border-color: var(--border) !important;
    background:
        radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 32%),
        var(--hubs-theme-hero, linear-gradient(135deg, var(--hubs-theme-panel), var(--hubs-theme-panel-soft))) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-soft) !important;
}

html[data-hubs-theme] :where(
    .tasks-panel,
    .goals-panel,
    .metrics-panel,
    .calendar-board,
    .calendar-agenda,
    .documents-panel,
    .audit-panel,
    .audit-side,
    .audit-modal
) {
    border-color: var(--border) !important;
    background: color-mix(in srgb, var(--hubs-theme-panel, var(--card)) 94%, transparent) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-soft) !important;
}

html[data-hubs-theme] :where(
    .task-summary,
    .goal-summary,
    .metric-summary,
    .calendar-summary article,
    .documents-summary article,
    .audit-kpi,
    .audit-actors,
    .audit-actors div,
    .audit-details,
    .audit-details div,
    .hub-card-link
) {
    border-color: var(--border) !important;
    background: linear-gradient(145deg, var(--hubs-theme-panel), var(--hubs-theme-panel-soft)) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-soft) !important;
}

html[data-hubs-theme] :where(
    .calendar-navigation h1,
    .calendar-weekdays,
    .calendar-day,
    .calendar-day.outside,
    .calendar-day.today,
    .calendar-event,
    .calendar-more,
    .agenda-item,
    .agenda-actions a,
    .agenda-actions button,
    .task-scope button,
    .task-badges span,
    .task-context,
    .task-progress-track,
    .goal-scopes button,
    .goal-badges span,
    .goal-context span,
    .goal-ring::before,
    .goal-history-item,
    .goal-related > article,
    .goal-task-status,
    .metric-project,
    .metric-change,
    .metric-no-history,
    .metric-target-track,
    .documents-filters input,
    .documents-filters select,
    .document-tags span,
    .document-context span,
    .document-reader-meta span,
    .version-card,
    .audit-actors span,
    .audit-actors small,
    .audit-details dt,
    .audit-details dd
) {
    border-color: var(--border) !important;
    background: var(--hubs-theme-field, var(--card)) !important;
    color: var(--hubs-theme-field-text, var(--text)) !important;
}

html[data-hubs-theme] :where(
    .calendar-toolbar h1,
    .calendar-agenda header h2,
    .documents-toolbar h1,
    .audit-hero h1,
    .tasks-hero h1,
    .goals-hero h1,
    .metrics-hero h1,
    .task-summary strong,
    .goal-summary strong,
    .metric-summary strong,
    .calendar-summary strong,
    .documents-summary strong,
    .audit-kpi strong,
    .audit-actors strong,
    .audit-details dd
) {
    color: var(--text) !important;
}

html[data-hubs-theme] :where(
    .calendar-agenda header,
    .calendar-weekdays,
    .calendar-day,
    .metric-meta,
    .goal-progress-side,
    .goal-related + .goal-related,
    .documents-modal > header,
    .audit-details
) {
    border-color: var(--border) !important;
}

html[data-hubs-theme] :where(
    .calendar-navigation button,
    .calendar-actions button,
    .calendar-filters button,
    .documents-secondary,
    .documents-danger,
    .document-card footer button,
    .document-card footer a,
    .version-card button
) {
    border-color: var(--border) !important;
    background: var(--hubs-theme-field, var(--card)) !important;
    color: var(--text) !important;
}

html[data-hubs-theme] .dash-delete-modal,
html[data-hubs-tone="dark"] .dash-delete-modal {
    border-color: color-mix(in srgb, #ef4444 42%, var(--border)) !important;
    background:
        radial-gradient(circle at 92% 8%, rgba(239, 68, 68, 0.10), transparent 28%),
        var(--hubs-theme-panel, var(--card)) !important;
    color: var(--text) !important;
}

html[data-hubs-theme] .dash-delete-backdrop,
html[data-hubs-tone="dark"] .dash-delete-backdrop {
    background: rgba(8, 14, 28, .62) !important;
}

html[data-hubs-theme] .dash-delete-modal h2,
html[data-hubs-tone="dark"] .dash-delete-modal h2,
html[data-hubs-theme] .dash-delete-modal p strong,
html[data-hubs-tone="dark"] .dash-delete-modal p strong {
    color: color-mix(in srgb, #ef4444 84%, var(--text)) !important;
}

html[data-hubs-theme] .dash-delete-warning,
html[data-hubs-tone="dark"] .dash-delete-warning {
    border-color: color-mix(in srgb, #ef4444 42%, var(--border)) !important;
    background: color-mix(in srgb, #ef4444 13%, var(--hubs-theme-field)) !important;
    color: color-mix(in srgb, #ef4444 78%, var(--text)) !important;
}

/* Botoes realmente coloridos.
   As regras globais de tema escuro neutralizam `button` cru para evitar campos
   esbranquicados, mas isso nao pode apagar CTAs e acoes primarias. Use
   `.botao_cor` em novos botoes que devem manter cor vibrante em qualquer tema. */
html[data-hubs-theme] :where(
    .botao_cor,
    .primary-button,
    .settings-primary,
    .settings-link-button.primary,
    .finance-primary,
    .process-primary,
    .documents-primary,
    .metrics-primary,
    .goals-primary,
    .goals-secondary-action,
    .projects-primary-action,
    .tasks-primary,
    .teams-primary-button,
    .members-primary-action:not(.secondary),
    .area-primary-action,
    .dash-primary,
    .dash-actions .primary,
    .reports-actions .primary,
    .reports-presets .primary,
    .calendar-actions .primary,
    .calendar-modal .primary,
    .organization-action-button.primary,
    .ghost-button.primary,
    button.primary,
    a.primary
):not(:disabled):not([aria-disabled="true"]) {
    border-color: color-mix(in srgb, var(--blue) 72%, var(--cyan)) !important;
    background:
        radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--cyan) 40%, transparent), transparent 34%),
        linear-gradient(135deg, var(--blue), var(--cyan)) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--blue) 24%, transparent) !important;
}

html[data-hubs-theme] :where(
    .botao_cor,
    .primary-button,
    .settings-primary,
    .settings-link-button.primary,
    .finance-primary,
    .process-primary,
    .documents-primary,
    .metrics-primary,
    .goals-primary,
    .goals-secondary-action,
    .projects-primary-action,
    .tasks-primary,
    .teams-primary-button,
    .members-primary-action:not(.secondary),
    .area-primary-action,
    .dash-primary,
    .dash-actions .primary,
    .reports-actions .primary,
    .reports-presets .primary,
    .calendar-actions .primary,
    .calendar-modal .primary,
    .organization-action-button.primary,
    .ghost-button.primary,
    button.primary,
    a.primary
):not(:disabled):not([aria-disabled="true"]):where(:hover, :focus-visible) {
    filter: saturate(1.08) brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--blue) 30%, transparent) !important;
}

html[data-hubs-theme] :where(
    .secondary-button,
    .mini-button,
    .metrics-secondary-action,
    .members-primary-action.secondary
):not(:disabled):not([aria-disabled="true"]) {
    border-color: color-mix(in srgb, var(--blue) 30%, var(--border)) !important;
    background: color-mix(in srgb, var(--blue) 13%, var(--hubs-theme-field, var(--card))) !important;
    color: color-mix(in srgb, var(--blue) 82%, var(--text)) !important;
    box-shadow: none !important;
}

html[data-hubs-tone="dark"] :where(
    .secondary-button,
    .mini-button,
    .metrics-secondary-action,
    .members-primary-action.secondary
):not(:disabled):not([aria-disabled="true"]) {
    border-color: color-mix(in srgb, var(--cyan) 30%, var(--border)) !important;
    background: color-mix(in srgb, var(--blue) 16%, var(--hubs-theme-field, var(--card))) !important;
    color: color-mix(in srgb, var(--cyan) 78%, #ffffff) !important;
}

/* O quadro de Marketing é uma superfície própria.
   Como este arquivo carrega depois dos CSS das páginas, estas exceções impedem
   as regras globais de tema de pintarem uma camada por cima da malha. */
html .marketing-board-scroll,
html[data-hubs-theme] .marketing-board-scroll,
html[data-hubs-tone="dark"] .marketing-board-scroll {
    --marketing-board-width: 4600px;
    --marketing-board-height: 2900px;
    --marketing-board-grid-size: 42px;
    background: linear-gradient(145deg, var(--hubs-theme-field, #07111f), var(--hubs-theme-panel-soft, #08111f)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 0 55px rgba(0, 0, 0, 0.22) !important;
    isolation: isolate;
}

html :where(
    .marketing-board-canvas,
    .marketing-board-content,
    .marketing-connections,
    .marketing-connection-controls,
    .marketing-guide-layer,
    .marketing-guide-arrows
),
html[data-hubs-theme] :where(
    .marketing-board-canvas,
    .marketing-board-content,
    .marketing-connections,
    .marketing-connection-controls,
    .marketing-guide-layer,
    .marketing-guide-arrows
),
html[data-hubs-tone="dark"] :where(
    .marketing-board-canvas,
    .marketing-board-content,
    .marketing-connections,
    .marketing-connection-controls,
    .marketing-guide-layer,
    .marketing-guide-arrows
) {
    border-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

html .marketing-board-stage,
html[data-hubs-theme] .marketing-board-stage,
html[data-hubs-tone="dark"] .marketing-board-stage {
    width: var(--marketing-board-width, 4600px) !important;
    height: var(--marketing-board-height, 2900px) !important;
    min-width: var(--marketing-board-width, 4600px) !important;
    min-height: var(--marketing-board-height, 2900px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(236, 252, 203, 0.14) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.08), transparent 18%),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        #0b1f18 !important;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0 !important;
    background-size:
        auto,
        var(--marketing-board-grid-size, 42px) var(--marketing-board-grid-size, 42px),
        var(--marketing-board-grid-size, 42px) var(--marketing-board-grid-size, 42px),
        auto !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 0 90px rgba(0, 0, 0, 0.34),
        0 28px 70px rgba(0, 0, 0, 0.28) !important;
    outline: 0 !important;
    overflow: visible !important;
}

html[data-hubs-theme] .marketing-board-content,
html[data-hubs-tone="dark"] .marketing-board-content {
    padding: 0 !important;
    gap: 0 !important;
}

html[data-hubs-theme] .marketing-guide-card.note-amarelo,
html[data-hubs-tone="dark"] .marketing-guide-card.note-amarelo {
    border-color: rgba(15, 23, 42, 0.16) !important;
    background: #fff2a8 !important;
    color: #18202f !important;
}

html[data-hubs-theme] .marketing-guide-card.note-azul,
html[data-hubs-tone="dark"] .marketing-guide-card.note-azul {
    border-color: rgba(15, 23, 42, 0.16) !important;
    background: #cde7ff !important;
    color: #18202f !important;
}

html[data-hubs-theme] .marketing-guide-card.note-rosa,
html[data-hubs-tone="dark"] .marketing-guide-card.note-rosa {
    border-color: rgba(15, 23, 42, 0.16) !important;
    background: #ffd1e6 !important;
    color: #18202f !important;
}

html[data-hubs-theme] .marketing-guide-card.note-verde,
html[data-hubs-tone="dark"] .marketing-guide-card.note-verde {
    border-color: rgba(15, 23, 42, 0.16) !important;
    background: #cef7cf !important;
    color: #18202f !important;
}

html[data-hubs-theme] .marketing-guide-card b,
html[data-hubs-tone="dark"] .marketing-guide-card b {
    color: #111827 !important;
}

html[data-hubs-theme] .marketing-guide-card p,
html[data-hubs-tone="dark"] .marketing-guide-card p {
    color: #334155 !important;
}

html[data-hubs-theme] .marketing-guide-card small,
html[data-hubs-tone="dark"] .marketing-guide-card small {
    color: #475569 !important;
}

/* Ultima camada de seguranca para CTAs reais.
   Exemplos-base: Home > "Criar organizacao" e "+ Criar rapido".
   Esta regra fica no fim do arquivo e usa seletor explicito, porque as regras
   globais antigas do dark mode usam `button` + `!important` e podem apagar
   botoes coloridos quando a especificidade fica baixa demais. */
html[data-hubs-theme] button.primary-button,
html[data-hubs-theme] a.primary-button,
html[data-hubs-theme] .topbar-actions button.primary-button,
html[data-hubs-theme] .hero-actions button.primary-button,
html[data-hubs-theme] .hero-actions a.primary-button,
html[data-hubs-theme] .botao_cor,
html[data-hubs-tone="dark"] button.primary-button,
html[data-hubs-tone="dark"] a.primary-button,
html[data-hubs-tone="dark"] .topbar-actions button.primary-button,
html[data-hubs-tone="dark"] .hero-actions button.primary-button,
html[data-hubs-tone="dark"] .hero-actions a.primary-button,
html[data-hubs-tone="dark"] .botao_cor {
    appearance: none !important;
    border: 1px solid color-mix(in srgb, var(--blue, #0145f2) 48%, var(--cyan, #4debff) 20%) !important;
    background-color: var(--blue, #0145f2) !important;
    background: linear-gradient(135deg, var(--blue, #0145f2), var(--cyan, #4debff)) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--blue, #0145f2) 24%, transparent) !important;
}

html[data-hubs-theme] button.primary-button:hover,
html[data-hubs-theme] a.primary-button:hover,
html[data-hubs-theme] .botao_cor:hover,
html[data-hubs-theme] button.primary-button:focus-visible,
html[data-hubs-theme] a.primary-button:focus-visible,
html[data-hubs-theme] .botao_cor:focus-visible,
html[data-hubs-tone="dark"] button.primary-button:hover,
html[data-hubs-tone="dark"] a.primary-button:hover,
html[data-hubs-tone="dark"] .botao_cor:hover,
html[data-hubs-tone="dark"] button.primary-button:focus-visible,
html[data-hubs-tone="dark"] a.primary-button:focus-visible,
html[data-hubs-tone="dark"] .botao_cor:focus-visible {
    background-color: var(--blue, #0145f2) !important;
    background: linear-gradient(135deg, var(--cyan, #4debff), var(--blue, #0145f2)) !important;
    color: #ffffff !important;
    filter: saturate(1.08) brightness(1.04);
}

.botao_cor,
button.botao_cor,
a.botao_cor,
button.primary-button.botao_cor,
a.primary-button.botao_cor,
.topbar-actions button.primary-button.botao_cor,
.hero-actions button.primary-button.botao_cor {
    appearance: none !important;
    position: relative;
    z-index: 2;
    border: 1px solid color-mix(in srgb, var(--blue, #0145f2) 48%, var(--cyan, #4debff) 20%) !important;
    background-color: var(--blue, #0145f2) !important;
    background: linear-gradient(135deg, var(--blue, #0145f2), var(--cyan, #4debff)) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--blue, #0145f2) 25%, transparent) !important;
}

.botao_cor:hover,
button.botao_cor:hover,
a.botao_cor:hover,
button.primary-button.botao_cor:hover,
a.primary-button.botao_cor:hover,
.botao_cor:focus-visible,
button.botao_cor:focus-visible,
a.botao_cor:focus-visible,
button.primary-button.botao_cor:focus-visible,
a.primary-button.botao_cor:focus-visible {
    background-color: var(--blue, #0145f2) !important;
    background: linear-gradient(135deg, var(--cyan, #4debff), var(--blue, #0145f2)) !important;
    color: #ffffff !important;
    filter: saturate(1.08) brightness(1.04);
}

html[data-hubs-tone="dark"] .members-permissions-note,
html[data-hubs-theme="black-blue"] .members-permissions-note,
html[data-hubs-theme="black-sakura"] .members-permissions-note,
html[data-hubs-theme="golden-wind"] .members-permissions-note {
    border-color: var(--border) !important;
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 34%),
        linear-gradient(145deg, var(--hubs-theme-panel), var(--hubs-theme-panel-soft)) !important;
    color: var(--text) !important;
}

html[data-hubs-tone="dark"] .members-permissions-note span,
html[data-hubs-theme="black-blue"] .members-permissions-note span,
html[data-hubs-theme="black-sakura"] .members-permissions-note span,
html[data-hubs-theme="golden-wind"] .members-permissions-note span {
    border-color: var(--border) !important;
    background: color-mix(in srgb, var(--hubs-theme-field, var(--card)) 88%, var(--blue) 7%) !important;
    color: var(--muted) !important;
    box-shadow: none !important;
}

html[data-hubs-tone="dark"] .members-permissions-note b,
html[data-hubs-theme="black-blue"] .members-permissions-note b,
html[data-hubs-theme="black-sakura"] .members-permissions-note b,
html[data-hubs-theme="golden-wind"] .members-permissions-note b {
    color: var(--text) !important;
}

html:not([data-hubs-tone="dark"]) .marketing-board-scroll {
    background:
        radial-gradient(circle at 80% 8%, rgba(14, 148, 106, .14), transparent 32%),
        linear-gradient(145deg, #c8dbcf, #e7f0e9) !important;
    box-shadow:
        inset 0 0 0 1px rgba(47, 87, 67, .2),
        inset 0 0 42px rgba(47, 87, 67, .18),
        0 22px 60px rgba(31, 61, 45, .12) !important;
}

html:not([data-hubs-tone="dark"]) .marketing-board-stage {
    border-color: rgba(32, 79, 57, .32) !important;
    background:
        linear-gradient(rgba(236, 252, 241, .105) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236, 252, 241, .085) 1px, transparent 1px),
        radial-gradient(circle at 76% 9%, rgba(89, 132, 103, .22), transparent 28%),
        linear-gradient(145deg, #4f725f 0%, #355b48 48%, #264938 100%) !important;
    background-position: 0 0, 0 0, 0 0, 0 0 !important;
    background-size:
        var(--marketing-board-grid-size, 42px) var(--marketing-board-grid-size, 42px),
        var(--marketing-board-grid-size, 42px) var(--marketing-board-grid-size, 42px),
        auto,
        auto !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .13),
        inset 0 0 52px rgba(21, 49, 36, .22),
        0 22px 48px rgba(31, 61, 45, .16) !important;
}

html:not([data-hubs-tone="dark"]) .marketing-board-scroll.is-panning .marketing-board-stage {
    background:
        linear-gradient(rgba(236, 252, 241, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236, 252, 241, .065) 1px, transparent 1px),
        #355b48 !important;
    background-position: 0 0, 0 0, 0 0 !important;
    background-size:
        var(--marketing-board-grid-size, 42px) var(--marketing-board-grid-size, 42px),
        var(--marketing-board-grid-size, 42px) var(--marketing-board-grid-size, 42px),
        auto !important;
    box-shadow: none !important;
}

html:not([data-hubs-tone="dark"]) .marketing-board-stage .marketing-note {
    --marketing-note-bg: color-mix(in srgb, #fbfcf8 84%, var(--marketing-trim) 16%);
    --marketing-note-bg-soft: color-mix(in srgb, #fbfcf8 72%, var(--marketing-trim) 28%);
    --marketing-note-text: #172033;
    --marketing-note-muted: color-mix(in srgb, #172033 82%, var(--marketing-trim) 18%);
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--marketing-trim) 28%, transparent), transparent 38%) padding-box,
        linear-gradient(145deg, var(--marketing-note-bg), var(--marketing-note-bg-soft)) padding-box,
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--marketing-trim) 96%, #ffffff 4%),
            color-mix(in srgb, var(--marketing-trim) 58%, transparent) 34%,
            color-mix(in srgb, var(--marketing-trim) 92%, #ffffff 4%) 64%,
            color-mix(in srgb, var(--marketing-trim) 28%, transparent)
        ) border-box !important;
    box-shadow:
        0 18px 34px rgba(15, 23, 42, .2),
        0 0 0 1px color-mix(in srgb, var(--marketing-trim) 48%, transparent),
        0 0 28px color-mix(in srgb, var(--marketing-trim) 22%, transparent),
        inset 0 0 0 1px rgba(255, 255, 255, .72),
        inset 0 18px 34px color-mix(in srgb, var(--marketing-trim) 9%, transparent) !important;
}

html:not([data-hubs-tone="dark"]) .marketing-board-stage .marketing-note.note-branco {
    --marketing-note-bg: #fbfcff;
    --marketing-note-bg-soft: color-mix(in srgb, #fbfcff 88%, #94a3b8 12%);
}

html:not([data-hubs-tone="dark"]) .marketing-board-stage .marketing-note::before {
    opacity: .9 !important;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--marketing-trim) 42%, transparent)) !important;
}

html:not([data-hubs-tone="dark"]) .marketing-board-stage .marketing-note header {
    border-bottom-color: color-mix(in srgb, var(--marketing-trim) 50%, rgba(15, 23, 42, .18)) !important;
}

html:not([data-hubs-tone="dark"]) .marketing-board-stage .marketing-note header b {
    color: color-mix(in srgb, var(--marketing-trim) 58%, #172033) !important;
}

html:not([data-hubs-tone="dark"]) .marketing-board-stage .marketing-note-actions button {
    border-color: color-mix(in srgb, var(--marketing-trim) 38%, rgba(15, 23, 42, .16)) !important;
    background: color-mix(in srgb, #ffffff 70%, var(--marketing-trim) 30%) !important;
    color: color-mix(in srgb, #172033 82%, var(--marketing-trim) 18%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 14px rgba(15, 23, 42, .1) !important;
}

html:not([data-hubs-tone="dark"]) .marketing-board-stage .marketing-note-actions .danger {
    border-color: color-mix(in srgb, #ef4444 42%, rgba(15, 23, 42, .12)) !important;
    background: color-mix(in srgb, #ffffff 72%, #ef4444 28%) !important;
    color: #b91c1c !important;
}

html[data-hubs-theme] .marketing-plan-action,
html[data-hubs-theme] .marketing-board-create-note,
html[data-hubs-tone="dark"] .marketing-plan-action,
html[data-hubs-tone="dark"] .marketing-board-create-note,
html .marketing-plan-action,
html .marketing-board-create-note {
    border-color: color-mix(in srgb, var(--blue, #0145f2) 42%, var(--cyan, #4debff) 26%) !important;
    background-color: var(--blue, #0145f2) !important;
    background: linear-gradient(135deg, var(--blue, #0145f2), var(--cyan, #4debff)) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 32px color-mix(in srgb, var(--blue, #0145f2) 22%, transparent) !important;
}

html:not([data-hubs-tone="dark"]) .marketing-reference-actions button {
    border-color: color-mix(in srgb, var(--blue, #2563eb) 46%, #d7e3f4) !important;
    background: linear-gradient(135deg, #eaf4ff, color-mix(in srgb, var(--blue, #2563eb) 18%, #ffffff)) !important;
    color: color-mix(in srgb, var(--blue, #2563eb) 82%, #0f172a) !important;
    box-shadow: 0 8px 16px rgba(37, 99, 235, .12) !important;
}

html:not([data-hubs-tone="dark"]) .marketing-reference-actions button.danger {
    border-color: color-mix(in srgb, #ef4444 54%, #fee2e2) !important;
    background: linear-gradient(135deg, #fff1f2, #ffe4e6) !important;
    color: #b91c1c !important;
    box-shadow: 0 8px 16px rgba(239, 68, 68, .12) !important;
}

html[data-hubs-theme="black-blue"] .marketing-board-scroll,
html[data-hubs-theme="black-sakura"] .marketing-board-scroll,
html[data-hubs-theme="golden-wind"] .marketing-board-scroll,
html[data-hubs-tone="dark"] .marketing-board-scroll {
    background: linear-gradient(145deg, var(--hubs-theme-field, #07111f), var(--hubs-theme-panel-soft, #08111f)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 0 55px rgba(0, 0, 0, 0.22) !important;
}

html[data-hubs-theme="black-blue"] .marketing-board-stage,
html[data-hubs-theme="black-sakura"] .marketing-board-stage,
html[data-hubs-theme="golden-wind"] .marketing-board-stage,
html[data-hubs-tone="dark"] .marketing-board-stage {
    border-color: rgba(236, 252, 203, 0.14) !important;
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.08), transparent 18%),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        #0b1f18 !important;
    background-position: 0 0, 0 0, 0 0, 0 0 !important;
    background-size:
        auto,
        var(--marketing-board-grid-size, 42px) var(--marketing-board-grid-size, 42px),
        var(--marketing-board-grid-size, 42px) var(--marketing-board-grid-size, 42px),
        auto !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 0 90px rgba(0, 0, 0, 0.34),
        0 28px 70px rgba(0, 0, 0, 0.28) !important;
}

html[data-hubs-tone="dark"] :where(
    .botao_cor,
    button.primary-button,
    a.primary-button,
    .settings-primary,
    .settings-link-button.primary,
    .finance-primary,
    .process-primary,
    .documents-primary,
    .metrics-primary,
    .goals-primary,
    .projects-primary-action,
    .tasks-primary,
    .teams-primary-button,
    .members-primary-action:not(.secondary),
    .area-primary-action,
    .dash-primary,
    .dash-actions .primary,
    .reports-actions .primary,
    .reports-presets .primary,
    .calendar-actions .primary,
    .calendar-modal .primary,
    .marketing-plan-action,
    .marketing-board-create-note
) {
    background:
        linear-gradient(rgba(0, 0, 0, .10), rgba(0, 0, 0, .10)),
        linear-gradient(135deg, var(--blue, #0145f2), var(--cyan, #4debff)) !important;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--blue, #0145f2) 20%, transparent) !important;
}

html[data-hubs-tone="dark"] :where(
    .botao_cor,
    button.primary-button,
    a.primary-button,
    .settings-primary,
    .settings-link-button.primary,
    .finance-primary,
    .process-primary,
    .documents-primary,
    .metrics-primary,
    .goals-primary,
    .projects-primary-action,
    .tasks-primary,
    .teams-primary-button,
    .members-primary-action:not(.secondary),
    .area-primary-action,
    .dash-primary,
    .dash-actions .primary,
    .reports-actions .primary,
    .reports-presets .primary,
    .calendar-actions .primary,
    .calendar-modal .primary,
    .marketing-plan-action,
    .marketing-board-create-note
):where(:hover, :focus-visible) {
    background:
        linear-gradient(rgba(0, 0, 0, .06), rgba(0, 0, 0, .06)),
        linear-gradient(135deg, var(--cyan, #4debff), var(--blue, #0145f2)) !important;
}

.marketing-board-scroll.is-panning .marketing-board-stage,
.marketing-board-scroll.is-panning .marketing-board-stage *,
.marketing-board-scroll.is-panning .marketing-connections,
.marketing-board-scroll.is-panning .marketing-connection-line,
.marketing-board-scroll.is-panning .marketing-connection-head {
    transition: none !important;
}

.marketing-board-scroll.is-panning .marketing-note,
.marketing-board-scroll.is-panning .marketing-free-comment,
.marketing-board-scroll.is-panning .marketing-connection-line,
.marketing-board-scroll.is-panning .marketing-connection-head,
.marketing-board-scroll.is-panning .marketing-note::before,
.marketing-board-scroll.is-panning .marketing-note-drag-strip,
.marketing-board-scroll.is-panning .marketing-free-comment-toolbar {
    filter: none !important;
    box-shadow: none !important;
}

.marketing-board-scroll.is-panning .marketing-connections {
    shape-rendering: optimizeSpeed !important;
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    html.hubs-theme-switching-mobile,
    html.hubs-theme-switching-mobile body,
    html.hubs-theme-switching-mobile .app-shell,
    html.hubs-theme-switching-mobile .main-content,
    html.hubs-theme-switching-mobile .central-shell,
    html.hubs-theme-switching-mobile .central-main {
        transition: background-color 80ms linear, color 80ms linear, border-color 80ms linear !important;
    }

    html.hubs-theme-switching-mobile *,
    html.hubs-theme-switching-mobile *::before,
    html.hubs-theme-switching-mobile *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 80ms !important;
        transition-delay: 0ms !important;
        transition-property: color, background-color, border-color, opacity, transform !important;
    }

    html.hubs-theme-switching-mobile :where(
        .settings-card,
        .central-card,
        .central-hero,
        .central-sidebar,
        .sidebar,
        .topbar,
        .home-hero,
        .overview-card,
        .task-card,
        .project-card,
        .metric-card,
        .goal-card,
        .team-card,
        .member-card,
        .calendar-board,
        .calendar-agenda,
        .dashboard-card,
        .dash-card,
        .finance-card,
        .reports-panel,
        .area-section,
        .marketing-board-scroll,
        .marketing-board-stage,
        .marketing-note
    ) {
        box-shadow: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html.hubs-theme-switching-mobile :where(
        .marketing-board-stage,
        .marketing-board-scroll,
        .central-hero,
        .home-hero,
        .settings-hero
    ) {
        background-attachment: scroll !important;
    }
}

html[data-device-profile="mobile"],
html[data-device-profile="tablet"] {
    --shadow: 0 14px 32px rgba(2, 6, 23, 0.18);
    --shadow-soft: 0 8px 20px rgba(2, 6, 23, 0.14);
}

html[data-device-profile="mobile"] *,
html[data-device-profile="mobile"] *::before,
html[data-device-profile="mobile"] *::after,
html[data-device-profile="tablet"] *,
html[data-device-profile="tablet"] *::before,
html[data-device-profile="tablet"] *::after {
    transition-duration: 120ms !important;
    animation-duration: 220ms !important;
}

html[data-device-profile="mobile"] :where(
    .sidebar,
    .central-sidebar,
    .topbar,
    .settings-modal-backdrop,
    .calendar-modal-backdrop,
    .task-modal-backdrop,
    .finance-modal-backdrop,
    .dash-modal-backdrop,
    .area-modal-backdrop,
    .marketing-board-toolbar,
    .marketing-board-scroll,
    .marketing-board-stage,
    .marketing-note,
    .central-card,
    .settings-card,
    .home-hero
),
html[data-device-profile="tablet"] :where(
    .settings-modal-backdrop,
    .calendar-modal-backdrop,
    .task-modal-backdrop,
    .finance-modal-backdrop,
    .dash-modal-backdrop,
    .area-modal-backdrop,
    .marketing-board-scroll,
    .marketing-board-stage
) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-device-profile="mobile"] :where(
    .marketing-board-scroll,
    .marketing-board-stage,
    .marketing-note,
    .marketing-free-comment,
    .marketing-connection-line,
    .marketing-connection-head
) {
    filter: none !important;
}

html[data-reduce-motion="1"] *,
html[data-reduce-motion="1"] *::before,
html[data-reduce-motion="1"] *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
}

html[data-reduce-motion="1"] :where(
    .marketing-board-scroll,
    .marketing-board-stage,
    .marketing-note,
    .marketing-free-comment,
    .process-loading-orbit,
    .process-loading-orbit::before,
    .tutorial-card,
    .hubs-tutorial-card
) {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* =========================================================
   Vantara Hubs - densidade operacional desktop

   Objetivo: a Hubs deve parecer ferramenta de trabalho, nao
   apresentacao. Desktop recebe mais contexto por viewport;
   mobile preserva escala de toque.
   ========================================================= */

@media (min-width: 1024px) {
    :root {
        --hubs-density-page-x: clamp(14px, 1.35vw, 20px);
        --hubs-density-page-y: 14px;
        --hubs-density-gap-xs: 6px;
        --hubs-density-gap-sm: 8px;
        --hubs-density-gap-md: 10px;
        --hubs-density-gap-lg: 12px;
        --hubs-density-card-pad: 13px;
        --hubs-density-card-pad-lg: 16px;
        --hubs-density-radius-card: 12px;
        --hubs-density-radius-panel: 14px;
        --hubs-density-control-h: 34px;
        --hubs-density-control-pad-x: 11px;
        --hubs-density-title: clamp(1.05rem, 1.5vw, 1.42rem);
        --hubs-density-hero-title: clamp(1.65rem, 3vw, 2.75rem);
        --hubs-density-subtitle: .76rem;
        --hubs-density-body: .68rem;
        --hubs-density-label: .56rem;
        --hubs-density-kpi: clamp(1.22rem, 1.9vw, 1.72rem);
        --hubs-density-shadow: 0 10px 28px rgba(2, 6, 23, .14);
        --hubs-density-shadow-soft: 0 7px 18px rgba(2, 6, 23, .1);
    }

    :where(.main-content) {
        padding: var(--hubs-density-page-y) var(--hubs-density-page-x) 22px !important;
    }

    :where(.topbar) {
        top: 10px !important;
        min-height: 54px !important;
        margin-bottom: 12px !important;
        padding: 10px 12px !important;
        gap: var(--hubs-density-gap-lg) !important;
        border-radius: var(--hubs-density-radius-panel) !important;
        box-shadow: var(--hubs-density-shadow-soft) !important;
    }

    :where(.topbar-left h1, .topbar-left h2, .settings-topbar h1, .central-main h1) {
        font-size: var(--hubs-density-title) !important;
        line-height: 1.08 !important;
        letter-spacing: -.045em !important;
    }

    :where(.page-kicker, .section-label, .sidebar-section-label, .widget-type, .area-beta-heading span) {
        font-size: var(--hubs-density-label) !important;
        letter-spacing: .105em !important;
    }

    :where(.topbar-actions) {
        gap: 7px !important;
    }

    :where(.search-box) {
        width: min(330px, 28vw) !important;
        height: var(--hubs-density-control-h) !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
    }

    :where(
        .search-box input,
        .main-content input,
        .main-content select,
        .main-content textarea,
        .dash-modal input,
        .dash-modal select,
        .dash-modal textarea,
        .organization-modal-card input,
        .organization-modal-card select,
        .organization-modal-card textarea,
        .members-modal input,
        .members-modal select,
        .members-modal textarea,
        .teams-modal-card input,
        .teams-modal-card select,
        .teams-modal-card textarea,
        .settings-modal input,
        .settings-modal select,
        .settings-modal textarea,
        .projects-modal input,
        .projects-modal select,
        .projects-modal textarea,
        .calendar-modal input,
        .calendar-modal select,
        .calendar-modal textarea,
        .metric-modal input,
        .metric-modal select,
        .metric-modal textarea,
        .goal-modal input,
        .goal-modal select,
        .goal-modal textarea,
        .process-modal input,
        .process-modal select,
        .process-modal textarea,
        .documents-modal input,
        .documents-modal select,
        .documents-modal textarea,
        .finance-modal input,
        .finance-modal select,
        .finance-modal textarea,
        .area-modal input,
        .area-modal select,
        .area-modal textarea
    ) {
        font-size: .68rem !important;
    }

    :where(
        .primary-button,
        .secondary-button,
        .ghost-button,
        .mini-button,
        .topbar-actions button,
        .hero-actions button,
        .hero-actions a,
        .dash-actions button,
        .project-card footer button,
        .task-actions button,
        .metric-actions button,
        .goal-actions button,
        .member-actions button,
        .process-actions button,
        .process-actions a,
        .calendar-actions button,
        .agenda-actions button,
        .finance-actions button,
        .documents-actions button
    ) {
        min-height: var(--hubs-density-control-h) !important;
        height: var(--hubs-density-control-h) !important;
        padding: 0 var(--hubs-density-control-pad-x) !important;
        border-radius: 9px !important;
        font-size: .66rem !important;
        font-weight: 820 !important;
    }

    :where(.profile-chip) {
        height: 36px !important;
        padding: 4px 9px 4px 4px !important;
        border-radius: 10px !important;
    }

    :where(.profile-avatar) {
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
        font-size: .68rem !important;
    }

    :where(.profile-chip strong) {
        font-size: .66rem !important;
    }

    :where(.profile-chip span) {
        font-size: .56rem !important;
    }

    :where(.hero-section) {
        grid-template-columns: minmax(0, 1.7fr) minmax(260px, .55fr) !important;
        gap: var(--hubs-density-gap-lg) !important;
    }

    :where(.hero-copy) {
        min-height: 210px !important;
        padding: 20px 22px !important;
        border-radius: var(--hubs-density-radius-panel) !important;
        box-shadow: var(--hubs-density-shadow-soft) !important;
    }

    .hero-copy::after {
        width: 190px !important;
        height: 190px !important;
        right: -74px !important;
        bottom: -78px !important;
    }

    :where(.hero-badge) {
        padding: 4px 8px !important;
        border-radius: 999px !important;
        font-size: .58rem !important;
    }

    :where(.hero-copy h1) {
        max-width: 700px !important;
        margin-top: 14px !important;
        font-size: var(--hubs-density-hero-title) !important;
        line-height: 1 !important;
        letter-spacing: -.075em !important;
    }

    :where(.hero-copy p) {
        max-width: 680px !important;
        margin-top: 11px !important;
        font-size: var(--hubs-density-subtitle) !important;
        line-height: 1.48 !important;
    }

    :where(.hero-actions) {
        gap: 8px !important;
        margin-top: 16px !important;
    }

    :where(.hero-panel) {
        padding: 15px !important;
        border-radius: var(--hubs-density-radius-panel) !important;
        box-shadow: var(--hubs-density-shadow-soft) !important;
    }

    :where(.health-ring) {
        width: 118px !important;
        height: 118px !important;
        margin: 16px auto !important;
    }

    :where(.health-ring::before) {
        inset: 9px !important;
    }

    :where(.health-ring-inner strong) {
        font-size: 1.32rem !important;
    }

    :where(.health-ring-inner span) {
        font-size: .62rem !important;
    }

    :where(.hero-panel-grid) {
        gap: 7px !important;
    }

    :where(.hero-panel-grid div) {
        padding: 9px !important;
        border-radius: 10px !important;
    }

    :where(.hero-panel-grid span) {
        font-size: .57rem !important;
    }

    :where(.hero-panel-grid strong) {
        margin-top: 3px !important;
        font-size: .95rem !important;
    }

    :where(.kpi-grid, .content-grid, .dash-content, .dashboard-grid, .org-grid, .tasks-grid, .projects-grid, .metrics-grid, .goals-grid, .teams-grid, .members-grid, .finance-grid, .calendar-layout, .documents-grid) {
        gap: var(--hubs-density-gap-lg) !important;
    }

    :where(.kpi-grid) {
        margin-top: 12px !important;
    }

    :where(.content-grid) {
        margin-top: 12px !important;
    }

    :where(
        .card,
        .kpi-card,
        .organization-card,
        .task-card,
        .project-card,
        .metric-card,
        .goal-card,
        .team-card,
        .member-card,
        .document-card,
        .finance-card,
        .calendar-card,
        .settings-card,
        .overview-card,
        .area-card,
        .dev-card,
        .marketing-context-panel article,
        .central-card,
        .central-hero
    ) {
        padding: var(--hubs-density-card-pad) !important;
        border-radius: var(--hubs-density-radius-card) !important;
        box-shadow: var(--hubs-density-shadow-soft) !important;
    }

    :where(.kpi-card) {
        min-height: 118px !important;
    }

    :where(.kpi-icon) {
        width: 28px !important;
        height: 28px !important;
        margin-bottom: 9px !important;
        border-radius: 8px !important;
        font-size: .66rem !important;
    }

    :where(.kpi-card span) {
        font-size: .64rem !important;
    }

    :where(.kpi-card strong) {
        margin-top: 4px !important;
        font-size: var(--hubs-density-kpi) !important;
        letter-spacing: -.065em !important;
    }

    :where(.kpi-card p) {
        margin-top: 3px !important;
        font-size: .62rem !important;
        line-height: 1.35 !important;
    }

    :where(.card-header) {
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    :where(.card-header h2, .card-header h3, .settings-card h2, .area-section h2, .calendar-board h2, .finance-card h2, .documents-panel h2) {
        font-size: .9rem !important;
        line-height: 1.15 !important;
        letter-spacing: -.035em !important;
    }

    :where(.card-header a, .card-badge, .alert-count, .status-pill) {
        min-height: 21px !important;
        padding: 0 7px !important;
        border-radius: 7px !important;
        font-size: .56rem !important;
    }

    :where(.sidebar) {
        width: 248px !important;
        padding: 16px !important;
        border-radius: 15px !important;
    }

    :where(.main-content) {
        margin-left: 280px !important;
    }

    :where(.sidebar-nav, .central-sidebar-nav) {
        gap: 5px !important;
    }

    :where(.nav-item) {
        min-height: 36px !important;
        padding: 8px 10px !important;
        border-radius: 9px !important;
        font-size: .72rem !important;
    }

    :where(.sidebar-central-button, .sidebar-logout) {
        min-height: 36px !important;
        border-radius: 10px !important;
        font-size: .68rem !important;
    }

    :where(.dash-toolbar, .dash-head) {
        padding: 13px 15px !important;
        border-radius: var(--hubs-density-radius-panel) !important;
        gap: var(--hubs-density-gap-lg) !important;
    }

    :where(.dash-head) {
        align-items: center !important;
    }

    :where(.dash-head h1) {
        margin: 3px 0 4px !important;
        font-size: clamp(1.12rem, 1.85vw, 1.55rem) !important;
        line-height: 1.05 !important;
    }

    :where(.dash-head p) {
        font-size: .64rem !important;
        line-height: 1.42 !important;
    }

    :where(.dash-grid) {
        gap: 10px !important;
    }

    :where(.dash-widget) {
        min-height: 138px !important;
        padding: 13px !important;
        border-radius: 12px !important;
    }

    :where(.widget-head h2) {
        font-size: .68rem !important;
    }

    :where(.widget-kpi) {
        margin-top: 18px !important;
    }

    :where(.widget-kpi strong) {
        font-size: 1.55rem !important;
    }

    :where(.widget-chart, .widget-bars) {
        height: 92px !important;
        margin-top: 11px !important;
    }

    :where(.widget-progress-ring, .widget-pie-chart) {
        width: 86px !important;
        height: 86px !important;
    }

    .widget-progress-ring::before {
        width: 66px !important;
        height: 66px !important;
    }

    :where(.dash-modal, .organization-modal-card, .members-modal, .teams-modal-card, .settings-modal, .projects-modal, .calendar-modal, .metric-modal, .goal-modal, .process-modal, .documents-modal, .finance-modal, .area-modal) {
        border-radius: 14px !important;
    }

    :where(.dash-modal > header, .organization-modal-card > header, .members-modal > header, .teams-modal-card > header, .settings-modal > header, .projects-modal > header, .calendar-modal > header, .metric-modal > header, .goal-modal > header, .process-modal > header, .documents-modal > header, .finance-modal > header, .area-modal > header) {
        padding: 15px 16px !important;
    }

    :where(.dash-modal form, .members-modal form, .teams-modal-card form, .settings-modal form, .projects-modal form, .calendar-modal form, .metric-modal form, .goal-modal form, .process-modal form, .finance-modal form, .area-modal form) {
        gap: 10px !important;
        padding: 16px !important;
    }

    :where(.central-content, .settings-content, .organizations-content, .reports-content, .metrics-content, .goals-content, .finance-content, .calendar-content, .tasks-content, .projects-content, .processes-content, .members-content, .teams-content, .documents-content) {
        gap: 12px !important;
    }

    :where(.central-hero, .organizations-page-header, .settings-hero, .reports-hero, .area-beta-hero) {
        min-height: 0 !important;
        padding: 17px 19px !important;
        gap: 14px !important;
        border-radius: var(--hubs-density-radius-panel) !important;
    }

    :where(.central-hero h1, .organizations-page-header h1, .settings-hero h1, .reports-hero h1, .area-beta-hero h1) {
        max-width: 780px !important;
        margin: 4px 0 7px !important;
        font-size: clamp(1.15rem, 2.1vw, 1.72rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -.058em !important;
    }

    :where(.central-hero p, .organizations-page-header p, .settings-hero p, .reports-hero p, .area-beta-hero p) {
        max-width: 760px !important;
        margin-top: 7px !important;
        font-size: .68rem !important;
        line-height: 1.48 !important;
    }

    :where(.central-sidebar-brand .brand-mark) {
        height: 50px !important;
        max-width: 172px !important;
    }

    :where(.central-sidebar-nav) {
        margin-top: 12px !important;
        gap: 6px !important;
    }

    :where(.central-nav-item) {
        min-height: 36px !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
        font-size: .7rem !important;
    }

    :where(.central-nav-item span) {
        width: 22px !important;
        height: 22px !important;
        border-radius: 7px !important;
        font-size: .62rem !important;
    }

    :where(.central-sidebar-note) {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    :where(.central-sidebar-note strong) {
        margin-top: 6px !important;
        font-size: .72rem !important;
    }

    :where(.central-sidebar-note p) {
        margin-top: 6px !important;
        font-size: .58rem !important;
        line-height: 1.42 !important;
    }

    :where(.central-feed-header) {
        align-items: end !important;
        gap: 10px !important;
    }

    :where(.central-feed-header h2, .central-panel h2) {
        font-size: 1rem !important;
        line-height: 1.12 !important;
        letter-spacing: -.04em !important;
    }

    :where(.central-feed-header p, .central-panel p, .central-card p) {
        font-size: .65rem !important;
        line-height: 1.42 !important;
    }

    :where(.central-feed-summary) {
        gap: 7px !important;
    }

    :where(.central-feed-summary span, .central-badge, .central-meta span, .organizations-list-meta span) {
        min-height: 22px !important;
        padding: 0 7px !important;
        border-radius: 7px !important;
        font-size: .55rem !important;
    }

    :where(.central-card, .organizations-list-item) {
        gap: 11px !important;
        padding: 11px 12px !important;
        border-radius: 12px !important;
    }

    :where(.central-logo, .organizations-list-logo) {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        font-size: .72rem !important;
    }

    :where(.central-title h3, .organizations-list-heading h3) {
        font-size: .78rem !important;
        line-height: 1.16 !important;
    }

    :where(.organizations-summary) {
        min-width: 105px !important;
        padding: 11px !important;
        border-radius: 10px !important;
    }

    :where(.organizations-summary strong, .central-count) {
        font-size: 1.32rem !important;
        line-height: 1 !important;
    }

    :where(.organizations-toolbar) {
        gap: 9px !important;
        margin-top: 11px !important;
    }

    :where(.organizations-list) {
        gap: 8px !important;
        margin-top: 11px !important;
    }

    :where(.organization-choice-grid, .organization-project-list, .organization-wizard-grid, .organization-wizard-grid.compact, .organization-wizard-grid.tags, .dash-widget-options) {
        gap: 10px !important;
    }

    :where(.organization-choice-card, .organization-project-card, .organization-wizard-card, .dash-widget-options button, .dash-wizard-choice, .dash-indicator-origin button) {
        min-height: 112px !important;
        padding: 13px !important;
        border-radius: 12px !important;
    }

    :where(.organization-choice-illustration, .organization-wizard-art, .dash-widget-option-art) {
        width: 96px !important;
        height: 58px !important;
        border-radius: 13px !important;
    }

    :where(.organization-choice-card strong, .organization-wizard-card strong, .dash-widget-options b, .dash-wizard-choice b, .dash-indicator-origin b) {
        font-size: .78rem !important;
        line-height: 1.18 !important;
    }

    :where(.organization-choice-card p, .organization-wizard-card small, .organization-wizard-card em, .dash-widget-options span, .dash-wizard-choice > span:not(.dash-widget-option-top), .dash-indicator-origin span) {
        margin-top: 6px !important;
        font-size: .58rem !important;
        line-height: 1.42 !important;
    }

    :where(table, .reports-table-wrap table, .finance-table, .spreadsheet-table) {
        font-size: .66rem !important;
    }

    :where(th, td) {
        padding: 7px 8px !important;
    }

    :where(.empty-state, .dash-empty, .organization-loading, .organization-page-empty, .organization-page-error, .area-empty) {
        padding: 24px 16px !important;
        border-radius: 12px !important;
    }
}

@media (min-width: 1280px) {
    :where(.content-grid) {
        grid-template-columns: minmax(0, 1.45fr) minmax(300px, .72fr) minmax(300px, .78fr) !important;
    }

    :where(.dash-grid) {
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    }

    :where(.dash-widget) {
        grid-column: span 2 !important;
    }

    :where(.dash-widget.width-1) { grid-column: span 1 !important; }
    :where(.dash-widget.width-2) { grid-column: span 2 !important; }
    :where(.dash-widget.width-3) { grid-column: span 3 !important; }
    :where(.dash-widget.width-4) { grid-column: span 4 !important; }
    :where(.dash-widget.width-5) { grid-column: span 5 !important; }
    :where(.dash-widget.width-6) { grid-column: span 6 !important; }
}

/* Estados globais de carregamento, vazio e falha.
   Mantem cards gerados por paginas antigas coerentes com qualquer tema escuro. */
html[data-hubs-tone="dark"] :where(
    .organization-loading,
    .empty-state,
    .hubs-skeleton-card,
    [class$="-loading"],
    [class$="-empty"],
    [class$="-error"],
    [class$="-erro"],
    [class*="-loading "],
    [class*="-empty "],
    [class*="-error "],
    [class*="-erro "],
    [class*="-loading-"],
    [class*="-empty-"],
    [class*="-error-"],
    [class*="-erro-"]
):not([class*="backdrop"]):not([class*="spinner"]):not([class*="orbit"]):not([class*="icon"]):not([class*="dot"]):not([class*="bar"]):not([class*="line"]) {
    border-color: color-mix(in srgb, var(--blue) 18%, var(--border)) !important;
    background:
        radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 34%),
        linear-gradient(145deg,
            color-mix(in srgb, var(--hubs-theme-panel) 88%, #020617),
            color-mix(in srgb, var(--hubs-theme-panel-soft) 82%, #020617)
        ) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-soft) !important;
}

html[data-hubs-tone="dark"] :where(
    [class$="-error"],
    [class$="-erro"],
    [class*="-error "],
    [class*="-erro "],
    [class*="-error-"],
    [class*="-erro-"]
):not([class*="backdrop"]):not([class*="icon"]) {
    border-color: color-mix(in srgb, #ef4444 34%, var(--border)) !important;
    background:
        radial-gradient(circle at 88% 8%, color-mix(in srgb, #ef4444 10%, transparent), transparent 36%),
        linear-gradient(145deg,
            color-mix(in srgb, var(--hubs-theme-panel) 88%, #020617),
            color-mix(in srgb, var(--hubs-theme-panel-soft) 82%, #020617)
        ) !important;
}

html[data-hubs-tone="dark"] :where(
    .organization-loading,
    .empty-state,
    [class$="-loading"],
    [class$="-empty"],
    [class$="-error"],
    [class$="-erro"],
    [class*="-loading "],
    [class*="-empty "],
    [class*="-error "],
    [class*="-erro "],
    [class*="-loading-"],
    [class*="-empty-"],
    [class*="-error-"],
    [class*="-erro-"]
) :where(h1, h2, h3, h4, strong) {
    color: var(--text) !important;
}

html[data-hubs-tone="dark"] :where(
    .organization-loading,
    .empty-state,
    [class$="-loading"],
    [class$="-empty"],
    [class$="-error"],
    [class$="-erro"],
    [class*="-loading "],
    [class*="-empty "],
    [class*="-error "],
    [class*="-erro "],
    [class*="-loading-"],
    [class*="-empty-"],
    [class*="-error-"],
    [class*="-erro-"]
) :where(p, small, span) {
    color: var(--muted) !important;
}

/* =========================================================
   Vantara Hubs - escala operacional profunda

   Camada de maior especificidade para aproximar o desktop da
   sensacao de zoom 67% sem depender do zoom do navegador.
   ========================================================= */

@media (min-width: 1024px) {
    html body:has(.sidebar) {
        --sidebar-width: 198px;
    }

    html .sidebar {
        top: 10px !important;
        bottom: 10px !important;
        left: 10px !important;
        width: 198px !important;
        padding: 10px !important;
        border-radius: 12px !important;
    }

    html .main-content {
        margin-left: 228px !important;
        padding: 10px 12px 18px !important;
    }

    html .brand,
    html .central-sidebar-brand {
        padding-bottom: 9px !important;
        margin-bottom: 8px !important;
    }

    html :where(.brand .brand-mark, .central-sidebar-brand .brand-mark) {
        height: 42px !important;
        max-width: 166px !important;
    }

    html :where(.sidebar-section-label) {
        margin: 9px 0 5px !important;
        font-size: .46rem !important;
        letter-spacing: .11em !important;
    }

    html .sidebar-nav {
        gap: 4px !important;
    }

    html .nav-item {
        min-height: 29px !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
        gap: 7px !important;
        font-size: .58rem !important;
        line-height: 1.05 !important;
    }

    html :where(.nav-item .nav-icon, .nav-item span:first-child) {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        border-radius: 6px !important;
        font-size: .5rem !important;
    }

    html :where(.sidebar-central-button, .sidebar-logout) {
        min-height: 31px !important;
        padding: 7px 8px !important;
        border-radius: 8px !important;
        font-size: .58rem !important;
    }

    html .topbar {
        top: 8px !important;
        min-height: 42px !important;
        margin-bottom: 9px !important;
        padding: 7px 9px !important;
        border-radius: 11px !important;
        gap: 8px !important;
    }

    html .topbar-left h1,
    html .topbar-left h2 {
        font-size: clamp(.86rem, 1.12vw, 1.08rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -.05em !important;
    }

    html :where(.page-kicker, .section-label, .widget-type) {
        font-size: .46rem !important;
        letter-spacing: .105em !important;
    }

    html .topbar-actions {
        gap: 6px !important;
    }

    html .search-box {
        width: min(280px, 24vw) !important;
        height: 30px !important;
        padding: 0 8px !important;
        border-radius: 8px !important;
    }

    html .search-box input {
        font-size: .58rem !important;
    }

    html :where(
        .primary-button,
        .secondary-button,
        .ghost-button,
        .mini-button,
        .topbar-actions button,
        .hero-actions button,
        .hero-actions a,
        .dash-actions button,
        .organization-action-button,
        .card-header a,
        .sidebar-central-button
    ) {
        min-height: 30px !important;
        height: 30px !important;
        padding: 0 9px !important;
        border-radius: 8px !important;
        font-size: .58rem !important;
        line-height: 1 !important;
    }

    html .profile-chip {
        height: 31px !important;
        padding: 3px 7px 3px 3px !important;
        gap: 6px !important;
        border-radius: 9px !important;
    }

    html .profile-avatar {
        width: 24px !important;
        height: 24px !important;
        border-radius: 7px !important;
        font-size: .56rem !important;
    }

    html .profile-chip strong {
        font-size: .56rem !important;
        line-height: 1.05 !important;
    }

    html .profile-chip span {
        font-size: .48rem !important;
        line-height: 1.05 !important;
    }

    html .hero-section {
        grid-template-columns: minmax(0, 1fr) minmax(245px, 280px) !important;
        gap: 9px !important;
    }

    html .hero-copy {
        min-height: 174px !important;
        padding: 14px 16px !important;
        border-radius: 12px !important;
    }

    html .hero-copy::after {
        width: 140px !important;
        height: 140px !important;
        right: -50px !important;
        bottom: -54px !important;
    }

    html .hero-badge {
        min-height: 18px !important;
        padding: 3px 7px !important;
        gap: 5px !important;
        border-radius: 7px !important;
        font-size: .49rem !important;
    }

    html .hero-badge span {
        width: 5px !important;
        height: 5px !important;
        box-shadow: 0 0 0 3px rgba(22, 163, 74, .11) !important;
    }

    html .hero-copy h1 {
        max-width: 670px !important;
        margin-top: 11px !important;
        font-size: clamp(1.35rem, 2.22vw, 2.28rem) !important;
        line-height: .97 !important;
        letter-spacing: -.08em !important;
    }

    html .hero-copy p {
        max-width: 620px !important;
        margin-top: 9px !important;
        font-size: .61rem !important;
        line-height: 1.42 !important;
    }

    html .hero-actions {
        gap: 7px !important;
        margin-top: 12px !important;
    }

    html .hero-panel {
        padding: 11px !important;
        border-radius: 12px !important;
    }

    html .hero-panel-header span {
        font-size: .56rem !important;
    }

    html .hero-panel-header strong {
        font-size: .9rem !important;
    }

    html .health-ring {
        width: 86px !important;
        height: 86px !important;
        margin: 12px auto !important;
    }

    html .health-ring::before {
        inset: 7px !important;
    }

    html .health-ring-inner strong {
        font-size: 1rem !important;
    }

    html .health-ring-inner span {
        margin-top: 1px !important;
        font-size: .49rem !important;
    }

    html .hero-panel-grid {
        gap: 6px !important;
    }

    html .hero-panel-grid div {
        padding: 7px !important;
        border-radius: 8px !important;
    }

    html .hero-panel-grid span {
        font-size: .48rem !important;
    }

    html .hero-panel-grid strong {
        margin-top: 2px !important;
        font-size: .76rem !important;
    }

    html .kpi-grid {
        gap: 8px !important;
        margin-top: 9px !important;
    }

    html .kpi-card {
        min-height: 84px !important;
        padding: 9px 10px !important;
        border-radius: 10px !important;
    }

    html .kpi-icon {
        width: 22px !important;
        height: 22px !important;
        margin-bottom: 7px !important;
        border-radius: 7px !important;
        font-size: .5rem !important;
    }

    html .kpi-card span {
        font-size: .55rem !important;
    }

    html .kpi-card strong {
        margin-top: 3px !important;
        font-size: 1.08rem !important;
        line-height: 1 !important;
    }

    html .kpi-card p {
        margin-top: 3px !important;
        font-size: .52rem !important;
        line-height: 1.3 !important;
    }

    html .content-grid {
        gap: 9px !important;
        margin-top: 9px !important;
        grid-template-columns: minmax(0, 1.5fr) minmax(230px, .66fr) minmax(230px, .66fr) !important;
    }

    html .card {
        padding: 10px 11px !important;
        border-radius: 10px !important;
    }

    html .card-header {
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    html .card-header h2,
    html .card-header h3 {
        font-size: .74rem !important;
        line-height: 1.12 !important;
    }

    html :where(.organization-card, .task-card, .project-card, .metric-card, .goal-card, .team-card, .member-card, .document-card, .finance-card, .calendar-card, .settings-card, .overview-card, .area-card, .dev-card) {
        padding: 10px 11px !important;
        border-radius: 10px !important;
    }

    html :where(.organization-list, .task-list, .project-list, .metric-list, .goal-list, .team-list, .member-list, .document-list) {
        gap: 6px !important;
    }

    html .organization-card {
        gap: 9px !important;
        padding: 9px 10px !important;
        border-radius: 10px !important;
    }

    html .organization-logo {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
        font-size: .62rem !important;
    }

    html .organization-topline h4 {
        font-size: .66rem !important;
        line-height: 1.1 !important;
    }

    html .organization-info p,
    html .organization-meta span {
        font-size: .5rem !important;
    }

    html .card-badge,
    html .alert-count,
    html .status-pill,
    html .central-badge,
    html .central-meta span,
    html .organizations-list-meta span {
        min-height: 18px !important;
        padding: 0 6px !important;
        border-radius: 6px !important;
        font-size: .48rem !important;
    }

    html .dash-toolbar,
    html .dash-head {
        padding: 10px 12px !important;
        border-radius: 11px !important;
        gap: 9px !important;
    }

    html .dash-head h1 {
        margin: 2px 0 3px !important;
        font-size: clamp(.98rem, 1.5vw, 1.28rem) !important;
        line-height: 1.05 !important;
    }

    html .dash-head p {
        font-size: .56rem !important;
        line-height: 1.36 !important;
    }

    html .dash-grid {
        grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html .dash-widget {
        min-height: 106px !important;
        padding: 10px !important;
        border-radius: 10px !important;
        grid-column: span 2 !important;
    }

    html .dash-widget.width-1 { grid-column: span 1 !important; }
    html .dash-widget.width-2 { grid-column: span 2 !important; }
    html .dash-widget.width-3 { grid-column: span 3 !important; }
    html .dash-widget.width-4 { grid-column: span 4 !important; }
    html .dash-widget.width-5 { grid-column: span 5 !important; }
    html .dash-widget.width-6 { grid-column: span 6 !important; }

    html .widget-head h2 {
        font-size: .58rem !important;
        line-height: 1.15 !important;
    }

    html .widget-kpi {
        margin-top: 12px !important;
    }

    html .widget-kpi strong {
        font-size: 1.22rem !important;
    }

    html .widget-chart,
    html .widget-bars {
        height: 72px !important;
        margin-top: 8px !important;
    }

    html .widget-progress-ring,
    html .widget-pie-chart {
        width: 70px !important;
        height: 70px !important;
    }

    html .widget-progress-ring::before {
        width: 54px !important;
        height: 54px !important;
    }
}

/* =========================================================
   Dashboards - prioridade final do rework de widgets
   ========================================================= */

html #dashGrid.dash-grid {
    grid-template-columns: repeat(18, minmax(0, 1fr)) !important;
    gap: 8px !important;
    grid-auto-flow: row dense !important;
}

html #dashGrid .dash-widget,
html #dashGrid .dash-widget.width-2 { grid-column: span 4 !important; }
html #dashGrid .dash-widget.width-1 { grid-column: span 3 !important; }
html #dashGrid .dash-widget.width-3 { grid-column: span 6 !important; }
html #dashGrid .dash-widget.width-4 { grid-column: span 8 !important; }
html #dashGrid .dash-widget.width-5 { grid-column: span 10 !important; }
html #dashGrid .dash-widget.width-6 { grid-column: span 18 !important; }

html #dashGrid .dash-widget {
    min-height: 96px !important;
    padding: 9px !important;
    border-radius: 14px !important;
    border-color: color-mix(in srgb, var(--widget-color, var(--blue)) 30%, var(--border)) !important;
    background:
        radial-gradient(circle at 15% 7%, color-mix(in srgb, var(--widget-color, var(--blue)) 17%, transparent), transparent 28%),
        radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--cyan, #4debff) 10%, transparent), transparent 30%),
        linear-gradient(145deg,
            color-mix(in srgb, var(--hubs-theme-panel, var(--card)) 87%, var(--widget-color, var(--blue)) 8%),
            color-mix(in srgb, var(--hubs-theme-panel-soft, var(--hubs-theme-field, var(--card))) 90%, #000 4%)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        inset 0 0 0 1px color-mix(in srgb, var(--widget-color, var(--blue)) 9%, transparent),
        0 16px 38px rgba(2, 6, 23, .14) !important;
    contain: layout paint style !important;
}

html[data-hubs-tone="dark"] #dashGrid .dash-widget {
    background:
        radial-gradient(circle at 15% 7%, color-mix(in srgb, var(--widget-color, var(--blue)) 22%, transparent), transparent 29%),
        radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--cyan, #4debff) 10%, transparent), transparent 30%),
        linear-gradient(145deg,
            color-mix(in srgb, var(--hubs-theme-panel, #09111f) 78%, var(--widget-color, var(--blue)) 10%),
            color-mix(in srgb, var(--hubs-theme-panel-soft, #0e1728) 82%, #000 13%)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .055),
        inset 0 0 0 1px color-mix(in srgb, var(--widget-color, var(--blue)) 13%, transparent),
        0 18px 42px rgba(0, 0, 0, .34),
        0 0 26px color-mix(in srgb, var(--widget-color, var(--blue)) 9%, transparent) !important;
}

html #dashGrid .dash-widget::before {
    inset: 0 auto 0 0 !important;
    width: 2px !important;
    height: auto !important;
    border-radius: 14px 0 0 14px !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--widget-color, var(--blue)) 92%, #fff), var(--widget-color, var(--blue)), color-mix(in srgb, var(--widget-color, var(--blue)) 40%, transparent)) !important;
    opacity: .92 !important;
}

html #dashGrid .dash-widget::after {
    right: 8px !important;
    bottom: 8px !important;
    width: 74px !important;
    height: 48px !important;
    z-index: 0 !important;
    opacity: .52 !important;
    pointer-events: none !important;
}

html #dashGrid .dash-widget > * {
    position: relative !important;
    z-index: 1 !important;
}

html #dashGrid .widget-head {
    gap: 6px !important;
}

html #dashGrid .widget-controls {
    gap: 2px !important;
    padding: 1px !important;
    border-radius: 8px !important;
}

html #dashGrid .widget-controls button {
    width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: .48rem !important;
}

html #dashGrid .dash-widget[data-widget-kind="chart"]::after {
    border-radius: 13px !important;
    border: 1px solid color-mix(in srgb, var(--widget-color, var(--blue)) 25%, transparent) !important;
    background:
        linear-gradient(180deg, transparent 0 22%, color-mix(in srgb, var(--widget-color, var(--blue)) 16%, transparent) 22% 24%, transparent 24% 52%, color-mix(in srgb, var(--widget-color, var(--blue)) 13%, transparent) 52% 54%, transparent 54%),
        linear-gradient(90deg, transparent 0 10%, color-mix(in srgb, var(--widget-color, var(--blue)) 88%, var(--cyan, #4debff)) 10% 15%, transparent 15% 28%, var(--widget-color, var(--blue)) 28% 35%, transparent 35% 48%, color-mix(in srgb, var(--widget-color, var(--blue)) 75%, #fff) 48% 54%, transparent 54% 66%, color-mix(in srgb, var(--cyan, #4debff) 70%, var(--widget-color, var(--blue))) 66% 73%, transparent 73%),
        color-mix(in srgb, var(--widget-color, var(--blue)) 8%, transparent) !important;
}

html #dashGrid .dash-widget[data-widget-kind="metric"]::after,
html #dashGrid .dash-widget[data-widget-kind="progress"]::after {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle at center, color-mix(in srgb, var(--hubs-theme-panel, var(--card)) 82%, transparent) 0 41%, transparent 42%),
        conic-gradient(from -45deg, color-mix(in srgb, var(--widget-color, var(--blue)) 90%, #fff) 0 70%, color-mix(in srgb, var(--widget-color, var(--blue)) 16%, transparent) 70% 100%) !important;
}

html #dashGrid .dash-widget[data-widget-kind="list"]::after,
html #dashGrid .dash-widget[data-widget-kind="text"]::after {
    border-radius: 13px !important;
    border: 1px solid color-mix(in srgb, var(--widget-color, var(--blue)) 18%, transparent) !important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--widget-color, var(--blue)) 58%, transparent) 0 10%, transparent 10%),
        linear-gradient(180deg, color-mix(in srgb, var(--widget-color, var(--blue)) 40%, transparent) 0 12%, transparent 12% 30%, color-mix(in srgb, var(--widget-color, var(--blue)) 30%, transparent) 30% 42%, transparent 42% 62%, color-mix(in srgb, var(--widget-color, var(--blue)) 22%, transparent) 62% 74%, transparent 74%),
        color-mix(in srgb, var(--widget-color, var(--blue)) 7%, transparent) !important;
}

html #dashGrid .widget-type {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 15px !important;
    padding: 1px 5px 1px 2px !important;
    border-radius: 999px !important;
    border-color: color-mix(in srgb, var(--widget-color, var(--blue)) 32%, var(--border)) !important;
    background: color-mix(in srgb, var(--widget-color, var(--blue)) 12%, var(--hubs-theme-field, var(--card))) !important;
    color: color-mix(in srgb, var(--widget-color, var(--blue)) 78%, var(--text)) !important;
    font-size: .42rem !important;
    letter-spacing: .09em !important;
}

html #dashGrid .widget-type i {
    width: 12px !important;
    height: 12px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: var(--widget-color, var(--blue)) !important;
    color: #fff !important;
    font-style: normal !important;
    font-size: .42rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

html #dashGrid .widget-head h2 {
    max-width: 78% !important;
    margin: 4px 0 0 !important;
    font-size: clamp(.58rem, .68vw, .68rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -.035em !important;
}

html #dashGrid .widget-kpi,
html #dashGrid .widget-imported-metric,
html #dashGrid .widget-imported-status {
    margin-top: 8px !important;
    padding: 0 58px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html #dashGrid .widget-kpi strong,
html #dashGrid .widget-imported-metric strong {
    font-size: clamp(1rem, 1.42vw, 1.38rem) !important;
    line-height: .95 !important;
    letter-spacing: -.075em !important;
}

html #dashGrid .widget-imported-status > strong,
html #dashGrid .widget-imported-chart > strong {
    max-width: calc(100% - 62px) !important;
    margin-top: 7px !important;
    font-size: .62rem !important;
    line-height: 1.18 !important;
}

html #dashGrid .widget-chart,
html #dashGrid .widget-bars {
    height: 48px !important;
    margin-top: 7px !important;
    padding: 3px 58px 1px 0 !important;
}

html #dashGrid .widget-chart.imported,
html #dashGrid .widget-bars.imported {
    height: 58px !important;
}

html #dashGrid .widget-chart .line {
    stroke: color-mix(in srgb, var(--widget-color, var(--blue)) 88%, var(--cyan, #4debff)) !important;
    stroke-width: 2.2 !important;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--widget-color, var(--blue)) 32%, transparent)) !important;
}

html #dashGrid .widget-chart .area {
    fill: color-mix(in srgb, var(--widget-color, var(--blue)) 20%, transparent) !important;
}

html #dashGrid .widget-bars {
    gap: 5px !important;
}

html #dashGrid .widget-bars span {
    border-radius: 7px 7px 2px 2px !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--widget-color, var(--blue)) 58%, #fff), color-mix(in srgb, var(--widget-color, var(--blue)) 84%, var(--cyan, #4debff)) 48%, var(--widget-color, var(--blue))) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 15px color-mix(in srgb, var(--widget-color, var(--blue)) 22%, transparent) !important;
    opacity: .96 !important;
}

html #dashGrid .widget-progress {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 7px !important;
    justify-items: start !important;
    margin-top: 7px !important;
}

html #dashGrid .widget-progress-ring,
html #dashGrid .widget-pie-chart {
    width: 50px !important;
    height: 50px !important;
}

html #dashGrid .widget-progress-ring::before {
    width: 37px !important;
    height: 37px !important;
}

html #dashGrid .widget-list {
    gap: 5px !important;
    margin-top: 7px !important;
    padding-right: 58px !important;
}

html #dashGrid .widget-list article,
html #dashGrid .widget-alert {
    min-height: 24px !important;
    padding: 5px 7px !important;
    border-radius: 8px !important;
    border-color: color-mix(in srgb, var(--widget-color, var(--blue)) 15%, var(--border)) !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--widget-color, var(--blue)) 11%, transparent), color-mix(in srgb, var(--hubs-theme-field, var(--card)) 88%, transparent)) !important;
}

html #dashGrid .widget-text {
    max-width: calc(100% - 62px) !important;
    margin-top: 8px !important;
    padding: 8px 9px !important;
    border-radius: 10px !important;
    border: 1px solid color-mix(in srgb, var(--widget-color, var(--blue)) 15%, var(--border)) !important;
    background: color-mix(in srgb, var(--hubs-theme-field, var(--card)) 84%, var(--widget-color, var(--blue)) 5%) !important;
    color: var(--text) !important;
    font-size: .5rem !important;
    line-height: 1.45 !important;
}

@media (max-width: 1220px) {
    html #dashGrid.dash-grid { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
    html #dashGrid .dash-widget,
    html #dashGrid .dash-widget.width-2,
    html #dashGrid .dash-widget.width-3 { grid-column: span 4 !important; }
    html #dashGrid .dash-widget.width-1 { grid-column: span 3 !important; }
    html #dashGrid .dash-widget.width-4,
    html #dashGrid .dash-widget.width-5 { grid-column: span 6 !important; }
    html #dashGrid .dash-widget.width-6 { grid-column: span 12 !important; }
}

@media (max-width: 760px) {
    html #dashGrid.dash-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    html #dashGrid .dash-widget,
    html #dashGrid .dash-widget.width-1,
    html #dashGrid .dash-widget.width-2,
    html #dashGrid .dash-widget.width-3,
    html #dashGrid .dash-widget.width-4,
    html #dashGrid .dash-widget.width-5,
    html #dashGrid .dash-widget.width-6 {
        grid-column: span 1 !important;
        min-height: 160px !important;
        padding: 14px !important;
    }
    html #dashGrid .dash-widget::after {
        width: 92px !important;
        height: 64px !important;
        opacity: .42 !important;
    }
    html #dashGrid .widget-kpi,
    html #dashGrid .widget-imported-metric,
    html #dashGrid .widget-imported-status,
    html #dashGrid .widget-chart,
    html #dashGrid .widget-bars,
    html #dashGrid .widget-list,
    html #dashGrid .widget-pie,
    html #dashGrid .widget-text {
        padding-right: 72px !important;
        max-width: none !important;
    }
}

@media (max-width: 980px) {
    html body :where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand, .central-sidebar-brand) :where(.brand-mark.sidebar-mobile-trigger) {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        max-width: 44px !important;
        overflow: hidden !important;
        border-radius: 13px !important;
        background:
            linear-gradient(145deg, color-mix(in srgb, var(--hubs-theme-panel, #ffffff) 86%, var(--cyan, #4debff) 14%), var(--hubs-theme-field, #f8fafc)) !important;
        box-shadow:
            inset 0 0 0 1px color-mix(in srgb, var(--blue, #0145f2) 18%, transparent),
            0 10px 24px color-mix(in srgb, var(--blue, #0145f2) 12%, transparent) !important;
    }

    html[data-hubs-tone="dark"] body :where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand, .central-sidebar-brand) :where(.brand-mark.sidebar-mobile-trigger) {
        background:
            linear-gradient(145deg, color-mix(in srgb, #020617 82%, var(--cyan, #4debff) 18%), #020617) !important;
        box-shadow:
            inset 0 0 0 1px color-mix(in srgb, var(--cyan, #4debff) 22%, transparent),
            0 10px 24px rgba(0, 0, 0, 0.28) !important;
    }

    html body.sidebar-mobile-open :where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand, .central-sidebar-brand) :where(.brand-mark.sidebar-mobile-trigger) {
        width: 100% !important;
        height: 54px !important;
        flex: 1 1 auto !important;
        max-width: 190px !important;
        overflow: visible !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body:not(.sidebar-mobile-open) :where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand-mark.sidebar-mobile-trigger [data-hubs-sidebar-logo]) {
        content: url("../assets/Logos/vantara_hubs_vetor.webp") !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: scale(1.76) !important;
        transform-origin: center center !important;
    }

    html[data-hubs-tone="dark"] body:not(.sidebar-mobile-open) :where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand-mark.sidebar-mobile-trigger [data-hubs-sidebar-logo]) {
        content: url("../assets/Logos/vantara_hubs_vetor_black.webp") !important;
    }

    html body.sidebar-mobile-open :where(.sidebar, .central-sidebar, .chat-sidebar) :where(.brand-mark.sidebar-mobile-trigger [data-hubs-sidebar-logo]) {
        object-fit: contain !important;
        transform: translateY(-14px) !important;
    }

    html body :where(.central-sidebar-nav) {
        gap: 4px !important;
    }

    html body :where(.central-nav-item) {
        min-height: 34px !important;
        padding: 7px 9px !important;
        border-radius: 9px !important;
        gap: 8px !important;
        font-size: 0.68rem !important;
        line-height: 1.1 !important;
    }

    html body :where(.central-nav-item span) {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        border-radius: 7px !important;
        font-size: 0.58rem !important;
    }
}

/*
    Mobile performance layer
    ------------------------
    A Hubs usa muitas superfícies glass, sombras largas, gradientes e modais.
    Em WebView/Android isso pesa mais do que a animação em si. No mobile/app,
    preferimos superfícies sólidas, sombras curtas e pintura barata para manter
    fluidez em aparelhos antigos sem desmontar o desktop.
*/

@media (max-width: 980px), (pointer: coarse) {
    :root {
        --shadow-soft: 0 8px 20px rgba(15, 23, 42, 0.1) !important;
        --shadow-medium: 0 12px 28px rgba(15, 23, 42, 0.14) !important;
        --shadow-strong: 0 18px 42px rgba(15, 23, 42, 0.18) !important;
    }

    html,
    body {
        scroll-behavior: auto !important;
        text-rendering: optimizeSpeed;
    }

    *,
    *::before,
    *::after {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    html body :where(
        .app-shell,
        .main-content,
        .topbar,
        .sidebar,
        .central-sidebar,
        .chat-sidebar,
        .profile-chip,
        .card,
        .organization-card,
        .organization-panel,
        .central-card,
        .central-panel,
        .hub-card,
        .watch-kpi,
        .watch-panel,
        .area-section,
        .area-function-card,
        .process-card,
        .execution-card,
        .metric-card,
        .goal-card,
        .dash-widget,
        .dashboard-widget,
        .graph-card,
        .finance-card,
        .members-card,
        .team-card,
        .project-card,
        .task-card,
        .calendar-card,
        .document-card,
        .audit-card,
        .modal,
        .popup,
        [class*="-card"],
        [class*="_card"],
        [class*="-panel"],
        [class*="_panel"],
        [class*="-modal"],
        [class*="_modal"]
    ) {
        box-shadow: var(--shadow-soft) !important;
    }

    html body :where(
        .organization-modal,
        .organization-modal:not([hidden]),
        .members-modal-backdrop,
        .teams-modal-backdrop,
        .settings-modal-backdrop,
        .projects-modal-backdrop,
        .calendar-modal-backdrop,
        .metric-modal-backdrop,
        .goal-modal-backdrop,
        .process-modal-backdrop,
        .dash-modal-backdrop,
        .document-modal-backdrop,
        .finance-modal-backdrop,
        .audit-modal-backdrop,
        .area-modal-backdrop,
        .marketing-modal-backdrop,
        .hubs-notification-detail-backdrop,
        [class*="-backdrop"],
        [class*="_backdrop"],
        [class*="-overlay"],
        [class*="_overlay"]
    ) {
        background: rgba(2, 8, 23, 0.54) !important;
        box-shadow: none !important;
    }

    html body :where(
        .hero-orb,
        .hero-glow,
        .ambient-light,
        .decor-orb,
        .area-beta-icon,
        .process-method-art::after,
        .hubs-skeleton-line,
        .hubs-skeleton-block,
        .hubs-skeleton-pill,
        .hubs-skeleton-avatar,
        [class*="glow"],
        [class*="orb"],
        [class*="halo"],
        [class*="particle"],
        [class*="shine"],
        [class*="aurora"],
        [class*="ambient"]
    ) {
        filter: none !important;
        box-shadow: none !important;
    }

    html body :where(
        .hero-orb,
        .hero-glow,
        .ambient-light,
        .decor-orb,
        .area-beta-icon,
        .hubs-motion-card,
        .hubs-motion-pop,
        .hubs-motion-backdrop,
        .hubs-motion-toast,
        .process-tab-enter,
        .process-tab-slide-out,
        .process-method-options > button:hover .free-route,
        [class*="aurora"],
        [class*="ambient"],
        [class*="particle"]
    ) {
        animation: none !important;
    }

    html body :where(
        .card,
        .organization-card,
        .central-card,
        .area-function-card,
        .process-card,
        .metric-card,
        .goal-card,
        .dash-widget,
        .dashboard-widget,
        .graph-card,
        .finance-card,
        .members-card,
        .team-card,
        .project-card,
        .task-card,
        button,
        a
    ):hover {
        transform: none !important;
    }

    html body :where(
        .hubs-motion-card,
        .hubs-motion-pop,
        .hubs-motion-backdrop,
        .hubs-motion-toast,
        .organization-card,
        .central-card,
        .area-function-card,
        .process-card,
        .metric-card,
        .goal-card,
        .dash-widget,
        .dashboard-widget,
        .graph-card,
        .finance-card,
        .members-card,
        .team-card,
        .project-card,
        .task-card,
        .sidebar,
        .central-sidebar,
        .chat-sidebar
    ) {
        transition-duration: 120ms !important;
    }

    html body :where(
        .hubs-skeleton-line,
        .hubs-skeleton-block,
        .hubs-skeleton-pill,
        .hubs-skeleton-avatar
    ) {
        background-image: linear-gradient(90deg, rgba(148, 163, 184, 0.12), rgba(148, 163, 184, 0.2), rgba(148, 163, 184, 0.12)) !important;
        animation-duration: 1.4s !important;
    }

    html body :where(.marketing-board-card, .marketing-board-card *, .marketing-connection-layer, .marketing-connection-layer *) {
        text-rendering: optimizeSpeed;
    }

    html body :where(canvas, svg, img, video) {
        max-width: 100%;
    }
}

html.vantara_capacitor_app body :where(.topbar, .sidebar, .central-sidebar, .chat-sidebar, [class*="-panel"], [class*="_panel"]) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}