@bunnyland/ui-web 0.2.0

package/assets/bunnyland-ui.css

@@ -0,0 +1,1634 @@
+:root,
+:root.bl-theme-dark,
+:root.bl-theme-purple-blue-dark,
+:root.bl-theme-purple-blue {
+  color-scheme: dark;
+
+  --bl-font-mono: 'Courier New', monospace;
+  --bl-radius-sm: 3px;
+  --bl-radius-md: 4px;
+  --bl-text-xs: 10px;
+  --bl-text-sm: 11px;
+  --bl-text-md: 12px;
+
+  --bl-bg: #1e1e2e;
+  --bl-bg-strong: #181825;
+  --bl-bg-deep: #11111b;
+  --bl-bg-row: #1a1a2a;
+  --bl-bg-subtle: #252535;
+  --bl-surface: #313244;
+  --bl-surface-hover: #45475a;
+  --bl-border: #313244;
+  --bl-border-muted: #26263a;
+  --bl-border-control: #45475a;
+  --bl-border-strong: #585b70;
+
+  --bl-text: #cdd6f4;
+  --bl-text-soft: #a6adc8;
+  --bl-text-muted: #585b70;
+  --bl-text-dim: #6c7086;
+  --bl-text-inverse: #ffffff;
+  --bl-accent: #89b4fa;
+  --bl-accent-strong: #89dceb;
+  --bl-secondary: #cba6f7;
+  --bl-ok: #a6e3a1;
+  --bl-error: #f38ba8;
+  --bl-warn: #fab387;
+  --bl-info: #74c7ec;
+
+  --bl-shadow-popover: 0 4px 12px rgba(0, 0, 0, 0.5);
+  --bl-shadow-text: 0 1px 2px rgba(0, 0, 0, 0.6);
+  --bl-overlay: rgba(17, 17, 27, 0.74);
+  --bl-overlay-strong: rgba(17, 17, 27, 0.86);
+  --bl-overlay-solid: rgba(30, 30, 46, 0.95);
+  --bl-accent-wash: rgba(137, 180, 250, 0.14);
+  --bl-accent-wash-strong: rgba(137, 180, 250, 0.28);
+  --bl-secondary-wash: rgba(203, 166, 247, 0.28);
+  --bl-secondary-wash-strong: rgba(203, 166, 247, 0.4);
+}
+
+:root,
+:root.bl-theme-light,
+:root.bl-theme-purple-blue-light,
+:root.bl-theme-purple-blue {
+
+  --bl-light-bg: #f4f1ea;
+  --bl-light-bg-strong: #ebe6dc;
+  --bl-light-bg-deep: #ddd6c9;
+  --bl-light-bg-row: #e4ded3;
+  --bl-light-bg-subtle: #f8f5ee;
+  --bl-light-surface: #ffffff;
+  --bl-light-surface-hover: #ece7dd;
+  --bl-light-border: #c9c0b4;
+  --bl-light-border-muted: #ddd4c8;
+  --bl-light-border-control: #b8aea2;
+  --bl-light-border-strong: #95897d;
+
+  --bl-light-text: #27231e;
+  --bl-light-text-soft: #4f473f;
+  --bl-light-text-muted: #82786d;
+  --bl-light-text-dim: #6a6158;
+  --bl-light-text-inverse: #111111;
+  --bl-light-accent: #2f66b1;
+  --bl-light-accent-strong: #167287;
+  --bl-light-secondary: #7c4eb2;
+  --bl-light-ok: #367a38;
+  --bl-light-error: #b83c4b;
+  --bl-light-warn: #9c5d19;
+  --bl-light-info: #26718d;
+
+  --bl-light-shadow-popover: 0 8px 20px rgba(40, 34, 28, 0.22);
+  --bl-light-shadow-text: 0 1px 2px rgba(255, 255, 255, 0.65);
+  --bl-light-overlay: rgba(244, 241, 234, 0.78);
+  --bl-light-overlay-strong: rgba(248, 245, 238, 0.9);
+  --bl-light-overlay-solid: rgba(244, 241, 234, 0.96);
+  --bl-light-accent-wash: rgba(47, 102, 177, 0.12);
+  --bl-light-accent-wash-strong: rgba(47, 102, 177, 0.24);
+  --bl-light-secondary-wash: rgba(124, 78, 178, 0.16);
+  --bl-light-secondary-wash-strong: rgba(124, 78, 178, 0.26);
+}
+
+:root.bl-theme-anime-dark,
+:root.bl-theme-candy-dark,
+:root.bl-theme-candy {
+  color-scheme: dark;
+
+  --bl-bg: #241626;
+  --bl-bg-strong: #1b101f;
+  --bl-bg-deep: #130b16;
+  --bl-bg-row: #201322;
+  --bl-bg-subtle: #2f1e32;
+  --bl-surface: #3d2942;
+  --bl-surface-hover: #553858;
+  --bl-border: #3d2942;
+  --bl-border-muted: #2c1c31;
+  --bl-border-control: #68445f;
+  --bl-border-strong: #876078;
+
+  --bl-text: #f5d7ea;
+  --bl-text-soft: #dcaecf;
+  --bl-text-muted: #8f6683;
+  --bl-text-dim: #a07791;
+  --bl-text-inverse: #ffffff;
+  --bl-accent: #ff8fc7;
+  --bl-accent-strong: #8ee7f0;
+  --bl-secondary: #b99cff;
+  --bl-ok: #8ee6b5;
+  --bl-error: #ff7e9d;
+  --bl-warn: #ffc47a;
+  --bl-info: #8ee7f0;
+
+  --bl-shadow-popover: 0 6px 18px rgba(15, 8, 20, 0.62);
+  --bl-shadow-text: 0 1px 2px rgba(0, 0, 0, 0.55);
+  --bl-overlay: rgba(27, 16, 31, 0.76);
+  --bl-overlay-strong: rgba(36, 22, 38, 0.9);
+  --bl-overlay-solid: rgba(36, 22, 38, 0.96);
+  --bl-accent-wash: rgba(255, 143, 199, 0.16);
+  --bl-accent-wash-strong: rgba(255, 143, 199, 0.3);
+  --bl-secondary-wash: rgba(142, 231, 240, 0.16);
+  --bl-secondary-wash-strong: rgba(142, 231, 240, 0.28);
+}
+
+:root.bl-theme-anime-light,
+:root.bl-theme-candy-light,
+:root.bl-theme-candy {
+
+  --bl-light-bg: #fff2f8;
+  --bl-light-bg-strong: #f9e3f0;
+  --bl-light-bg-deep: #efd0e2;
+  --bl-light-bg-row: #f3d9e9;
+  --bl-light-bg-subtle: #fff8fb;
+  --bl-light-surface: #ffffff;
+  --bl-light-surface-hover: #f7ddec;
+  --bl-light-border: #e4bdd3;
+  --bl-light-border-muted: #f0d4e3;
+  --bl-light-border-control: #ce9fbb;
+  --bl-light-border-strong: #a97895;
+
+  --bl-light-text: #33212d;
+  --bl-light-text-soft: #604657;
+  --bl-light-text-muted: #9a748b;
+  --bl-light-text-dim: #7d5c71;
+  --bl-light-text-inverse: #180d14;
+  --bl-light-accent: #c9337f;
+  --bl-light-accent-strong: #087e92;
+  --bl-light-secondary: #6c50bd;
+  --bl-light-ok: #26784c;
+  --bl-light-error: #c7355c;
+  --bl-light-warn: #a86112;
+  --bl-light-info: #087e92;
+
+  --bl-light-shadow-popover: 0 8px 22px rgba(72, 38, 56, 0.2);
+  --bl-light-shadow-text: 0 1px 2px rgba(255, 255, 255, 0.72);
+  --bl-light-overlay: rgba(255, 242, 248, 0.78);
+  --bl-light-overlay-strong: rgba(255, 248, 251, 0.9);
+  --bl-light-overlay-solid: rgba(255, 242, 248, 0.96);
+  --bl-light-accent-wash: rgba(201, 51, 127, 0.12);
+  --bl-light-accent-wash-strong: rgba(201, 51, 127, 0.22);
+  --bl-light-secondary-wash: rgba(8, 126, 146, 0.12);
+  --bl-light-secondary-wash-strong: rgba(8, 126, 146, 0.22);
+}
+
+:root.bl-theme-earth-dark,
+:root.bl-theme-earth {
+  color-scheme: dark;
+
+  --bl-bg: #17211b;
+  --bl-bg-strong: #111912;
+  --bl-bg-deep: #0b110d;
+  --bl-bg-row: #142018;
+  --bl-bg-subtle: #1f2d23;
+  --bl-surface: #2d3c31;
+  --bl-surface-hover: #3f5243;
+  --bl-border: #2d3c31;
+  --bl-border-muted: #202e24;
+  --bl-border-control: #506457;
+  --bl-border-strong: #6e8173;
+
+  --bl-text: #dce8d9;
+  --bl-text-soft: #b8cbb4;
+  --bl-text-muted: #71836d;
+  --bl-text-dim: #899b84;
+  --bl-text-inverse: #ffffff;
+  --bl-accent: #92d184;
+  --bl-accent-strong: #d6c46f;
+  --bl-secondary: #7fb6a4;
+  --bl-ok: #9fda8e;
+  --bl-error: #e18484;
+  --bl-warn: #d6c46f;
+  --bl-info: #7fb6a4;
+
+  --bl-shadow-popover: 0 6px 18px rgba(5, 12, 7, 0.56);
+  --bl-shadow-text: 0 1px 2px rgba(0, 0, 0, 0.58);
+  --bl-overlay: rgba(17, 25, 18, 0.76);
+  --bl-overlay-strong: rgba(23, 33, 27, 0.9);
+  --bl-overlay-solid: rgba(23, 33, 27, 0.96);
+  --bl-accent-wash: rgba(146, 209, 132, 0.14);
+  --bl-accent-wash-strong: rgba(146, 209, 132, 0.27);
+  --bl-secondary-wash: rgba(214, 196, 111, 0.14);
+  --bl-secondary-wash-strong: rgba(214, 196, 111, 0.26);
+}
+
+:root.bl-theme-earth-light,
+:root.bl-theme-earth {
+
+  --bl-light-bg: #f2f5ed;
+  --bl-light-bg-strong: #e5ecdc;
+  --bl-light-bg-deep: #d5dfcc;
+  --bl-light-bg-row: #dfe8d8;
+  --bl-light-bg-subtle: #f8faf4;
+  --bl-light-surface: #ffffff;
+  --bl-light-surface-hover: #e2eadb;
+  --bl-light-border: #bfceb7;
+  --bl-light-border-muted: #d4dfcc;
+  --bl-light-border-control: #a2b49a;
+  --bl-light-border-strong: #7b9275;
+
+  --bl-light-text: #222b21;
+  --bl-light-text-soft: #44513f;
+  --bl-light-text-muted: #75836e;
+  --bl-light-text-dim: #5f7059;
+  --bl-light-text-inverse: #10160f;
+  --bl-light-accent: #3f8f4d;
+  --bl-light-accent-strong: #85751f;
+  --bl-light-secondary: #2f7c73;
+  --bl-light-ok: #3f8f4d;
+  --bl-light-error: #af4e4e;
+  --bl-light-warn: #8f721b;
+  --bl-light-info: #2f7c73;
+
+  --bl-light-shadow-popover: 0 8px 22px rgba(42, 55, 36, 0.22);
+  --bl-light-shadow-text: 0 1px 2px rgba(255, 255, 255, 0.7);
+  --bl-light-overlay: rgba(242, 245, 237, 0.78);
+  --bl-light-overlay-strong: rgba(248, 250, 244, 0.9);
+  --bl-light-overlay-solid: rgba(242, 245, 237, 0.96);
+  --bl-light-accent-wash: rgba(63, 143, 77, 0.12);
+  --bl-light-accent-wash-strong: rgba(63, 143, 77, 0.22);
+  --bl-light-secondary-wash: rgba(133, 117, 31, 0.12);
+  --bl-light-secondary-wash-strong: rgba(133, 117, 31, 0.22);
+}
+
+:root.bl-theme-ocean-dark,
+:root.bl-theme-ocean {
+  color-scheme: dark;
+
+  --bl-bg: #10252b;
+  --bl-bg-strong: #0b1c21;
+  --bl-bg-deep: #071317;
+  --bl-bg-row: #0d2026;
+  --bl-bg-subtle: #173139;
+  --bl-surface: #21434b;
+  --bl-surface-hover: #2e5962;
+  --bl-border: #29505a;
+  --bl-border-muted: #1b3941;
+  --bl-border-control: #3e6870;
+  --bl-border-strong: #65868c;
+
+  --bl-text: #d9f2f2;
+  --bl-text-soft: #acd3d2;
+  --bl-text-muted: #709699;
+  --bl-text-dim: #89afb0;
+  --bl-text-inverse: #ffffff;
+  --bl-accent: #65d1cb;
+  --bl-accent-strong: #79bfff;
+  --bl-secondary: #ff9b82;
+  --bl-ok: #83d49a;
+  --bl-error: #ff8c96;
+  --bl-warn: #f4c36b;
+  --bl-info: #79bfff;
+
+  --bl-shadow-popover: 0 6px 18px rgba(2, 12, 15, 0.62);
+  --bl-shadow-text: 0 1px 2px rgba(0, 0, 0, 0.58);
+  --bl-overlay: rgba(7, 19, 23, 0.76);
+  --bl-overlay-strong: rgba(11, 28, 33, 0.9);
+  --bl-overlay-solid: rgba(16, 37, 43, 0.96);
+  --bl-accent-wash: rgba(101, 209, 203, 0.14);
+  --bl-accent-wash-strong: rgba(101, 209, 203, 0.28);
+  --bl-secondary-wash: rgba(255, 155, 130, 0.14);
+  --bl-secondary-wash-strong: rgba(255, 155, 130, 0.26);
+}
+
+:root.bl-theme-ocean-light,
+:root.bl-theme-ocean {
+
+  --bl-light-bg: #edf8f7;
+  --bl-light-bg-strong: #deeeed;
+  --bl-light-bg-deep: #cbdedc;
+  --bl-light-bg-row: #d6e8e6;
+  --bl-light-bg-subtle: #f5fbfa;
+  --bl-light-surface: #ffffff;
+  --bl-light-surface-hover: #d9ecea;
+  --bl-light-border: #b4cfcd;
+  --bl-light-border-muted: #cde0de;
+  --bl-light-border-control: #91b6b4;
+  --bl-light-border-strong: #668f8e;
+
+  --bl-light-text: #183134;
+  --bl-light-text-soft: #3d5c5e;
+  --bl-light-text-muted: #708b8b;
+  --bl-light-text-dim: #587778;
+  --bl-light-text-inverse: #071719;
+  --bl-light-accent: #087f83;
+  --bl-light-accent-strong: #176ba0;
+  --bl-light-secondary: #b84f38;
+  --bl-light-ok: #2d7d49;
+  --bl-light-error: #b43e4c;
+  --bl-light-warn: #94610d;
+  --bl-light-info: #176ba0;
+
+  --bl-light-shadow-popover: 0 8px 22px rgba(25, 62, 64, 0.2);
+  --bl-light-shadow-text: 0 1px 2px rgba(255, 255, 255, 0.72);
+  --bl-light-overlay: rgba(237, 248, 247, 0.8);
+  --bl-light-overlay-strong: rgba(245, 251, 250, 0.92);
+  --bl-light-overlay-solid: rgba(237, 248, 247, 0.97);
+  --bl-light-accent-wash: rgba(8, 127, 131, 0.12);
+  --bl-light-accent-wash-strong: rgba(8, 127, 131, 0.23);
+  --bl-light-secondary-wash: rgba(184, 79, 56, 0.12);
+  --bl-light-secondary-wash-strong: rgba(184, 79, 56, 0.22);
+}
+
+:root.bl-theme-sunset-dark,
+:root.bl-theme-sunset {
+  color-scheme: dark;
+
+  --bl-bg: #291922;
+  --bl-bg-strong: #201219;
+  --bl-bg-deep: #160c12;
+  --bl-bg-row: #25161e;
+  --bl-bg-subtle: #35212b;
+  --bl-surface: #49303b;
+  --bl-surface-hover: #60404d;
+  --bl-border: #50333f;
+  --bl-border-muted: #39232d;
+  --bl-border-control: #714c58;
+  --bl-border-strong: #916a73;
+
+  --bl-text: #f7e1db;
+  --bl-text-soft: #ddbcb7;
+  --bl-text-muted: #9b7477;
+  --bl-text-dim: #b18a89;
+  --bl-text-inverse: #ffffff;
+  --bl-accent: #ff9a62;
+  --bl-accent-strong: #ffd166;
+  --bl-secondary: #df86d8;
+  --bl-ok: #9bd58c;
+  --bl-error: #ff8497;
+  --bl-warn: #ffd166;
+  --bl-info: #8fc9e8;
+
+  --bl-shadow-popover: 0 6px 18px rgba(18, 6, 11, 0.62);
+  --bl-shadow-text: 0 1px 2px rgba(0, 0, 0, 0.58);
+  --bl-overlay: rgba(22, 12, 18, 0.76);
+  --bl-overlay-strong: rgba(32, 18, 25, 0.9);
+  --bl-overlay-solid: rgba(41, 25, 34, 0.96);
+  --bl-accent-wash: rgba(255, 154, 98, 0.15);
+  --bl-accent-wash-strong: rgba(255, 154, 98, 0.29);
+  --bl-secondary-wash: rgba(223, 134, 216, 0.15);
+  --bl-secondary-wash-strong: rgba(223, 134, 216, 0.27);
+}
+
+:root.bl-theme-sunset-light,
+:root.bl-theme-sunset {
+
+  --bl-light-bg: #fff4ec;
+  --bl-light-bg-strong: #f5e5db;
+  --bl-light-bg-deep: #e8d1c5;
+  --bl-light-bg-row: #f0ddd2;
+  --bl-light-bg-subtle: #fff9f5;
+  --bl-light-surface: #ffffff;
+  --bl-light-surface-hover: #f4ddd2;
+  --bl-light-border: #dbbdb1;
+  --bl-light-border-muted: #ead2c8;
+  --bl-light-border-control: #c49c8f;
+  --bl-light-border-strong: #9e756c;
+
+  --bl-light-text: #39241f;
+  --bl-light-text-soft: #65483f;
+  --bl-light-text-muted: #96756d;
+  --bl-light-text-dim: #7d5d55;
+  --bl-light-text-inverse: #1c0f0c;
+  --bl-light-accent: #ad4f19;
+  --bl-light-accent-strong: #8a6200;
+  --bl-light-secondary: #964c8c;
+  --bl-light-ok: #427a35;
+  --bl-light-error: #b43d50;
+  --bl-light-warn: #8a6200;
+  --bl-light-info: #32718f;
+
+  --bl-light-shadow-popover: 0 8px 22px rgba(83, 45, 34, 0.2);
+  --bl-light-shadow-text: 0 1px 2px rgba(255, 255, 255, 0.72);
+  --bl-light-overlay: rgba(255, 244, 236, 0.8);
+  --bl-light-overlay-strong: rgba(255, 249, 245, 0.92);
+  --bl-light-overlay-solid: rgba(255, 244, 236, 0.97);
+  --bl-light-accent-wash: rgba(173, 79, 25, 0.12);
+  --bl-light-accent-wash-strong: rgba(173, 79, 25, 0.23);
+  --bl-light-secondary-wash: rgba(150, 76, 140, 0.12);
+  --bl-light-secondary-wash-strong: rgba(150, 76, 140, 0.22);
+}
+
+:root.bl-theme-high-contrast-dark,
+:root.bl-theme-high-contrast {
+  color-scheme: dark;
+
+  --bl-bg: #000000;
+  --bl-bg-strong: #090909;
+  --bl-bg-deep: #000000;
+  --bl-bg-row: #101010;
+  --bl-bg-subtle: #181818;
+  --bl-surface: #202020;
+  --bl-surface-hover: #333333;
+  --bl-border: #767676;
+  --bl-border-muted: #595959;
+  --bl-border-control: #a5a5a5;
+  --bl-border-strong: #ffffff;
+
+  --bl-text: #ffffff;
+  --bl-text-soft: #e2e2e2;
+  --bl-text-muted: #b8b8b8;
+  --bl-text-dim: #cccccc;
+  --bl-text-inverse: #000000;
+  --bl-accent: #66e6ff;
+  --bl-accent-strong: #ffeb66;
+  --bl-secondary: #ff9cda;
+  --bl-ok: #85f28b;
+  --bl-error: #ff8c8c;
+  --bl-warn: #ffeb66;
+  --bl-info: #66e6ff;
+
+  --bl-shadow-popover: 0 0 0 2px #ffffff;
+  --bl-shadow-text: 0 1px 2px #000000;
+  --bl-overlay: rgba(0, 0, 0, 0.82);
+  --bl-overlay-strong: rgba(0, 0, 0, 0.94);
+  --bl-overlay-solid: #000000;
+  --bl-accent-wash: rgba(102, 230, 255, 0.2);
+  --bl-accent-wash-strong: rgba(102, 230, 255, 0.38);
+  --bl-secondary-wash: rgba(255, 156, 218, 0.2);
+  --bl-secondary-wash-strong: rgba(255, 156, 218, 0.38);
+}
+
+:root.bl-theme-high-contrast-light,
+:root.bl-theme-high-contrast {
+
+  --bl-light-bg: #ffffff;
+  --bl-light-bg-strong: #f4f4f4;
+  --bl-light-bg-deep: #e3e3e3;
+  --bl-light-bg-row: #ededed;
+  --bl-light-bg-subtle: #fafafa;
+  --bl-light-surface: #ffffff;
+  --bl-light-surface-hover: #dedede;
+  --bl-light-border: #666666;
+  --bl-light-border-muted: #8a8a8a;
+  --bl-light-border-control: #333333;
+  --bl-light-border-strong: #000000;
+
+  --bl-light-text: #000000;
+  --bl-light-text-soft: #242424;
+  --bl-light-text-muted: #4f4f4f;
+  --bl-light-text-dim: #383838;
+  --bl-light-text-inverse: #ffffff;
+  --bl-light-accent: #005fcc;
+  --bl-light-accent-strong: #00536b;
+  --bl-light-secondary: #7a1f78;
+  --bl-light-ok: #176b24;
+  --bl-light-error: #a8001c;
+  --bl-light-warn: #755000;
+  --bl-light-info: #00536b;
+
+  --bl-light-shadow-popover: 0 0 0 2px #000000;
+  --bl-light-shadow-text: 0 1px 2px #ffffff;
+  --bl-light-overlay: rgba(255, 255, 255, 0.84);
+  --bl-light-overlay-strong: rgba(255, 255, 255, 0.95);
+  --bl-light-overlay-solid: #ffffff;
+  --bl-light-accent-wash: rgba(0, 95, 204, 0.14);
+  --bl-light-accent-wash-strong: rgba(0, 95, 204, 0.28);
+  --bl-light-secondary-wash: rgba(122, 31, 120, 0.14);
+  --bl-light-secondary-wash-strong: rgba(122, 31, 120, 0.26);
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([class*="bl-theme-"]):not(.bl-color-scheme-dark),
+  :root.bl-theme-purple-blue:not(.bl-color-scheme-dark),
+  :root.bl-theme-candy:not(.bl-color-scheme-dark),
+  :root.bl-theme-earth:not(.bl-color-scheme-dark),
+  :root.bl-theme-ocean:not(.bl-color-scheme-dark),
+  :root.bl-theme-sunset:not(.bl-color-scheme-dark),
+  :root.bl-theme-high-contrast:not(.bl-color-scheme-dark) {
+    color-scheme: light;
+
+    --bl-bg: var(--bl-light-bg);
+    --bl-bg-strong: var(--bl-light-bg-strong);
+    --bl-bg-deep: var(--bl-light-bg-deep);
+    --bl-bg-row: var(--bl-light-bg-row);
+    --bl-bg-subtle: var(--bl-light-bg-subtle);
+    --bl-surface: var(--bl-light-surface);
+    --bl-surface-hover: var(--bl-light-surface-hover);
+    --bl-border: var(--bl-light-border);
+    --bl-border-muted: var(--bl-light-border-muted);
+    --bl-border-control: var(--bl-light-border-control);
+    --bl-border-strong: var(--bl-light-border-strong);
+    --bl-text: var(--bl-light-text);
+    --bl-text-soft: var(--bl-light-text-soft);
+    --bl-text-muted: var(--bl-light-text-muted);
+    --bl-text-dim: var(--bl-light-text-dim);
+    --bl-text-inverse: var(--bl-light-text-inverse);
+    --bl-accent: var(--bl-light-accent);
+    --bl-accent-strong: var(--bl-light-accent-strong);
+    --bl-secondary: var(--bl-light-secondary);
+    --bl-ok: var(--bl-light-ok);
+    --bl-error: var(--bl-light-error);
+    --bl-warn: var(--bl-light-warn);
+    --bl-info: var(--bl-light-info);
+    --bl-shadow-popover: var(--bl-light-shadow-popover);
+    --bl-shadow-text: var(--bl-light-shadow-text);
+    --bl-overlay: var(--bl-light-overlay);
+    --bl-overlay-strong: var(--bl-light-overlay-strong);
+    --bl-overlay-solid: var(--bl-light-overlay-solid);
+    --bl-accent-wash: var(--bl-light-accent-wash);
+    --bl-accent-wash-strong: var(--bl-light-accent-wash-strong);
+    --bl-secondary-wash: var(--bl-light-secondary-wash);
+    --bl-secondary-wash-strong: var(--bl-light-secondary-wash-strong);
+  }
+}
+
+:root.bl-theme-purple-blue.bl-color-scheme-light,
+:root.bl-theme-candy.bl-color-scheme-light,
+:root.bl-theme-earth.bl-color-scheme-light,
+:root.bl-theme-ocean.bl-color-scheme-light,
+:root.bl-theme-sunset.bl-color-scheme-light,
+:root.bl-theme-high-contrast.bl-color-scheme-light,
+:root.bl-theme-light,
+:root.bl-theme-purple-blue-light,
+:root.bl-theme-anime-light,
+:root.bl-theme-candy-light,
+:root.bl-theme-earth-light,
+:root.bl-theme-ocean-light,
+:root.bl-theme-sunset-light,
+:root.bl-theme-high-contrast-light {
+  color-scheme: light;
+
+  --bl-bg: var(--bl-light-bg);
+  --bl-bg-strong: var(--bl-light-bg-strong);
+  --bl-bg-deep: var(--bl-light-bg-deep);
+  --bl-bg-row: var(--bl-light-bg-row);
+  --bl-bg-subtle: var(--bl-light-bg-subtle);
+  --bl-surface: var(--bl-light-surface);
+  --bl-surface-hover: var(--bl-light-surface-hover);
+  --bl-border: var(--bl-light-border);
+  --bl-border-muted: var(--bl-light-border-muted);
+  --bl-border-control: var(--bl-light-border-control);
+  --bl-border-strong: var(--bl-light-border-strong);
+  --bl-text: var(--bl-light-text);
+  --bl-text-soft: var(--bl-light-text-soft);
+  --bl-text-muted: var(--bl-light-text-muted);
+  --bl-text-dim: var(--bl-light-text-dim);
+  --bl-text-inverse: var(--bl-light-text-inverse);
+  --bl-accent: var(--bl-light-accent);
+  --bl-accent-strong: var(--bl-light-accent-strong);
+  --bl-secondary: var(--bl-light-secondary);
+  --bl-ok: var(--bl-light-ok);
+  --bl-error: var(--bl-light-error);
+  --bl-warn: var(--bl-light-warn);
+  --bl-info: var(--bl-light-info);
+  --bl-shadow-popover: var(--bl-light-shadow-popover);
+  --bl-shadow-text: var(--bl-light-shadow-text);
+  --bl-overlay: var(--bl-light-overlay);
+  --bl-overlay-strong: var(--bl-light-overlay-strong);
+  --bl-overlay-solid: var(--bl-light-overlay-solid);
+  --bl-accent-wash: var(--bl-light-accent-wash);
+  --bl-accent-wash-strong: var(--bl-light-accent-wash-strong);
+  --bl-secondary-wash: var(--bl-light-secondary-wash);
+  --bl-secondary-wash-strong: var(--bl-light-secondary-wash-strong);
+}
+
+:root.bl-color-scheme-dark {
+  color-scheme: dark;
+}
+
+:root {
+  --bl-action-point-icon: #f59e0b;
+  --bl-focus-point-icon: #3b82f6;
+}
+
+.bl-point-icon {
+  line-height: 1;
+}
+
+.bl-point-icon-action {
+  color: var(--bl-action-point-icon);
+}
+
+.bl-point-icon-focus {
+  color: var(--bl-focus-point-icon);
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+html {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  font-family: var(--bl-font-mono);
+  background: var(--bl-bg);
+  color: var(--bl-text);
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+@supports (height: 100dvh) {
+  body { height: 100dvh; }
+}
+
+:where(body > #app) {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+label { color: var(--bl-text-soft); }
+input, select, textarea, button { font-family: var(--bl-font-mono); }
+
+input[type=file],
+input[type=text],
+input[type=number],
+select,
+textarea {
+  font-size: var(--bl-text-sm);
+  color: var(--bl-text);
+  background: var(--bl-surface);
+  border: 1px solid var(--bl-border-control);
+  border-radius: var(--bl-radius-sm);
+  padding: 3px 6px;
+}
+
+input[type=file] {
+  padding: 2px 6px;
+  cursor: pointer;
+}
+
+input:focus, select:focus, textarea:focus {
+  outline: none;
+  border-color: var(--bl-accent);
+}
+
+button {
+  padding: 3px 10px;
+  background: var(--bl-surface);
+  border: 1px solid var(--bl-border-control);
+  color: var(--bl-text);
+  border-radius: var(--bl-radius-sm);
+  cursor: pointer;
+  font-size: var(--bl-text-sm);
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+button:hover:not(:disabled) { background: var(--bl-surface-hover); }
+button:disabled { opacity: 0.4; cursor: default; }
+
+.bl-button-primary {
+  color: var(--bl-text-inverse);
+  background: var(--bl-accent);
+  border-color: var(--bl-accent);
+}
+
+.bl-button-secondary { border-color: var(--bl-secondary); }
+.bl-button-danger { color: var(--bl-error); border-color: var(--bl-error); }
+.bl-button-quiet { padding-inline: 5px; background: transparent; border-color: transparent; }
+
+.bl-status { font-size: var(--bl-text-sm); }
+.bl-status-muted { color: var(--bl-text-muted); }
+.bl-status-ok { color: var(--bl-ok); }
+.bl-status-error { color: var(--bl-error); }
+.bl-status-warn { color: var(--bl-warn); }
+.bl-status-info { color: var(--bl-info); }
+
+.bl-auth-gate {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-height: 180px;
+  padding: 24px;
+  text-align: center;
+}
+
+.bl-auth-dialog {
+  width: min(420px, calc(100vw - 24px));
+  border: 1px solid var(--bl-border-control);
+  border-radius: var(--bl-radius-md);
+  color: var(--bl-text);
+  background: var(--bl-bg-strong);
+  box-shadow: var(--bl-shadow-popover);
+}
+
+.bl-auth-dialog::backdrop { background: var(--bl-overlay); }
+
+.bl-auth-form,
+.bl-auth-form label {
+  display: grid;
+  gap: 6px;
+}
+
+.bl-auth-form { gap: 14px; }
+.bl-auth-form h2 { margin: 0; font-size: var(--bl-text-xl); }
+.bl-auth-form input { width: 100%; }
+
+.bl-auth-scopes {
+  margin: 0;
+  color: var(--bl-text-muted);
+  font-size: var(--bl-text-xs);
+  line-height: 1.45;
+}
+
+.bl-auth-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+#toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 5px 12px;
+  background: var(--bl-bg-strong);
+  border-bottom: 1px solid var(--bl-border);
+  flex-shrink: 0;
+  font-size: var(--bl-text-md);
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+.bl-toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 5px 12px;
+  background: var(--bl-bg-strong);
+  border-bottom: 1px solid var(--bl-border);
+  flex-shrink: 0;
+  font-size: var(--bl-text-md);
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+.toolbar-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.toolbar-row + .toolbar-row {
+  border-top: 1px solid var(--bl-border-muted);
+  padding-top: 5px;
+}
+
+.toolbar-heading {
+  flex-wrap: nowrap;
+}
+
+.toolbar-heading .toolbar-brand {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.toolbar-heading .client-menu-button {
+  flex: 0 0 auto;
+}
+
+.toolbar-row > * {
+  max-width: 100%;
+}
+
+.toolbar-row input[type=file],
+.toolbar-row input[type=text],
+.toolbar-row input[type=number],
+.toolbar-row select,
+.toolbar-row .search-dropdown {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.toolbar-sep { color: var(--bl-border); }
+
+.toolbar-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--bl-text);
+  font-weight: bold;
+  white-space: nowrap;
+}
+
+.toolbar-brand img {
+  width: 20px;
+  height: 20px;
+  image-rendering: pixelated;
+}
+
+.nav-link,
+.toolbar-link {
+  color: var(--bl-accent);
+  text-decoration: none;
+  font-size: var(--bl-text-sm);
+  white-space: nowrap;
+}
+
+.nav-link:hover,
+.toolbar-link:hover {
+  text-decoration: underline;
+}
+
+.push { margin-left: auto; }
+
+.client-menu-button {
+  margin-left: auto;
+}
+
+.client-menu-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 72px 16px 16px;
+  background: var(--bl-overlay);
+}
+
+.client-menu-backdrop.hidden {
+  display: none;
+}
+
+.client-menu-card {
+  width: min(560px, 100%);
+  max-height: calc(100vh - 96px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--bl-border-control);
+  border-radius: var(--bl-radius-md);
+  background: var(--bl-bg-strong);
+  box-shadow: var(--bl-shadow-popover);
+}
+
+.client-menu-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--bl-border);
+  background: var(--bl-bg);
+}
+
+.client-menu-kicker {
+  color: var(--bl-accent-strong);
+  font-size: var(--bl-text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.client-menu-title {
+  margin-top: 3px;
+  color: var(--bl-text);
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.client-menu-close {
+  padding: 2px 7px;
+  line-height: 1.2;
+}
+
+.client-menu-list {
+  overflow-y: auto;
+  padding: 6px;
+}
+
+.client-menu-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  padding: 10px;
+  border: 1px solid transparent;
+  border-radius: var(--bl-radius-md);
+  color: var(--bl-text);
+  text-decoration: none;
+}
+
+.client-menu-item:hover {
+  background: var(--bl-surface);
+  border-color: var(--bl-border-control);
+}
+
+.client-menu-item.active {
+  background: var(--bl-bg-subtle);
+  border-color: var(--bl-accent);
+}
+
+.client-menu-item-main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.client-menu-item-title {
+  color: var(--bl-text);
+  font-size: var(--bl-text-md);
+  font-weight: bold;
+}
+
+.client-menu-admin-badge {
+  color: var(--bl-error);
+  font-size: 0.7em;
+  vertical-align: middle;
+  margin-left: 6px;
+}
+
+.client-menu-item-desc {
+  color: var(--bl-text-soft);
+  font-size: var(--bl-text-sm);
+  line-height: 1.45;
+}
+
+.client-menu-item-label {
+  color: var(--bl-text-muted);
+  font-size: var(--bl-text-xs);
+  white-space: nowrap;
+}
+
+.client-menu-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 12px;
+  padding: 10px 14px;
+  border-top: 1px solid var(--bl-border);
+  background: var(--bl-bg);
+}
+
+.client-menu-admin-note {
+  flex-basis: 100%;
+  margin: 0;
+  color: var(--bl-text-muted);
+  font-size: var(--bl-text-xs);
+}
+
+.client-menu-theme {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--bl-text-soft);
+  font-size: var(--bl-text-sm);
+}
+
+.client-menu-theme select {
+  max-width: 230px;
+}
+
+.client-menu-discord {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 7px 11px;
+  border: 1px solid var(--bl-border-control);
+  border-radius: var(--bl-radius-sm);
+  color: var(--bl-text);
+  font-size: var(--bl-text-sm);
+  text-decoration: none;
+}
+
+.client-menu-discord:hover {
+  background: var(--bl-surface);
+  border-color: var(--bl-accent);
+}
+
+/* Help modal (shares the client-menu chrome) */
+.help-section-title {
+  color: var(--bl-accent-strong);
+  font-size: var(--bl-text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 10px 10px 2px;
+}
+
+.help-intro {
+  margin: 6px 10px 2px;
+  color: var(--bl-text-soft);
+  font-size: var(--bl-text-sm);
+  line-height: 1.45;
+}
+
+#world-info,
+#status,
+#save-status,
+#runtime-status {
+  font-size: var(--bl-text-xs);
+  color: var(--bl-text-muted);
+}
+
+#status.ok,
+#save-status.ok,
+#api-status.ok,
+#api-status.live,
+#problems.ok {
+  color: var(--bl-ok);
+}
+
+#status.err,
+#save-status.err,
+#api-status.err,
+#api-status.error {
+  color: var(--bl-error);
+}
+
+#api-status {
+  font-size: var(--bl-text-sm);
+  color: var(--bl-text-muted);
+  flex: 1 1 180px;
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.toolbar-row #status,
+.toolbar-row #save-status,
+.toolbar-row #runtime-status,
+.toolbar-row #tempo-status {
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.app-grid,
+.app-split {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.app-grid { display: grid; }
+.app-split { display: flex; }
+
+.control-stack {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.field-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.field-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.field-row label {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: var(--bl-text-sm);
+  color: var(--bl-text-soft);
+}
+
+.hint {
+  color: var(--bl-text-muted);
+  font-size: var(--bl-text-xs);
+  line-height: 1.5;
+}
+
+.pill-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.pill {
+  color: var(--bl-text);
+  background: var(--bl-surface);
+  border: 1px solid var(--bl-border-control);
+  border-radius: var(--bl-radius-sm);
+  padding: 1px 6px;
+  font-size: var(--bl-text-xs);
+  white-space: nowrap;
+}
+
+.tag-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  min-height: 24px;
+}
+
+.tag-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  max-width: 100%;
+  padding: 3px 6px;
+  border: 1px solid var(--bl-border-strong);
+  border-radius: var(--bl-radius-sm);
+  background: var(--bl-surface);
+  color: var(--bl-text);
+  font-size: var(--bl-text-sm);
+}
+
+.tag-pill span {
+  overflow-wrap: anywhere;
+}
+
+.tag-pill button {
+  padding: 0 4px;
+  border-color: var(--bl-text-dim);
+  line-height: 1.2;
+}
+
+.tag-entry {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.tag-entry input,
+.tag-entry select {
+  flex: 1;
+}
+
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.metric {
+  border: 1px solid var(--bl-border);
+  background: var(--bl-bg);
+  border-radius: var(--bl-radius-md);
+  padding: 8px;
+  min-height: 52px;
+}
+
+.metric-value {
+  color: var(--bl-text);
+  font-size: 20px;
+  line-height: 1.1;
+}
+
+.metric-label {
+  color: var(--bl-text-muted);
+  font-size: var(--bl-text-xs);
+  margin-top: 4px;
+}
+
+.activity-row {
+  display: grid;
+  grid-template-columns: 76px minmax(0, 1fr);
+  gap: 8px;
+  padding: 5px 10px;
+  border-bottom: 1px solid var(--bl-bg-row);
+  font-size: var(--bl-text-sm);
+  line-height: 1.45;
+}
+
+.activity-row.kind-error { color: var(--bl-error); }
+.activity-row.kind-ok { color: var(--bl-ok); }
+
+.activity-time {
+  color: var(--bl-text-muted);
+  white-space: nowrap;
+}
+
+.pane {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bl-bg-strong);
+  border-right: 1px solid var(--bl-border);
+  overflow: hidden;
+}
+
+.pane:last-child { border-right: none; }
+
+.pane-header {
+  flex-shrink: 0;
+  padding: 7px 10px;
+  border-bottom: 1px solid var(--bl-border);
+  background: var(--bl-bg);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 33px;
+}
+
+.pane-title {
+  color: var(--bl-accent-strong);
+  font-weight: bold;
+  font-size: var(--bl-text-md);
+  white-space: nowrap;
+}
+
+.pane-tools {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+
+.pane-count {
+  color: var(--bl-text-muted);
+  font-size: var(--bl-text-xs);
+  white-space: nowrap;
+}
+
+.pane-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.pane-body::-webkit-scrollbar,
+.editor-scroll::-webkit-scrollbar,
+textarea::-webkit-scrollbar {
+  width: 6px;
+}
+
+.pane-body::-webkit-scrollbar-track,
+.editor-scroll::-webkit-scrollbar-track,
+textarea::-webkit-scrollbar-track {
+  background: var(--bl-bg-strong);
+}
+
+.pane-body::-webkit-scrollbar-thumb,
+.editor-scroll::-webkit-scrollbar-thumb,
+textarea::-webkit-scrollbar-thumb {
+  background: var(--bl-surface);
+  border-radius: var(--bl-radius-sm);
+}
+
+.entity-row {
+  padding: 5px 10px;
+  border-bottom: 1px solid var(--bl-bg-row);
+  cursor: pointer;
+  font-size: var(--bl-text-sm);
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  gap: 5px;
+}
+
+.entity-row:hover,
+.entity-row.active {
+  background: var(--bl-surface);
+}
+
+.entity-name {
+  color: var(--bl-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.entity-meta {
+  color: var(--bl-text-dim);
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.editor-scroll {
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.section,
+.form-section {
+  border-bottom: 1px solid var(--bl-bg);
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+}
+
+.section-title {
+  color: var(--bl-accent-strong);
+  font-size: var(--bl-text-sm);
+  font-weight: bold;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.section-title button { margin-left: auto; padding: 1px 7px; }
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.field {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  font-size: var(--bl-text-xs);
+  color: var(--bl-text-soft);
+}
+
+.field.wide { grid-column: span 2; }
+.field.full { grid-column: 1 / -1; }
+.field input, .field select, .field textarea { width: 100%; }
+
+.field-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.nullable-choice {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: var(--bl-text-muted);
+  font-size: var(--bl-text-xs);
+  font-weight: normal;
+  white-space: nowrap;
+}
+
+.nullable-choice input {
+  width: auto;
+}
+
+.search-dropdown {
+  position: relative;
+  min-width: 190px;
+  display: inline-block;
+}
+
+.search-dropdown::after {
+  content: "";
+  position: absolute;
+  right: 9px;
+  top: 50%;
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid var(--bl-text-muted);
+  pointer-events: none;
+  transform: translateY(-35%);
+}
+
+.search-dropdown-input {
+  width: 100%;
+  padding-right: 26px;
+  cursor: pointer;
+}
+
+.search-dropdown:focus-within::after {
+  border-top-color: var(--bl-accent);
+}
+
+.search-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 3px;
+  max-height: 240px;
+  overflow-y: auto;
+  background: var(--bl-bg);
+  border: 1px solid var(--bl-border-control);
+  border-radius: var(--bl-radius-md);
+  box-shadow: var(--bl-shadow-popover);
+  z-index: 30;
+}
+
+.search-dropdown-menu.hidden {
+  display: none;
+}
+
+.search-dropdown-option {
+  display: block;
+  width: 100%;
+  padding: 4px 8px;
+  color: var(--bl-text);
+  background: transparent;
+  cursor: pointer;
+  font-size: var(--bl-text-sm);
+  text-align: left;
+  border: 0;
+  border-bottom: 1px solid var(--bl-bg-strong);
+  border-radius: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.search-dropdown-option:hover,
+.search-dropdown-option.active {
+  background: var(--bl-surface);
+}
+
+.search-dropdown-empty {
+  padding: 8px;
+  color: var(--bl-text-muted);
+  font-size: var(--bl-text-sm);
+}
+
+textarea {
+  resize: vertical;
+  line-height: 1.45;
+  tab-size: 2;
+}
+
+.button-row {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  flex-wrap: wrap;
+  margin-top: 8px;
+}
+
+.empty {
+  padding: 18px;
+  text-align: center;
+  color: var(--bl-text-muted);
+  font-size: var(--bl-text-md);
+  line-height: 1.7;
+}
+
+.tiny { font-size: var(--bl-text-xs); color: var(--bl-text-muted); }
+.danger { color: var(--bl-error); }
+.bad-json { border-color: var(--bl-error) !important; }
+
+.record-card,
+.action-card {
+  border: 1px solid var(--bl-border);
+  border-radius: var(--bl-radius-md);
+  margin-bottom: 9px;
+  background: var(--bl-bg);
+  overflow: hidden;
+}
+
+.record-head,
+.action-head {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--bl-border);
+  color: var(--bl-accent);
+  font-size: var(--bl-text-sm);
+}
+
+.record-head button,
+.action-head button {
+  margin-left: auto;
+  padding: 1px 7px;
+}
+
+.record-body,
+.action-body {
+  padding: 8px;
+}
+
+#json-output {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  border: none;
+  border-radius: 0;
+  padding: 10px;
+  background: var(--bl-bg-deep);
+  color: var(--bl-text);
+  font-size: var(--bl-text-sm);
+  line-height: 1.45;
+  resize: none;
+}
+
+#problems {
+  flex-shrink: 0;
+  border-top: 1px solid var(--bl-border);
+  background: var(--bl-bg-strong);
+  color: var(--bl-error);
+  font-size: var(--bl-text-sm);
+  padding: 7px 10px;
+  max-height: 120px;
+  overflow-y: auto;
+}
+
+@media (max-width: 760px), (max-width: 900px) and (max-height: 500px) {
+  #toolbar,
+  .bl-toolbar {
+    max-height: 45dvh;
+    padding: 6px 8px;
+    overflow-y: auto;
+  }
+
+  .toolbar-row {
+    flex-shrink: 0;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .toolbar-row > * {
+    max-width: 100%;
+  }
+
+  .toolbar-row input[type=file],
+  .toolbar-row input[type=text],
+  .toolbar-row input[type=number],
+  .toolbar-row select,
+  .search-dropdown {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .toolbar-sep {
+    display: none;
+  }
+
+  .push,
+  .client-menu-button {
+    margin-left: 0;
+  }
+
+  button,
+  input[type=file],
+  input[type=text],
+  input[type=number],
+  select {
+    min-height: 30px;
+  }
+
+  .client-menu-backdrop {
+    padding: 12px;
+  }
+
+  .client-menu-card {
+    max-height: calc(100dvh - 24px);
+  }
+
+  .client-menu-item {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 5px;
+  }
+
+  .client-menu-item-label {
+    white-space: normal;
+  }
+
+  .client-menu-footer,
+  .client-menu-theme {
+    align-items: stretch;
+  }
+
+  .client-menu-theme {
+    flex: 1 1 100%;
+    flex-direction: column;
+  }
+
+  .client-menu-theme select {
+    width: 100%;
+    max-width: none;
+  }
+
+  .pane {
+    border-right: 0;
+    border-bottom: 1px solid var(--bl-border);
+  }
+
+  .pane:last-child {
+    border-bottom: 0;
+  }
+
+  .form-grid,
+  .metric-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .field.wide {
+    grid-column: auto;
+  }
+}