:root {
    --bg: #2f3538;
    --bg-alt: #41484d;
    --panel: #3d4347;
    --panel-top: #4b5358;
    --border: #596065;
    --text: #e6e0cf;
    --muted: #cbc3b4;
    --incoming: #d5ccc2;
    --incoming-text: #514e4a;
    --outgoing: #bfe07a;
    --outgoing-text: #3d4e20;
    --asa: #e77ea8;
    --asa-text: #6f2445;
    --male: #3a6290;
    --female: #eb3d2d;
    --button: #5a6166;
    --button-light: #b6ada1;
    --button-light-text: #464039;
    --danger: #eb593f;
    --body-radial: rgba(255, 255, 255, 0.05);
    --body-bg-start: #32383c;
    --body-bg-mid: #2b3033;
    --body-bg-end: #262b2e;
    --topbar-start: #3d4448;
    --topbar-end: #353b3f;
    --topbar-border: #2b2f32;
    --panel-start: rgba(68, 75, 80, 0.97);
    --panel-end: rgba(58, 64, 68, 0.98);
    --panel-border: #2f3438;
    --panel-title-start: #50585d;
    --panel-title-end: #485055;
    --input-bg: #ddd5cb;
    --input-text: #4d4a46;
    --input-border: #938d84;
    --input-focus: #738ba4;
    --composer-input-bg: #ddd8d2;
    --composer-input-text: #44413d;
    --composer-input-border: #71839a;
    --control-bg: rgba(25, 29, 31, 0.24);
    --control-border: rgba(112, 120, 126, 0.5);
    --control-hover-bg: rgba(213, 204, 188, 0.11);
    --control-active-bg: #d6cec2;
    --control-active-text: #403a34;
    --control-text: #d9d0c1;
    --theme-accent: #f1c25a;
    --theme-accent-2: #88a879;
    --theme-swatch: linear-gradient(135deg, #4b5358, #bfe07a);
    --shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
    --font-ui: "Trebuchet MS", "Candara", "Segoe UI", sans-serif;
}

body[data-mask-theme="night"] {
    --bg: #101820;
    --bg-alt: #1b2530;
    --panel: #1f2934;
    --panel-top: #293642;
    --border: #344150;
    --text: #e5edf4;
    --muted: #b8c4cf;
    --incoming: #d3dbe5;
    --incoming-text: #202832;
    --outgoing: #90d7c7;
    --outgoing-text: #102f2a;
    --asa: #d89bd0;
    --asa-text: #41203d;
    --male: #416f9f;
    --female: #d4536b;
    --button: #334252;
    --button-light: #a9bac7;
    --button-light-text: #17212b;
    --danger: #e65e4d;
    --body-radial: rgba(112, 183, 255, 0.08);
    --body-bg-start: #17202a;
    --body-bg-mid: #101820;
    --body-bg-end: #090f14;
    --topbar-start: #202c37;
    --topbar-end: #15202a;
    --topbar-border: #0b1117;
    --panel-start: rgba(31, 42, 53, 0.98);
    --panel-end: rgba(21, 31, 41, 0.98);
    --panel-border: #101821;
    --panel-title-start: #2a3744;
    --panel-title-end: #22303c;
    --input-bg: #d8dee6;
    --input-text: #202831;
    --input-border: #697784;
    --input-focus: #80a8d7;
    --composer-input-bg: #dbe1e8;
    --composer-input-text: #1f2830;
    --composer-input-border: #6480a0;
    --control-bg: rgba(5, 10, 15, 0.32);
    --control-border: rgba(105, 125, 145, 0.55);
    --control-hover-bg: rgba(144, 215, 199, 0.12);
    --control-active-bg: #9fcfe3;
    --control-active-text: #122330;
    --control-text: #d8e4ec;
    --theme-accent: #7db3ff;
    --theme-accent-2: #90d7c7;
    --theme-swatch: linear-gradient(135deg, #121b24, #7db3ff 55%, #90d7c7);
}

body[data-mask-theme="ocean"] {
    --bg: #22353d;
    --bg-alt: #2d4850;
    --panel: #2f454c;
    --panel-top: #3d5960;
    --border: #527078;
    --text: #eef1e5;
    --muted: #c9d7d4;
    --incoming: #d7e4df;
    --incoming-text: #29403f;
    --outgoing: #bedf91;
    --outgoing-text: #253914;
    --asa: #f1a8b6;
    --asa-text: #5a2530;
    --male: #32749d;
    --female: #d8565f;
    --button: #45616a;
    --button-light: #c5d5cf;
    --button-light-text: #263b3d;
    --danger: #e45e48;
    --body-radial: rgba(125, 210, 197, 0.08);
    --body-bg-start: #2a424a;
    --body-bg-mid: #20353d;
    --body-bg-end: #1b2a30;
    --topbar-start: #344f57;
    --topbar-end: #28414a;
    --topbar-border: #193039;
    --panel-start: rgba(54, 78, 86, 0.98);
    --panel-end: rgba(44, 64, 71, 0.98);
    --panel-border: #1f373f;
    --panel-title-start: #45626a;
    --panel-title-end: #3c565e;
    --input-bg: #dce5df;
    --input-text: #263835;
    --input-border: #82978f;
    --input-focus: #70a8bc;
    --composer-input-bg: #e0e7e2;
    --composer-input-text: #243432;
    --composer-input-border: #6c98a6;
    --control-bg: rgba(17, 34, 39, 0.28);
    --control-border: rgba(130, 166, 170, 0.52);
    --control-hover-bg: rgba(194, 224, 217, 0.13);
    --control-active-bg: #c6e0db;
    --control-active-text: #243c3e;
    --control-text: #e3eadf;
    --theme-accent: #eed072;
    --theme-accent-2: #78c3b3;
    --theme-swatch: linear-gradient(135deg, #203b47, #78c3b3 55%, #eed072);
}

body[data-mask-theme="forest"] {
    --bg: #283329;
    --bg-alt: #3b4938;
    --panel: #3a4638;
    --panel-top: #4c5b47;
    --border: #68745f;
    --text: #ede8d5;
    --muted: #d0c9ad;
    --incoming: #dcd7c7;
    --incoming-text: #3e3b30;
    --outgoing: #badb83;
    --outgoing-text: #263813;
    --asa: #e7a6ac;
    --asa-text: #5a2930;
    --male: #3f6d86;
    --female: #d94d3e;
    --button: #56634c;
    --button-light: #c9c2a6;
    --button-light-text: #373322;
    --danger: #e15b3e;
    --body-radial: rgba(215, 196, 121, 0.08);
    --body-bg-start: #334036;
    --body-bg-mid: #283329;
    --body-bg-end: #202820;
    --topbar-start: #465342;
    --topbar-end: #344136;
    --topbar-border: #263128;
    --panel-start: rgba(68, 80, 62, 0.98);
    --panel-end: rgba(56, 67, 54, 0.98);
    --panel-border: #2a3428;
    --panel-title-start: #53634d;
    --panel-title-end: #4a5847;
    --input-bg: #dfd8c3;
    --input-text: #3d392d;
    --input-border: #948b73;
    --input-focus: #7d9976;
    --composer-input-bg: #e1dac9;
    --composer-input-text: #3a362b;
    --composer-input-border: #83956f;
    --control-bg: rgba(24, 31, 22, 0.28);
    --control-border: rgba(135, 151, 113, 0.52);
    --control-hover-bg: rgba(220, 215, 191, 0.13);
    --control-active-bg: #d0c79e;
    --control-active-text: #332d1d;
    --control-text: #ebe3cc;
    --theme-accent: #d7c479;
    --theme-accent-2: #8eb579;
    --theme-swatch: linear-gradient(135deg, #2f4930, #8eb579 55%, #d7c479);
}

body[data-mask-theme="copper"] {
    --bg: #342f31;
    --bg-alt: #4a3d3a;
    --panel: #463f3e;
    --panel-top: #5b514e;
    --border: #74655d;
    --text: #f0e4d2;
    --muted: #dccab5;
    --incoming: #e3d6c7;
    --incoming-text: #473b34;
    --outgoing: #c6db8b;
    --outgoing-text: #333d17;
    --asa: #efa2c0;
    --asa-text: #5b273d;
    --male: #466a91;
    --female: #e45b3f;
    --button: #675751;
    --button-light: #d2c0ab;
    --button-light-text: #40352e;
    --danger: #ef5e38;
    --body-radial: rgba(237, 171, 96, 0.09);
    --body-bg-start: #423637;
    --body-bg-mid: #332d2e;
    --body-bg-end: #282425;
    --topbar-start: #534743;
    --topbar-end: #413635;
    --topbar-border: #2d2625;
    --panel-start: rgba(76, 66, 63, 0.98);
    --panel-end: rgba(64, 55, 53, 0.98);
    --panel-border: #332b29;
    --panel-title-start: #62544f;
    --panel-title-end: #564945;
    --input-bg: #e4d6c6;
    --input-text: #42352f;
    --input-border: #9c8172;
    --input-focus: #c48761;
    --composer-input-bg: #e6d8c8;
    --composer-input-text: #3f342f;
    --composer-input-border: #a37c68;
    --control-bg: rgba(30, 24, 23, 0.28);
    --control-border: rgba(156, 129, 114, 0.54);
    --control-hover-bg: rgba(228, 214, 198, 0.13);
    --control-active-bg: #e1b37b;
    --control-active-text: #3b2417;
    --control-text: #efe0cd;
    --theme-accent: #e1a15c;
    --theme-accent-2: #bbd176;
    --theme-swatch: linear-gradient(135deg, #4a3230, #e1a15c 55%, #bbd176);
}

body[data-mask-theme="graphite"] {
    --bg: #25282a;
    --bg-alt: #363a3d;
    --panel: #33373a;
    --panel-top: #45494c;
    --border: #5b6265;
    --text: #ece8dd;
    --muted: #cfc7b7;
    --incoming: #d9d6cf;
    --incoming-text: #34373a;
    --outgoing: #9dd6bd;
    --outgoing-text: #183b31;
    --asa: #e3a15e;
    --asa-text: #4f2b10;
    --male: #3d6f8a;
    --female: #d6514a;
    --button: #50575a;
    --button-light: #c6beb1;
    --button-light-text: #343230;
    --danger: #e45a46;
    --body-radial: rgba(236, 197, 91, 0.08);
    --body-bg-start: #323638;
    --body-bg-mid: #25282a;
    --body-bg-end: #1c1f21;
    --topbar-start: #404447;
    --topbar-end: #2e3234;
    --topbar-border: #1d2022;
    --panel-start: rgba(56, 60, 63, 0.98);
    --panel-end: rgba(45, 49, 51, 0.98);
    --panel-border: #242729;
    --panel-title-start: #4c5154;
    --panel-title-end: #414548;
    --input-bg: #dedbd3;
    --input-text: #343638;
    --input-border: #82817b;
    --input-focus: #b58f45;
    --composer-input-bg: #e2ded7;
    --composer-input-text: #303234;
    --composer-input-border: #8b7f66;
    --control-bg: rgba(18, 20, 21, 0.32);
    --control-border: rgba(128, 134, 136, 0.55);
    --control-hover-bg: rgba(229, 206, 149, 0.13);
    --control-active-bg: #d1b36b;
    --control-active-text: #2f2514;
    --control-text: #e6dfd2;
    --theme-accent: #ecc55b;
    --theme-accent-2: #76c6a8;
    --theme-swatch: linear-gradient(135deg, #25282a, #ecc55b 52%, #76c6a8);
}

body[data-mask-theme="cherry"] {
    --bg: #33272c;
    --bg-alt: #49333a;
    --panel: #44333a;
    --panel-top: #5a4149;
    --border: #72535a;
    --text: #f2e3dc;
    --muted: #dbc5bb;
    --incoming: #e4d6d0;
    --incoming-text: #463238;
    --outgoing: #9edbc9;
    --outgoing-text: #153a33;
    --asa: #f1a65d;
    --asa-text: #5c2f0d;
    --male: #49728d;
    --female: #d64b66;
    --button: #674a51;
    --button-light: #d3bdb6;
    --button-light-text: #3c2a2d;
    --danger: #ee5945;
    --body-radial: rgba(246, 112, 126, 0.09);
    --body-bg-start: #463038;
    --body-bg-mid: #30242a;
    --body-bg-end: #241b20;
    --topbar-start: #55404a;
    --topbar-end: #3e2b33;
    --topbar-border: #2b1d23;
    --panel-start: rgba(74, 53, 61, 0.98);
    --panel-end: rgba(61, 45, 52, 0.98);
    --panel-border: #34242a;
    --panel-title-start: #614750;
    --panel-title-end: #543d46;
    --input-bg: #e6d8d3;
    --input-text: #412f34;
    --input-border: #9a7a80;
    --input-focus: #d66276;
    --composer-input-bg: #eadbd6;
    --composer-input-text: #3b2c31;
    --composer-input-border: #a27680;
    --control-bg: rgba(31, 19, 24, 0.3);
    --control-border: rgba(160, 117, 128, 0.55);
    --control-hover-bg: rgba(158, 219, 201, 0.13);
    --control-active-bg: #d98f88;
    --control-active-text: #361d21;
    --control-text: #eedbd5;
    --theme-accent: #f06f7f;
    --theme-accent-2: #8bd8c7;
    --theme-swatch: linear-gradient(135deg, #412630, #f06f7f 52%, #8bd8c7);
}

body[data-mask-theme="mint"] {
    --bg: #21342f;
    --bg-alt: #2f4942;
    --panel: #304740;
    --panel-top: #415d54;
    --border: #58786e;
    --text: #eef0df;
    --muted: #cad9cc;
    --incoming: #d8e3d9;
    --incoming-text: #243b34;
    --outgoing: #d7dd89;
    --outgoing-text: #343914;
    --asa: #ef9f8e;
    --asa-text: #5b291f;
    --male: #37738d;
    --female: #df6154;
    --button: #49665d;
    --button-light: #c8d8cc;
    --button-light-text: #253a34;
    --danger: #e75b42;
    --body-radial: rgba(126, 211, 171, 0.09);
    --body-bg-start: #2e463f;
    --body-bg-mid: #21342f;
    --body-bg-end: #192822;
    --topbar-start: #3b574f;
    --topbar-end: #2a413b;
    --topbar-border: #1b2c27;
    --panel-start: rgba(51, 74, 67, 0.98);
    --panel-end: rgba(42, 62, 56, 0.98);
    --panel-border: #22332e;
    --panel-title-start: #48675e;
    --panel-title-end: #3e5a52;
    --input-bg: #dce5d9;
    --input-text: #263a34;
    --input-border: #789080;
    --input-focus: #72bd9c;
    --composer-input-bg: #e2e7dc;
    --composer-input-text: #263832;
    --composer-input-border: #719684;
    --control-bg: rgba(15, 29, 25, 0.28);
    --control-border: rgba(118, 156, 138, 0.54);
    --control-hover-bg: rgba(215, 221, 137, 0.13);
    --control-active-bg: #b4d9be;
    --control-active-text: #20372d;
    --control-text: #e5ecdd;
    --theme-accent: #80d4a8;
    --theme-accent-2: #e0cf72;
    --theme-swatch: linear-gradient(135deg, #1f3a34, #80d4a8 55%, #e0cf72);
}

body[data-mask-theme="terminal"] {
    --bg: #111816;
    --bg-alt: #1d2824;
    --panel: #202a26;
    --panel-top: #2b3933;
    --border: #3b4f47;
    --text: #e4f0dd;
    --muted: #b9cfbd;
    --incoming: #cfdacf;
    --incoming-text: #17231e;
    --outgoing: #95e081;
    --outgoing-text: #17300f;
    --asa: #e6ba5e;
    --asa-text: #4a3510;
    --male: #4d837d;
    --female: #df654f;
    --button: #33453e;
    --button-light: #b9d3bc;
    --button-light-text: #16251c;
    --danger: #e35b42;
    --body-radial: rgba(109, 232, 120, 0.08);
    --body-bg-start: #1d2b25;
    --body-bg-mid: #101815;
    --body-bg-end: #080d0b;
    --topbar-start: #26362f;
    --topbar-end: #14211c;
    --topbar-border: #070e0b;
    --panel-start: rgba(31, 43, 38, 0.98);
    --panel-end: rgba(20, 31, 27, 0.98);
    --panel-border: #0e1814;
    --panel-title-start: #31443d;
    --panel-title-end: #283830;
    --input-bg: #d5dfd2;
    --input-text: #14211b;
    --input-border: #6f826f;
    --input-focus: #75d579;
    --composer-input-bg: #d9e2d5;
    --composer-input-text: #142019;
    --composer-input-border: #6c936f;
    --control-bg: rgba(2, 9, 6, 0.36);
    --control-border: rgba(89, 137, 98, 0.58);
    --control-hover-bg: rgba(149, 224, 129, 0.13);
    --control-active-bg: #8fd789;
    --control-active-text: #0d2110;
    --control-text: #d9ead5;
    --theme-accent: #8ee875;
    --theme-accent-2: #e6ba5e;
    --theme-swatch: linear-gradient(135deg, #08110d, #8ee875 55%, #e6ba5e);
}

body[data-mask-theme="solar"] {
    --bg: #352f24;
    --bg-alt: #4a4231;
    --panel: #453d30;
    --panel-top: #5b523f;
    --border: #756a52;
    --text: #f2e7cf;
    --muted: #dac8a5;
    --incoming: #e4d8c0;
    --incoming-text: #443829;
    --outgoing: #a8d7bb;
    --outgoing-text: #1d3a2d;
    --asa: #ec8f6f;
    --asa-text: #552717;
    --male: #526f8a;
    --female: #dc6654;
    --button: #655943;
    --button-light: #d3c3a4;
    --button-light-text: #3d3424;
    --danger: #e76543;
    --body-radial: rgba(244, 180, 86, 0.1);
    --body-bg-start: #4a3f2b;
    --body-bg-mid: #352d22;
    --body-bg-end: #292218;
    --topbar-start: #554934;
    --topbar-end: #403521;
    --topbar-border: #2d2416;
    --panel-start: rgba(73, 63, 47, 0.98);
    --panel-end: rgba(61, 53, 40, 0.98);
    --panel-border: #342b1d;
    --panel-title-start: #61543d;
    --panel-title-end: #554832;
    --input-bg: #e5d9bf;
    --input-text: #3f3524;
    --input-border: #9a8761;
    --input-focus: #d49745;
    --composer-input-bg: #e8dcc5;
    --composer-input-text: #3c3224;
    --composer-input-border: #9c855a;
    --control-bg: rgba(30, 23, 13, 0.3);
    --control-border: rgba(158, 135, 92, 0.55);
    --control-hover-bg: rgba(168, 215, 187, 0.13);
    --control-active-bg: #e1b766;
    --control-active-text: #3a2810;
    --control-text: #eee1c6;
    --theme-accent: #f1b45a;
    --theme-accent-2: #98d2b2;
    --theme-swatch: linear-gradient(135deg, #44351f, #f1b45a 52%, #98d2b2);
}

body[data-mask-theme="polar"] {
    --bg: #263239;
    --bg-alt: #36454d;
    --panel: #344149;
    --panel-top: #465760;
    --border: #5b737d;
    --text: #eef0ec;
    --muted: #ccd7d7;
    --incoming: #dce4e5;
    --incoming-text: #26323a;
    --outgoing: #c4d98a;
    --outgoing-text: #2d3c16;
    --asa: #e8a1b4;
    --asa-text: #572836;
    --male: #42779b;
    --female: #d85465;
    --button: #52646d;
    --button-light: #c9d3d3;
    --button-light-text: #263239;
    --danger: #e85f4d;
    --body-radial: rgba(161, 214, 229, 0.09);
    --body-bg-start: #34464f;
    --body-bg-mid: #24323a;
    --body-bg-end: #1b252b;
    --topbar-start: #40545e;
    --topbar-end: #2f414a;
    --topbar-border: #1f2d34;
    --panel-start: rgba(56, 71, 80, 0.98);
    --panel-end: rgba(46, 60, 68, 0.98);
    --panel-border: #27373f;
    --panel-title-start: #4b606a;
    --panel-title-end: #42565f;
    --input-bg: #e0e6e7;
    --input-text: #26323a;
    --input-border: #7d9198;
    --input-focus: #7fb7cb;
    --composer-input-bg: #e3e9e9;
    --composer-input-text: #253139;
    --composer-input-border: #7696a4;
    --control-bg: rgba(17, 28, 34, 0.3);
    --control-border: rgba(125, 153, 164, 0.55);
    --control-hover-bg: rgba(196, 217, 138, 0.13);
    --control-active-bg: #bfdce3;
    --control-active-text: #1d323a;
    --control-text: #e8eeee;
    --theme-accent: #9bd6e6;
    --theme-accent-2: #c8db75;
    --theme-swatch: linear-gradient(135deg, #263239, #9bd6e6 54%, #c8db75);
}

body[data-mask-theme="blackout"] {
    --bg: #050608;
    --bg-alt: #10151b;
    --panel: #0d1218;
    --panel-top: #171e27;
    --border: #3d4b59;
    --text: #f8fbff;
    --muted: #c9d5e2;
    --incoming: #f4f7fb;
    --incoming-text: #071017;
    --outgoing: #dfff3d;
    --outgoing-text: #111b00;
    --asa: #ff4fd8;
    --asa-text: #240019;
    --male: #008dff;
    --female: #ff2f5f;
    --button: #1f2b38;
    --button-light: #f4f7fb;
    --button-light-text: #071017;
    --danger: #ff3b30;
    --body-radial: rgba(0, 229, 255, 0.12);
    --body-bg-start: #0b1118;
    --body-bg-mid: #050608;
    --body-bg-end: #010203;
    --topbar-start: #111923;
    --topbar-end: #06090d;
    --topbar-border: #000;
    --panel-start: rgba(15, 21, 29, 0.99);
    --panel-end: rgba(7, 11, 16, 0.99);
    --panel-border: #273545;
    --panel-title-start: #1c2632;
    --panel-title-end: #121923;
    --input-bg: #f5f8fc;
    --input-text: #071017;
    --input-border: #94a7b8;
    --input-focus: #00e5ff;
    --composer-input-bg: #f8fbff;
    --composer-input-text: #05080c;
    --composer-input-border: #00e5ff;
    --control-bg: rgba(0, 0, 0, 0.48);
    --control-border: rgba(0, 229, 255, 0.68);
    --control-hover-bg: rgba(223, 255, 61, 0.16);
    --control-active-bg: #00e5ff;
    --control-active-text: #001015;
    --control-text: #f8fbff;
    --theme-accent: #ffe600;
    --theme-accent-2: #00e5ff;
    --theme-swatch: linear-gradient(135deg, #020304, #ffe600 50%, #00e5ff);
}

body[data-mask-theme="hazard"] {
    --bg: #080706;
    --bg-alt: #17120d;
    --panel: #14100c;
    --panel-top: #21180f;
    --border: #6f5624;
    --text: #fff7df;
    --muted: #f0dca9;
    --incoming: #fff2c2;
    --incoming-text: #1b1205;
    --outgoing: #ffea00;
    --outgoing-text: #1d1700;
    --asa: #ff3b30;
    --asa-text: #2b0400;
    --male: #1292ff;
    --female: #ff3b30;
    --button: #302516;
    --button-light: #ffea00;
    --button-light-text: #171000;
    --danger: #ff2d1f;
    --body-radial: rgba(255, 234, 0, 0.12);
    --body-bg-start: #1b1409;
    --body-bg-mid: #080706;
    --body-bg-end: #020201;
    --topbar-start: #23180b;
    --topbar-end: #100b05;
    --topbar-border: #000;
    --panel-start: rgba(27, 19, 10, 0.99);
    --panel-end: rgba(13, 10, 6, 0.99);
    --panel-border: #4f3a13;
    --panel-title-start: #2e210e;
    --panel-title-end: #1e1509;
    --input-bg: #fff6d7;
    --input-text: #1b1205;
    --input-border: #c9a12d;
    --input-focus: #ffea00;
    --composer-input-bg: #fff9e6;
    --composer-input-text: #170f04;
    --composer-input-border: #ffcc00;
    --control-bg: rgba(0, 0, 0, 0.48);
    --control-border: rgba(255, 234, 0, 0.62);
    --control-hover-bg: rgba(255, 59, 48, 0.14);
    --control-active-bg: #ffea00;
    --control-active-text: #1b1300;
    --control-text: #fff7df;
    --theme-accent: #ffea00;
    --theme-accent-2: #ff3b30;
    --theme-swatch: linear-gradient(135deg, #080706, #ffea00 50%, #ff3b30);
}

body[data-mask-theme="cyan-magenta"] {
    --bg: #050811;
    --bg-alt: #111827;
    --panel: #0f1522;
    --panel-top: #182034;
    --border: #315679;
    --text: #f4fbff;
    --muted: #c8d8ea;
    --incoming: #eef7ff;
    --incoming-text: #08101a;
    --outgoing: #00f0ff;
    --outgoing-text: #00171a;
    --asa: #ff4fc3;
    --asa-text: #250019;
    --male: #1e9bff;
    --female: #ff4fc3;
    --button: #1b2940;
    --button-light: #f1f7ff;
    --button-light-text: #08101a;
    --danger: #ff4b4b;
    --body-radial: rgba(255, 79, 195, 0.12);
    --body-bg-start: #10182a;
    --body-bg-mid: #050811;
    --body-bg-end: #01030a;
    --topbar-start: #15233a;
    --topbar-end: #090e1a;
    --topbar-border: #000;
    --panel-start: rgba(15, 22, 36, 0.99);
    --panel-end: rgba(7, 11, 20, 0.99);
    --panel-border: #223855;
    --panel-title-start: #1e304c;
    --panel-title-end: #152338;
    --input-bg: #f3f8ff;
    --input-text: #08101a;
    --input-border: #86a6c7;
    --input-focus: #00f0ff;
    --composer-input-bg: #f8fbff;
    --composer-input-text: #050912;
    --composer-input-border: #00f0ff;
    --control-bg: rgba(0, 0, 0, 0.45);
    --control-border: rgba(0, 240, 255, 0.6);
    --control-hover-bg: rgba(255, 79, 195, 0.16);
    --control-active-bg: #ff4fc3;
    --control-active-text: #210014;
    --control-text: #f4fbff;
    --theme-accent: #00f0ff;
    --theme-accent-2: #ff4fc3;
    --theme-swatch: linear-gradient(135deg, #050811, #00f0ff 50%, #ff4fc3);
}

body[data-mask-theme="redline"] {
    --bg: #090608;
    --bg-alt: #171014;
    --panel: #141014;
    --panel-top: #211820;
    --border: #623744;
    --text: #fff6f8;
    --muted: #efc7cf;
    --incoming: #fff0f2;
    --incoming-text: #19080b;
    --outgoing: #ffffff;
    --outgoing-text: #15070a;
    --asa: #ff1744;
    --asa-text: #2b0008;
    --male: #18a7ff;
    --female: #ff1744;
    --button: #321d25;
    --button-light: #fff0f2;
    --button-light-text: #19080b;
    --danger: #ff1744;
    --body-radial: rgba(255, 23, 68, 0.14);
    --body-bg-start: #211016;
    --body-bg-mid: #090608;
    --body-bg-end: #020102;
    --topbar-start: #28151d;
    --topbar-end: #10070b;
    --topbar-border: #000;
    --panel-start: rgba(28, 16, 22, 0.99);
    --panel-end: rgba(12, 7, 10, 0.99);
    --panel-border: #4f2430;
    --panel-title-start: #351b26;
    --panel-title-end: #23111a;
    --input-bg: #fff3f5;
    --input-text: #17070a;
    --input-border: #c88794;
    --input-focus: #ff1744;
    --composer-input-bg: #fff8f9;
    --composer-input-text: #140609;
    --composer-input-border: #ff1744;
    --control-bg: rgba(0, 0, 0, 0.5);
    --control-border: rgba(255, 23, 68, 0.66);
    --control-hover-bg: rgba(255, 255, 255, 0.12);
    --control-active-bg: #ff1744;
    --control-active-text: #fff;
    --control-text: #fff6f8;
    --theme-accent: #ff1744;
    --theme-accent-2: #ffffff;
    --theme-swatch: linear-gradient(135deg, #090608, #ff1744 52%, #ffffff);
}

body[data-mask-theme="black-red"] {
    --bg: #030304;
    --bg-alt: #0b0c0f;
    --panel: #090a0d;
    --panel-top: #161014;
    --border: #4f171e;
    --text: #fff6f7;
    --muted: #d9b7bc;
    --incoming: #f7f7f8;
    --incoming-text: #070708;
    --outgoing: #ff2a3d;
    --outgoing-text: #fff7f8;
    --asa: #b00020;
    --asa-text: #fff1f3;
    --male: #f2f2f3;
    --female: #ff2a3d;
    --button: #17181c;
    --button-light: #ff2a3d;
    --button-light-text: #fff7f8;
    --danger: #ff1f35;
    --body-radial: rgba(255, 31, 53, 0.13);
    --body-bg-start: #13070a;
    --body-bg-mid: #050506;
    --body-bg-end: #000000;
    --topbar-start: #12090c;
    --topbar-end: #030304;
    --topbar-border: #000000;
    --panel-start: rgba(11, 12, 15, 0.99);
    --panel-end: rgba(3, 3, 4, 0.99);
    --panel-border: #3d1118;
    --panel-title-start: #1f1015;
    --panel-title-end: #0d080b;
    --input-bg: #f4f4f5;
    --input-text: #060607;
    --input-border: #b48c91;
    --input-focus: #ff2a3d;
    --composer-input-bg: #fbfbfc;
    --composer-input-text: #050506;
    --composer-input-border: #ff2a3d;
    --control-bg: rgba(0, 0, 0, 0.58);
    --control-border: rgba(255, 42, 61, 0.7);
    --control-hover-bg: rgba(255, 42, 61, 0.18);
    --control-active-bg: #ff2a3d;
    --control-active-text: #ffffff;
    --control-text: #fff6f7;
    --theme-accent: #ff2a3d;
    --theme-accent-2: #ffffff;
    --theme-swatch: linear-gradient(135deg, #000000, #151515 42%, #ff2a3d 43%, #870014 100%);
}

body[data-mask-theme="ice-black"] {
    --bg: #05090d;
    --bg-alt: #101820;
    --panel: #0d151d;
    --panel-top: #172430;
    --border: #426475;
    --text: #f4fdff;
    --muted: #c7dde6;
    --incoming: #effbff;
    --incoming-text: #061219;
    --outgoing: #a8f3ff;
    --outgoing-text: #00171c;
    --asa: #ffb000;
    --asa-text: #251600;
    --male: #00b8ff;
    --female: #ffb000;
    --button: #1c2d39;
    --button-light: #eefbff;
    --button-light-text: #061219;
    --danger: #ff5a3c;
    --body-radial: rgba(168, 243, 255, 0.13);
    --body-bg-start: #10202b;
    --body-bg-mid: #05090d;
    --body-bg-end: #010204;
    --topbar-start: #152736;
    --topbar-end: #071018;
    --topbar-border: #000;
    --panel-start: rgba(14, 23, 32, 0.99);
    --panel-end: rgba(6, 11, 16, 0.99);
    --panel-border: #2d4b5a;
    --panel-title-start: #1e3444;
    --panel-title-end: #152735;
    --input-bg: #f0fbff;
    --input-text: #061219;
    --input-border: #86b3c4;
    --input-focus: #a8f3ff;
    --composer-input-bg: #f7fdff;
    --composer-input-text: #041016;
    --composer-input-border: #6eeaff;
    --control-bg: rgba(0, 0, 0, 0.46);
    --control-border: rgba(168, 243, 255, 0.62);
    --control-hover-bg: rgba(255, 176, 0, 0.16);
    --control-active-bg: #a8f3ff;
    --control-active-text: #00171c;
    --control-text: #f4fdff;
    --theme-accent: #a8f3ff;
    --theme-accent-2: #ffb000;
    --theme-swatch: linear-gradient(135deg, #05090d, #a8f3ff 50%, #ffb000);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(circle at top left, var(--body-radial), transparent 28%),
        linear-gradient(180deg, var(--body-bg-start), var(--body-bg-mid) 36%, var(--body-bg-end));
    color: var(--text);
    font-family: var(--font-ui);
}

body {
    min-height: 100vh;
}

button,
input,
textarea {
    font: inherit;
}

.app-shell {
    min-height: 100vh;
    padding: 14px;
}

.topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "status status"
        "build actions";
    align-items: start;
    gap: 8px 12px;
    background: linear-gradient(180deg, var(--topbar-start), var(--topbar-end));
    border: 1px solid var(--topbar-border);
    box-shadow: var(--shadow);
    padding: 8px 12px;
    margin-bottom: 14px;
}

.topbar__status,
.topbar__meta,
.topbar__build {
    font-size: 14px;
    color: var(--muted);
}

.topbar__status {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 8px;
    overflow: visible;
    white-space: normal;
}

.topbar__status > span:first-child {
    flex: 0 0 auto;
}

.topbar__platform-breakdown {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
}

.topbar-platform-stat {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    max-width: 300px;
    overflow: hidden;
    padding: 3px 9px;
    border: 1px solid rgba(133, 147, 154, 0.4);
    border-radius: 999px;
    background: rgba(25, 29, 31, 0.28);
    color: #e2dccd;
    font-size: 11.5px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-platform-stat[role="button"] {
    cursor: pointer;
}

.topbar-platform-stat[role="button"]:hover,
.topbar-platform-stat[role="button"]:focus-visible {
    outline: none;
    border-color: rgba(255, 219, 123, 0.9);
    box-shadow: 0 0 0 2px rgba(255, 196, 75, 0.18);
}

.topbar-platform-stat::before {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #88939a;
    content: "";
}

.topbar-platform-stat--ok {
    border-color: rgba(152, 206, 106, 0.45);
}

.topbar-platform-stat--connected,
.topbar-platform-stat--ok {
    border-color: rgba(152, 206, 106, 0.52);
}

.topbar-platform-stat--connected::before,
.topbar-platform-stat--ok::before {
    background: #98ce6a;
    box-shadow: 0 0 7px rgba(152, 206, 106, 0.65);
}

.topbar-platform-stat--empty {
    opacity: 0.72;
}

.topbar-platform-stat--waiting {
    border-color: rgba(220, 176, 88, 0.58);
    color: #f2d6a0;
}

.topbar-platform-stat--waiting::before {
    background: #dcb058;
}

.topbar-platform-stat--warning,
.topbar-platform-stat--has-issue:not(.topbar-platform-stat--error) {
    border-color: rgba(255, 202, 75, 0.78);
    background: rgba(107, 75, 19, 0.36);
    color: #ffe3a3;
}

.topbar-platform-stat--warning::before,
.topbar-platform-stat--has-issue:not(.topbar-platform-stat--error)::before {
    background: #ffc94b;
    box-shadow: 0 0 8px rgba(255, 201, 75, 0.7);
}

.topbar-platform-stat--disabled {
    opacity: 0.68;
}

.topbar-platform-stat--disabled::before {
    background: #747f85;
}

.topbar-platform-stat--error {
    border-color: rgba(235, 89, 63, 0.62);
    color: #ffd2cb;
}

.topbar-platform-stat--error::before {
    background: #eb593f;
    box-shadow: 0 0 7px rgba(235, 89, 63, 0.58);
}

.topbar__status-group {
    grid-area: status;
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.topbar__platform {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    overflow: hidden;
    padding: 3px 8px;
    border: 1px solid rgba(133, 147, 154, 0.42);
    border-radius: 999px;
    background: rgba(27, 31, 34, 0.32);
    color: #e5edf2;
    font-size: 12px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__platform[role="button"] {
    cursor: pointer;
}

.topbar__platform[role="button"]:hover,
.topbar__platform[role="button"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 196, 75, 0.2);
}

.topbar__platform--active {
    border-color: rgba(152, 206, 106, 0.58);
    background: rgba(95, 133, 63, 0.22);
    color: #daf0c5;
}

.topbar__platform--waiting {
    border-color: rgba(92, 137, 185, 0.62);
    background: rgba(62, 97, 134, 0.24);
    color: #cfe4f7;
}

.topbar__platform--warning {
    border-color: rgba(214, 169, 80, 0.72);
    background: rgba(133, 95, 39, 0.28);
    color: #f8dfad;
}

.topbar__platform--error {
    border-color: rgba(255, 79, 55, 0.84);
    background: rgba(141, 37, 27, 0.42);
    color: #ffd4cf;
}

.topbar__platform--offline {
    color: var(--muted);
}

.topbar__build {
    grid-area: build;
    justify-self: start;
    max-width: 230px;
    overflow: hidden;
    padding: 3px 8px;
    border: 1px solid var(--control-border);
    border-radius: 999px;
    background: var(--control-bg);
    color: var(--text);
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    row-gap: 8px;
}

.topbar__meta {
    display: none;
}

.theme-picker,
.notification-sound {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border: 1px solid var(--control-border);
    background: var(--control-bg);
    border-radius: 4px;
}

.theme-picker__swatch {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: var(--theme-swatch);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.theme-picker__label,
.notification-sound__label {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

.theme-picker__select,
.notification-sound__select {
    padding: 7px 10px;
    border: 1px solid var(--input-border);
    border-radius: 3px;
    background: var(--input-bg);
    color: var(--input-text);
}

.theme-picker__select {
    min-width: 122px;
}

.notification-sound__select {
    min-width: 146px;
}

.notification-sound__volume {
    width: 96px;
    accent-color: var(--theme-accent-2);
}

.notification-sound__value {
    min-width: 38px;
    color: #e4dbc9;
    font-size: 12px;
    text-align: right;
}

.notification-sound__test {
    min-width: 64px;
    padding-inline: 10px;
}

.notification-sound__status {
    min-width: 72px;
    color: #e4dbc9;
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
}

.notification-sound__status--ready {
    color: #b9d7a6;
}

.notification-sound__status--blocked {
    color: #f1c27d;
}

.notification-sound__status--off {
    color: var(--muted);
}

.session-status {
    min-width: 118px;
    padding: 6px 10px;
    border: 1px solid rgba(214, 169, 80, 0.5);
    border-radius: 4px;
    background: rgba(83, 64, 35, 0.26);
    color: #f5ddb0;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.session-status--warning {
    border-color: rgba(235, 89, 63, 0.66);
    background: rgba(119, 50, 38, 0.34);
    color: #ffd5cc;
}

.session-status--hidden {
    display: none;
}

.app-update {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 4px 6px 4px 10px;
    border: 1px solid rgba(214, 169, 80, 0.62);
    border-radius: 4px;
    background: rgba(83, 64, 35, 0.3);
    color: #f6dfb4;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.app-update.is-hidden {
    display: none;
}

.app-update__button {
    min-height: 24px;
    padding: 4px 8px;
}

.debug-toggle {
    min-width: 96px;
    white-space: nowrap;
}

.debug-toggle--active {
    background: #6a7e8f;
    color: #eef5fb;
}

.icon-button,
.logout-button,
.muted-button,
.accent-button,
.login-admin-button,
.login-button {
    border: 0;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

.icon-button:hover,
.logout-button:hover,
.muted-button:hover,
.accent-button:hover,
.login-admin-button:hover,
.login-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.icon-button:disabled,
.logout-button:disabled,
.muted-button:disabled,
.accent-button:disabled,
.login-admin-button:disabled,
.login-button:disabled {
    cursor: not-allowed;
    opacity: 0.72;
    transform: none;
    filter: none;
}

.login-form--submitting .login-button,
.login-form--submitting ~ .login-admin-button:disabled {
    cursor: wait;
}

.icon-button {
    width: 28px;
    height: 28px;
    border-radius: 3px;
    background: #f1c25a;
    color: #3c3422;
    font-weight: 700;
}

.logout-button {
    background: var(--danger);
    color: #fff1e7;
    padding: 8px 14px;
    border-radius: 3px;
}

.layout-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--control-border);
    border-radius: 4px;
    background: var(--control-bg);
}

.layout-switch__button {
    min-height: 31px;
    padding: 6px 10px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--control-text);
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
}

.layout-switch__button:hover {
    background: var(--control-hover-bg);
}

.layout-switch__button.is-active {
    background: var(--control-active-bg);
    color: var(--control-active-text);
}

.dashboard {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(420px, 1fr) minmax(260px, 320px);
    grid-template-areas: "customer main moderator";
    gap: 14px;
    align-items: start;
}

.dashboard__side,
.dashboard__queue,
.dashboard__main {
    display: grid;
    gap: 14px;
}

.dashboard__queue {
    display: none;
}

.dashboard__side--customer {
    grid-area: customer;
}

.dashboard__main {
    grid-area: main;
}

.dashboard__side--moderator {
    grid-area: moderator;
}

body[data-mask-layout="work"] .dashboard {
    grid-template-columns: minmax(260px, 320px) minmax(420px, 1fr) minmax(260px, 320px);
    grid-template-areas:
        "customer queue moderator"
        "customer main moderator";
    align-items: start;
}

body[data-mask-layout="work"] .dashboard__queue {
    display: grid;
    grid-area: queue;
}

.panel {
    background: linear-gradient(180deg, var(--panel-start), var(--panel-end));
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.debug-panel.is-hidden {
    display: none;
}

.panel__title {
    padding: 11px 16px;
    background: linear-gradient(180deg, var(--panel-title-start), var(--panel-title-end));
    color: var(--text);
    text-align: center;
    font-size: 15px;
    border-bottom: 1px solid var(--border);
}

.panel__title--split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

.queue-panel {
    align-self: start;
}

.queue-panel__mode {
    padding: 3px 7px;
    border: 1px solid rgba(213, 204, 188, 0.22);
    border-radius: 999px;
    color: #f0e0c7;
    font-size: 11px;
    line-height: 1.1;
}

.queue-overview {
    display: grid;
    gap: 10px;
    padding: 12px;
}

body[data-mask-layout="work"] .queue-overview {
    grid-template-columns: minmax(180px, 1fr) minmax(145px, 0.72fr) minmax(178px, 1.08fr);
    gap: 8px;
    padding: 10px;
}

.queue-overview__section {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.queue-overview__label {
    color: #d2c8b9;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.queue-overview__card,
.queue-platform-row {
    border: 1px solid rgba(133, 147, 154, 0.32);
    background: rgba(25, 29, 31, 0.23);
}

.queue-overview__card {
    display: grid;
    gap: 5px;
    padding: 10px;
}

.queue-overview__card--active {
    border-color: rgba(152, 206, 106, 0.48);
    background: rgba(86, 118, 66, 0.19);
}

.queue-overview__card-title {
    color: #f0e5d6;
    font-size: 14px;
    font-weight: 700;
}

.queue-overview__card-meta,
.queue-overview__empty {
    color: #cfc5b7;
    font-size: 12px;
    line-height: 1.35;
}

.queue-overview__card-meta--warn {
    color: #ffd595;
}

.queue-platform-list {
    display: grid;
    gap: 6px;
}

body[data-mask-layout="work"] .queue-platform-list {
    max-height: 96px;
    overflow: auto;
}

body[data-mask-layout="work"] .queue-overview__card {
    padding: 9px;
}

body[data-mask-layout="work"] .queue-overview__card-title {
    font-size: 13px;
}

body[data-mask-layout="work"] .queue-overview__section:nth-child(2) .queue-overview__card-meta {
    display: none;
}

.queue-platform-row {
    display: grid;
    grid-template-columns: minmax(54px, auto) 1fr auto;
    gap: 7px;
    align-items: center;
    padding: 8px 9px;
    color: #e6dccd;
    font-size: 12px;
}

.queue-platform-row[role="button"] {
    cursor: pointer;
}

.queue-platform-row[role="button"]:hover,
.queue-platform-row[role="button"]:focus-visible {
    outline: none;
    border-color: rgba(255, 219, 123, 0.92);
    box-shadow: 0 0 0 2px rgba(255, 196, 75, 0.16);
}

.queue-platform-row__label {
    overflow: hidden;
    color: #f0e5d6;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.queue-platform-row__status {
    overflow: hidden;
    color: #cfc5b7;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.queue-platform-row__count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #f2dca8;
    font-weight: 700;
    white-space: nowrap;
}

.queue-platform-row__issue {
    display: inline-flex;
    min-width: 17px;
    height: 17px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ffc94b;
    color: #1b1510;
    font-size: 11px;
    line-height: 1;
}

.queue-platform-row--connected {
    border-color: rgba(152, 206, 106, 0.43);
}

.queue-platform-row--waiting {
    border-color: rgba(220, 176, 88, 0.5);
}

.queue-platform-row--warning {
    border-color: rgba(255, 202, 75, 0.74);
    background: rgba(116, 79, 21, 0.3);
}

.queue-platform-row--error {
    border-color: rgba(235, 89, 63, 0.55);
    background: rgba(126, 37, 28, 0.24);
}

.queue-platform-row--error .queue-platform-row__issue {
    background: #ff5a42;
    color: #fff4ef;
}

.queue-platform-row--disabled {
    opacity: 0.72;
}

.profile-card {
    padding: 16px;
}

.profile-card__hero {
    display: grid;
    place-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.profile-card__image-wrap {
    position: relative;
    width: 110px;
    height: 110px;
}

.profile-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #9b9488;
    background: #d7d0c4;
}

.profile-card__image-tags {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    pointer-events: none;
}

.profile-card__count {
    color: var(--muted);
    font-size: 14px;
}

.profile-card__count--interactive {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    color: var(--muted);
    text-decoration: underline;
    text-decoration-color: rgba(229, 221, 207, 0.26);
}

.profile-card__count--interactive:hover {
    color: #f2eade;
}

.gender-bar {
    text-align: center;
    padding: 3px 8px;
    margin-bottom: 18px;
    color: #edf3ff;
    letter-spacing: 0.02em;
}

.gender-bar--male {
    background: var(--male);
}

.gender-bar--female {
    background: var(--female);
}

.facts-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
    margin: 0;
}

.facts-grid dt {
    font-weight: 700;
    color: #f0eadf;
}

.facts-grid dd {
    margin: 0;
    color: #d8cfbe;
    text-align: right;
}

.profile-details {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.note-panel .profile-details {
    margin: 0 12px 12px;
}

.profile-details.is-hidden {
    display: none;
}

.profile-section {
    padding: 12px 14px;
    border: 1px solid rgba(216, 207, 190, 0.12);
    background: rgba(20, 24, 27, 0.28);
}

.profile-section__title {
    color: #f0eadf;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
}

.profile-section__text {
    color: #d8cfbe;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.profile-section__text--muted {
    color: #9ea6aa;
    font-size: 13px;
}

.profile-detail-grid {
    display: grid;
    grid-template-columns: minmax(92px, auto) 1fr;
    gap: 8px 14px;
    margin: 0;
}

.profile-detail-grid dt {
    color: #f0eadf;
    font-weight: 700;
}

.profile-detail-grid dd {
    margin: 0;
    color: #d8cfbe;
    text-align: right;
    word-break: break-word;
}

.debug-grid {
    padding: 14px 16px 16px;
    gap: 8px 18px;
}

.debug-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    padding: 14px 16px 0;
}

.debug-summary-card {
    border: 1px solid rgba(212, 202, 187, 0.16);
    background: rgba(18, 23, 27, 0.72);
    padding: 10px 12px;
    min-width: 0;
}

.debug-summary-card--ok {
    border-color: rgba(98, 191, 135, 0.64);
    box-shadow: inset 3px 0 0 rgba(98, 191, 135, 0.82);
}

.debug-summary-card--warn {
    border-color: rgba(240, 187, 86, 0.72);
    box-shadow: inset 3px 0 0 rgba(240, 187, 86, 0.9);
}

.debug-summary-card--error {
    border-color: rgba(255, 92, 92, 0.78);
    box-shadow: inset 3px 0 0 rgba(255, 92, 92, 0.95);
}

.debug-summary-card--muted,
.debug-summary-card--neutral {
    border-color: rgba(166, 176, 181, 0.28);
    box-shadow: inset 3px 0 0 rgba(166, 176, 181, 0.42);
}

.debug-summary-card__label {
    color: #bfc8c9;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.debug-summary-card__value {
    margin-top: 4px;
    color: #f4ecdd;
    font-size: 15px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.debug-summary-card__detail {
    margin-top: 5px;
    color: #c8c0b2;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.debug-grid dd {
    text-align: left;
    font-family: Consolas, "Courier New", monospace;
    word-break: break-word;
}

.debug-sections {
    display: grid;
    gap: 10px;
    padding: 0 16px 16px;
}

.debug-section {
    border: 1px solid rgba(212, 202, 187, 0.14);
    background: rgba(26, 30, 33, 0.32);
}

.debug-section[open] {
    background: rgba(26, 30, 33, 0.44);
}

.debug-section__summary {
    cursor: pointer;
    padding: 10px 12px;
    color: #efe5d6;
    font-weight: 700;
    user-select: none;
}

.debug-section__summary::marker {
    color: #d7cebf;
}

.debug-section__hint {
    display: block;
    margin-top: 4px;
    color: #bfb6a7;
    font-size: 12px;
    font-weight: 400;
}

.debug-section__body {
    margin: 0;
    padding: 0 12px 12px;
}

.debug-section__code {
    margin: 0;
    padding: 12px;
    overflow: auto;
    max-height: 360px;
    background: rgba(11, 14, 16, 0.68);
    border: 1px solid rgba(212, 202, 187, 0.12);
    color: #d7dff0;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.profile-actions > * {
    flex: 1 1 130px;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
}

#open-sent-media {
    flex-basis: 100%;
}

.friend-action-button {
    flex-basis: calc(50% - 5px);
    padding-inline: 6px;
    min-height: 36px;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.nearby-places {
    display: grid;
    gap: 12px;
    padding: 14px 16px 16px;
}

.nearby-popover {
    position: static;
    z-index: 26;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(38vh, 340px);
    margin-top: 10px;
    border: 1px solid rgba(216, 207, 190, 0.24);
    background: #343b3f;
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.38);
}

.nearby-popover.is-hidden {
    display: none;
}

.nearby-popover__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(216, 207, 190, 0.14);
}

.nearby-popover__title {
    color: #f0eadf;
    font-weight: 700;
    font-size: 14px;
}

.nearby-popover__subtitle {
    margin-top: 1px;
    color: #bfc7c9;
    font-size: 11px;
}

.nearby-popover__close {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(216, 207, 190, 0.2);
    background: rgba(20, 24, 27, 0.4);
    color: #f0eadf;
    cursor: pointer;
}

.nearby-popover__body {
    min-height: 0;
    overflow: auto;
}

.nearby-popover .nearby-places {
    gap: 7px;
    padding: 8px;
}

.nearby-popover .nearby-search {
    grid-template-columns: minmax(0, 1fr) 62px 76px;
    gap: 6px;
    align-items: end;
}

.nearby-popover .nearby-search .field span {
    margin-bottom: 3px;
    font-size: 11px;
}

.nearby-popover .nearby-search input {
    min-height: 30px;
    padding: 5px 7px;
    font-size: 12px;
}

.nearby-popover .nearby-search .muted-button {
    grid-column: auto;
    min-height: 30px;
    padding: 0 9px;
    font-size: 12px;
}

.nearby-popover .nearby-quick-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.nearby-popover .nearby-quick-actions .muted-button {
    min-height: 30px;
    padding: 0 8px;
    font-size: 12px;
}

.nearby-popover .nearby-results {
    gap: 6px;
}

.nearby-popover .nearby-results__summary,
.nearby-popover .nearby-results__empty,
.nearby-popover .nearby-results__error,
.nearby-popover .nearby-results__warning {
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.25;
}

.nearby-popover .nearby-results__list {
    gap: 4px;
    max-height: min(30vh, 210px);
    overflow: auto;
    padding-right: 3px;
}

.nearby-popover .nearby-place {
    padding: 0;
}

.nearby-popover .nearby-place__insert {
    grid-template-columns: minmax(0, 1fr) minmax(52px, auto);
    gap: 6px;
    padding: 5px 7px;
}

.nearby-popover .nearby-place__insert strong {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nearby-popover .nearby-place__meta {
    margin-top: 1px;
    font-size: 11px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nearby-popover .nearby-place__distance {
    padding: 2px 5px;
    font-size: 11px;
}

@media (max-width: 760px) {
    .nearby-popover {
        width: min(360px, calc(100vw - 16px));
        max-height: 58vh;
    }

    .nearby-popover .nearby-search {
        grid-template-columns: minmax(0, 1fr) 72px;
    }

    .nearby-popover .nearby-search .muted-button {
        grid-column: 1 / -1;
    }
}

.nearby-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px;
    gap: 10px;
}

.nearby-search .muted-button {
    grid-column: 1 / -1;
}

.nearby-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.nearby-results {
    display: grid;
    gap: 10px;
}

.nearby-results__empty,
.nearby-results__error,
.nearby-results__warning,
.nearby-results__summary {
    padding: 10px 12px;
    border: 1px solid rgba(216, 207, 190, 0.12);
    background: rgba(20, 24, 27, 0.28);
    color: #d8cfbe;
    font-size: 13px;
    line-height: 1.45;
}

.nearby-results__error {
    color: #ffb6a4;
    border-color: rgba(235, 89, 63, 0.32);
}

.nearby-results__warning {
    color: #f2d6a0;
    border-color: rgba(220, 176, 88, 0.34);
}

.nearby-results__list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nearby-place {
    display: block;
    padding: 0;
    border: 1px solid rgba(216, 207, 190, 0.12);
    background: rgba(24, 28, 31, 0.34);
}

.nearby-place__insert {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.nearby-place__insert:hover,
.nearby-place__insert:focus-visible {
    background: rgba(213, 204, 188, 0.08);
    outline: none;
}

.nearby-place strong {
    display: block;
    color: #f0eadf;
    overflow-wrap: anywhere;
}

.nearby-place__meta {
    margin-top: 3px;
    color: #aeb6b9;
    font-size: 12px;
    line-height: 1.35;
}

.nearby-place__distance {
    padding: 4px 7px;
    border-radius: 3px;
    background: rgba(191, 224, 122, 0.14);
    color: #d7ef9f;
    font-size: 12px;
    white-space: nowrap;
}

.muted-button,
.accent-button,
.login-button {
    border-radius: 3px;
    padding: 8px 12px;
}

.muted-button {
    background: var(--button);
    color: #d8d2c8;
}

.muted-button--light {
    background: var(--button-light);
    color: var(--button-light-text);
}

.friend-action-button--ready {
    background: #43ac6a;
    color: #f8fff9;
}

.accent-button {
    background: #f35035;
    color: #fff4ed;
}

.note-panel {
    min-height: 350px;
}

.note-area {
    width: calc(100% - 24px);
    min-height: 268px;
    margin: 12px;
    padding: 14px;
    resize: vertical;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    line-height: 1.45;
}

.note-area:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--input-focus) 38%, transparent);
}

.note-area.is-saving {
    opacity: 0.75;
}

.note-area.is-hidden {
    display: none;
}

.profile-note-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.profile-note-save-status {
    min-height: 17px;
    margin: -2px 0 8px;
    color: #d8cbb9;
    font-size: 12px;
    font-weight: 700;
}

.profile-note-save-status[data-status="error"] {
    color: #ff9a78;
}

.profile-note-save-status[data-status="saved"] {
    color: #b9d6b2;
}

.profile-note-field {
    display: grid;
    gap: 5px;
    color: #f0eadf;
    font-size: 12px;
    font-weight: 700;
    min-width: 0;
}

.profile-note-field > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.profile-note-field.is-filled {
    color: color-mix(in srgb, var(--theme-accent) 88%, var(--text));
}

.profile-note-field.is-filled > span::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 999px;
    background: var(--theme-accent);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--theme-accent) 24%, transparent),
        0 0 12px color-mix(in srgb, var(--theme-accent) 70%, transparent);
}

.profile-note-field--wide {
    grid-column: 1 / -1;
}

.profile-note-field input,
.profile-note-field textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    font: inherit;
    font-weight: 400;
    line-height: 1.4;
    padding: 8px 9px;
    resize: none;
    white-space: pre-wrap;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.profile-note-field textarea {
    min-height: 34px;
}

.profile-note-field.is-filled input,
.profile-note-field.is-filled textarea {
    border-color: color-mix(in srgb, var(--theme-accent) 88%, var(--input-border));
    background: color-mix(in srgb, var(--theme-accent) 16%, var(--input-bg));
    box-shadow:
        inset 5px 0 0 color-mix(in srgb, var(--theme-accent) 92%, transparent),
        0 0 0 2px color-mix(in srgb, var(--theme-accent) 42%, transparent),
        0 0 12px color-mix(in srgb, var(--theme-accent) 20%, transparent);
}

.profile-note-field input:focus,
.profile-note-field textarea:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--input-focus) 38%, transparent);
}

.profile-note-field.is-filled input:focus,
.profile-note-field.is-filled textarea:focus {
    box-shadow:
        inset 5px 0 0 color-mix(in srgb, var(--theme-accent) 92%, transparent),
        0 0 0 2px color-mix(in srgb, var(--input-focus) 70%, transparent),
        0 0 14px color-mix(in srgb, var(--theme-accent) 26%, transparent);
}

.profile-section--note-fields.is-saving {
    opacity: 0.75;
}

@media (max-width: 760px) {
    .profile-note-fields {
        grid-template-columns: 1fr;
    }
}

.note-banner__content {
    min-height: 86px;
    padding: 16px;
    white-space: pre-wrap;
    color: #ddd4c6;
    line-height: 1.5;
}

.chat-panel {
    min-height: 760px;
}

.composer {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.composer__meta,
.composer__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.composer__meta {
    color: #d2c9ba;
    margin-bottom: 8px;
}

.char-counter--invalid {
    color: #ffb6a4;
}

.char-counter--locked {
    color: #f1c25a;
}

.composer__send-status {
    margin: -2px 0 10px;
    padding: 6px 9px;
    border-left: 3px solid transparent;
    background: rgba(0, 0, 0, 0.14);
    color: #d7cebf;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.composer__send-status--sending {
    color: #f1c25a;
    border-left-color: #f1c25a;
}

.composer__send-status--sent {
    color: #b8e6b5;
    border-left-color: #8fcf9a;
}

.composer__send-status--error {
    color: #ffb6a4;
    border-left-color: #ff6b4a;
    background: rgba(132, 35, 22, 0.18);
}

.attachment-preview {
    margin-bottom: 10px;
}

.attachment-preview.is-hidden {
    display: none;
}

.attachment-preview__label {
    margin-bottom: 6px;
    color: #d2c9ba;
    font-size: 13px;
}

.attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: rgba(219, 214, 205, 0.12);
    border: 1px solid rgba(211, 203, 192, 0.18);
}

.attachment-chip__image {
    width: 74px;
    height: 74px;
    object-fit: cover;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
}

.attachment-chip__meta {
    min-width: 120px;
    max-width: 200px;
    color: #e3dbce;
    line-height: 1.35;
    font-size: 13px;
}

.attachment-chip__remove {
    width: 22px;
    height: 22px;
    border: 0;
    background: #f04e33;
    color: #fff5ef;
    cursor: pointer;
    border-radius: 2px;
}

.composer__input {
    width: 100%;
    min-height: 92px;
    padding: 14px;
    resize: vertical;
    border: 1px solid var(--composer-input-border);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--composer-input-border) 36%, transparent);
    background: var(--composer-input-bg);
    color: var(--composer-input-text);
}

.composer__actions {
    margin-top: 10px;
}

.composer__secondary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#toggle-nearby-places.is-active {
    border-color: rgba(142, 181, 119, 0.62);
    background: rgba(142, 181, 119, 0.18);
    color: #f1f7ec;
}

#toggle-nearby-places {
    min-width: 72px;
    white-space: nowrap;
}

.messages {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.message {
    display: flex;
}

.message--in {
    justify-content: flex-start;
}

.message--out {
    justify-content: flex-end;
}

.message__bubble {
    max-width: min(78%, 710px);
    padding: 14px 16px 10px;
    border-radius: 2px;
    line-height: 1.55;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.message--in .message__bubble {
    background: var(--incoming);
    color: var(--incoming-text);
}

.message--out .message__bubble {
    background: var(--outgoing);
    color: var(--outgoing-text);
}

.message--asa .message__bubble {
    background: var(--asa);
    color: var(--asa-text);
}

.message--automatic .message__bubble {
    outline: 1px solid rgba(53, 91, 124, 0.32);
}

.message--campaign .message__bubble {
    outline: 1px dashed rgba(146, 91, 28, 0.44);
}

.message--event .message__bubble {
    opacity: 0.9;
    outline: 1px dotted rgba(96, 104, 109, 0.5);
}

.message--friend-event .message__bubble {
    background: #43ac6a;
    color: #f8fff9;
    opacity: 1;
    outline: none;
}

.message--friend-event-rejected .message__bubble {
    background: #b64235;
    color: #fff7f4;
    opacity: 1;
    outline: none;
}

.message--friend-event .message__meta,
.message--friend-event-rejected .message__meta {
    color: rgba(255, 255, 255, 0.78);
}

.message__text {
    white-space: pre-wrap;
}

.message__media-missing {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px dashed rgba(245, 187, 87, 0.72);
    background: rgba(245, 187, 87, 0.14);
    color: #ffe1a8;
    font-weight: 700;
}

.message__badges,
.sent-media-item__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.message__badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(90, 20, 53, 0.18);
    color: #702543;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.message__badge--auto {
    background: rgba(53, 91, 124, 0.18);
    color: #285477;
}

.message__badge--campaign {
    background: rgba(146, 91, 28, 0.2);
    color: #81521e;
}

.message__badge--event {
    background: rgba(96, 104, 109, 0.18);
    color: #4d565b;
}

.message--friend-event .message__badge--event,
.message--friend-event-rejected .message__badge--event {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.message__media {
    position: relative;
    display: grid;
    place-items: center;
    width: min(220px, 100%);
    aspect-ratio: 4 / 3;
    min-height: 124px;
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: #e5ddd4;
}

.message__media--gift {
    width: min(148px, 100%);
    aspect-ratio: 1 / 1;
    min-height: 118px;
    background: rgba(255, 245, 249, 0.25);
}

.message__media--clickable {
    padding: 0;
    border: 0;
    cursor: zoom-in;
}

.message__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.message__image--gift {
    padding: 10px;
}

.message__media-placeholder {
    display: none;
    padding: 12px;
    color: rgba(48, 46, 43, 0.72);
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
}

.message__media.is-broken .message__image {
    display: none;
}

.message__media.is-broken .message__media-placeholder {
    display: grid;
    place-items: center;
}

.message__meta {
    margin-top: 10px;
    font-size: 12px;
    opacity: 0.82;
}

.empty-state {
    color: var(--muted);
    text-align: center;
    padding: 48px 20px;
    border: 1px dashed rgba(226, 217, 201, 0.18);
}

.toast {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 30;
    min-width: 210px;
    max-width: 320px;
    padding: 11px 14px;
    border: 1px solid #627265;
    background: linear-gradient(180deg, #607c52, #4c6842);
    color: #eef5e8;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.toast--error {
    border-color: #a85d50;
    background: linear-gradient(180deg, #8d5448, #734137);
    color: #fff1ec;
}

.moderator-idle-warning {
    position: fixed;
    top: 72px;
    left: 50%;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(720px, calc(100vw - 32px));
    padding: 14px 16px;
    border: 2px solid #ffd166;
    background: linear-gradient(180deg, #3a2717, #211712);
    color: #fff8dc;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
    transform: translateX(-50%);
}

.moderator-idle-warning.is-hidden {
    display: none;
}

.moderator-idle-warning__body {
    display: grid;
    gap: 4px;
    min-width: 0;
    line-height: 1.35;
}

.moderator-idle-warning__body strong {
    color: #ffd166;
}

.moderator-idle-warning__actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

@media (max-width: 720px) {
    .moderator-idle-warning {
        align-items: stretch;
        flex-direction: column;
        top: 58px;
    }

    .moderator-idle-warning__actions {
        justify-content: flex-end;
    }
}

.imagepool-modal {
    display: flex;
    flex-direction: column;
    width: min(980px, calc(100vw - 36px));
    max-height: min(86vh, 900px);
    background: linear-gradient(180deg, rgba(66, 73, 77, 0.98), rgba(55, 61, 65, 0.98));
    border: 1px solid #4f565b;
    box-shadow: 0 26px 50px rgba(0, 0, 0, 0.34);
    overflow: hidden;
}

.imagepool-modal__closebar {
    width: calc(100% - 56px);
    margin: 22px 28px 14px;
    padding: 10px 16px;
    border: 0;
    background: #ef3e2e;
    color: #fff3ec;
    cursor: pointer;
}

.imagepool-modal__body {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 18px;
    padding: 10px 28px 28px;
    min-height: 0;
    overflow: hidden;
}

.imagepool-sidebar {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.imagepool-sidebar__title,
.imagepool-content__title {
    font-size: 18px;
    color: #efe5d6;
    margin-bottom: 12px;
}

.imagepool-sidebar__list {
    background: rgba(55, 61, 65, 0.75);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.imagepool-modal--profile .imagepool-modal__body {
    grid-template-columns: 1fr;
}

.imagepool-modal--profile .imagepool-sidebar {
    display: none;
}

.imagepool-modal--sent .imagepool-sidebar {
    display: none;
}

.imagepool-category {
    display: block;
    width: 100%;
    padding: 14px 16px;
    text-align: left;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: #e6dccd;
    cursor: pointer;
}

.imagepool-category.is-active {
    background: #40658f;
    color: #f4f8ff;
}

.imagepool-content {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.imagepool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 18px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
    align-content: start;
}

.imagepool-item {
    position: relative;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.imagepool-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 2px solid transparent;
    background: var(--input-bg);
}

.imagepool-item:hover img,
.imagepool-item.is-selected img {
    border-color: #b6d56a;
}

.imagepool-item.is-used img {
    border-color: #d18472;
}

.imagepool-item.is-disabled {
    cursor: not-allowed;
}

.imagepool-item.is-disabled img {
    filter: saturate(0.78) opacity(0.62);
}

.imagepool-item.is-disabled:hover img {
    border-color: #d18472;
}

.imagepool-item.is-selected.is-disabled:hover img {
    border-color: #b6d56a;
}

.imagepool-item__badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    pointer-events: none;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
}

.imagepool-item__badge--used {
    background: rgba(145, 79, 67, 0.92);
    color: #fff1ed;
}

.imagepool-item__badge--selected {
    background: rgba(94, 128, 57, 0.94);
    color: #f6fbe9;
}

.imagepool-item__tags {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-start;
    justify-content: center;
    pointer-events: none;
}

.imagepool-item__tag,
.profile-card__image-tag {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    max-width: 100%;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(42, 47, 51, 0.92);
    color: #f6efe5;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
}

.profile-card__image-tag {
    font-size: 9px;
    min-height: 17px;
    padding: 2px 5px;
}

.imagepool-item__tag--open,
.profile-card__image-tag--open {
    background: rgba(39, 132, 91, 0.94);
    color: #eefbf3;
}

.imagepool-item__tag--hidden,
.profile-card__image-tag--hidden {
    background: rgba(88, 94, 101, 0.95);
    color: #f3f1ec;
}

.imagepool-item__tag--adult,
.profile-card__image-tag--adult {
    background: rgba(174, 72, 62, 0.96);
    color: #fff2ef;
}

.imagepool-item__tag--friend,
.profile-card__image-tag--friend {
    background: rgba(70, 105, 154, 0.96);
    color: #eef5ff;
}

.imagepool-item__tag--profile,
.profile-card__image-tag--profile {
    background: rgba(176, 129, 49, 0.96);
    color: #fff7e8;
}

.imagepool-item__tag--inactive,
.profile-card__image-tag--inactive {
    background: rgba(112, 76, 83, 0.96);
    color: #fff0f2;
}

.imagepool-item--viewer {
    cursor: zoom-in;
}

.imagepool-item--viewer:hover img {
    border-color: #89a7c8;
}

.gift-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(226, 217, 201, 0.14);
    background: rgba(49, 55, 59, 0.84);
    color: #ede3d3;
    cursor: pointer;
    text-align: left;
}

.gift-card.is-selected,
.gift-card:hover {
    border-color: #b6d56a;
}

.gift-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 14px;
    background: rgba(244, 238, 230, 0.9);
}

.gift-card__name {
    font-size: 14px;
    color: #efe5d6;
}

.gift-card__price {
    font-size: 12px;
    color: #c4e08d;
    letter-spacing: 0.04em;
}

.imagepool-empty {
    padding: 32px;
    color: #d5ccbc;
    background: rgba(51, 57, 61, 0.6);
}

.imagepool-empty--loading {
    display: grid;
    place-items: center;
    min-height: 240px;
    font-size: 16px;
    color: #efe5d6;
}

.sent-media {
    display: grid;
    gap: 24px;
    align-content: start;
}

.sent-media__section {
    display: grid;
    gap: 12px;
}

.sent-media__title {
    font-size: 17px;
    color: #efe5d6;
}

.sent-media__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.sent-media-item {
    display: grid;
    gap: 8px;
    padding: 10px;
    background: rgba(51, 57, 61, 0.72);
    border: 1px solid rgba(213, 204, 188, 0.14);
}

.sent-media-item__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--input-bg);
}

.sent-media-item.is-broken .sent-media-item__image {
    display: none;
}

.sent-media-item.is-broken::before {
    content: "Medium konnte nicht geladen werden.";
    display: grid;
    place-items: center;
    min-height: 140px;
    aspect-ratio: 1 / 1;
    padding: 12px;
    border: 1px dashed rgba(245, 187, 87, 0.72);
    background: rgba(245, 187, 87, 0.12);
    color: #ffe1a8;
    text-align: center;
    font-weight: 700;
}

.sent-media-item__missing {
    display: grid;
    place-items: center;
    min-height: 140px;
    aspect-ratio: 1 / 1;
    padding: 12px;
    border: 1px dashed rgba(245, 187, 87, 0.72);
    background: rgba(245, 187, 87, 0.12);
    color: #ffe1a8;
    text-align: center;
    font-weight: 700;
}

.sent-media-item__message {
    color: #ded5c7;
    line-height: 1.45;
    white-space: pre-wrap;
}

.sent-media-item__meta {
    color: #bfb6a7;
    font-size: 12px;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    overflow-y: auto;
    background: rgba(17, 20, 22, 0.82);
    backdrop-filter: blur(6px);
}

.modal-backdrop.is-hidden {
    display: none;
}

#emoticon-modal {
    display: block;
    padding: 0;
    overflow: visible;
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;
    z-index: 35;
}

#emoticon-modal.is-hidden {
    display: none;
}

#emoticon-modal .emoticon-modal {
    position: fixed;
    right: 18px;
    bottom: 92px;
    pointer-events: auto;
}

#confirmation-modal {
    z-index: 40;
}

.message-image-modal {
    display: flex;
    flex-direction: column;
    width: min(1120px, calc(100vw - 36px));
    max-height: calc(100vh - 36px);
    background: linear-gradient(180deg, rgba(66, 73, 77, 0.98), rgba(55, 61, 65, 0.98));
    border: 1px solid #4f565b;
    box-shadow: 0 26px 50px rgba(0, 0, 0, 0.34);
    overflow: hidden;
}

.message-image-modal__closebar {
    width: calc(100% - 56px);
    margin: 22px 28px 14px;
    padding: 10px 16px;
    border: 0;
    background: #ef3e2e;
    color: #fff3ec;
    cursor: pointer;
}

.message-image-modal__body {
    display: grid;
    gap: 14px;
    justify-items: center;
    padding: 0 28px 28px;
    overflow: auto;
}

.message-image-modal__image {
    max-width: 100%;
    max-height: calc(100vh - 190px);
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(19, 22, 24, 0.42);
}

.message-image-modal__caption {
    width: 100%;
    text-align: center;
    color: #d9d0c3;
    font-size: 13px;
    line-height: 1.45;
}

.platform-issue-modal {
    display: flex;
    flex-direction: column;
    width: min(680px, calc(100vw - 36px));
    max-height: min(74vh, 680px);
    background: linear-gradient(180deg, rgba(48, 55, 59, 0.98), rgba(34, 39, 43, 0.98));
    border: 1px solid #596268;
    box-shadow: 0 24px 46px rgba(0, 0, 0, 0.36);
    overflow: hidden;
}

.platform-issue-modal__body {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
}

.platform-issue-modal__header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(213, 204, 188, 0.16);
    background: rgba(18, 22, 25, 0.34);
}

.platform-issue-modal__title {
    color: #f0e8db;
    font-size: 18px;
    font-weight: 700;
}

.platform-issue-modal__closebar {
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(213, 204, 188, 0.24);
    background: rgba(221, 213, 203, 0.13);
    color: #f2eade;
    cursor: pointer;
}

.platform-issue-modal__closebar:hover,
.platform-issue-modal__closebar:focus-visible {
    outline: none;
    border-color: rgba(148, 181, 216, 0.55);
    background: rgba(79, 110, 144, 0.36);
}

.platform-issue-modal__content {
    display: grid;
    gap: 10px;
    padding: 16px;
    overflow: auto;
}

.platform-issue-card {
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid rgba(255, 202, 75, 0.46);
    background: rgba(95, 68, 20, 0.24);
}

.platform-issue-card--error {
    border-color: rgba(255, 88, 64, 0.62);
    background: rgba(117, 36, 28, 0.27);
}

.platform-issue-card--info {
    border-color: rgba(120, 174, 224, 0.52);
    background: rgba(38, 70, 102, 0.25);
}

.platform-issue-card__head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.platform-issue-card__severity {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 202, 75, 0.2);
    color: #ffe3a3;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.platform-issue-card--error .platform-issue-card__severity {
    background: rgba(255, 88, 64, 0.22);
    color: #ffd2cb;
}

.platform-issue-card__platform {
    color: #f2eadb;
    font-weight: 700;
}

.platform-issue-card__message {
    color: #f0e5d6;
    font-size: 14px;
    line-height: 1.4;
}

.platform-issue-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: #cfc5b7;
    font-size: 12px;
}

.platform-issue-card__meta span {
    padding: 2px 6px;
    background: rgba(16, 19, 22, 0.24);
}

.confirmation-modal {
    width: min(460px, calc(100vw - 36px));
    border: 1px solid rgba(255, 202, 75, 0.42);
    background: linear-gradient(180deg, rgba(49, 55, 59, 0.98), rgba(35, 40, 44, 0.98));
    box-shadow: 0 24px 46px rgba(0, 0, 0, 0.38);
}

.confirmation-modal__body {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.confirmation-modal__title {
    color: #f0e8db;
    font-size: 18px;
    font-weight: 700;
}

.confirmation-modal__message {
    color: #d8cdbf;
    font-size: 14px;
    line-height: 1.45;
}

.confirmation-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.confirmation-modal__confirm--danger {
    background: #ef3e2e;
    color: #fff3ec;
}

.confirmation-modal__confirm--danger:hover,
.confirmation-modal__confirm--danger:focus-visible {
    background: #ff4c39;
}

.important-note-modal {
    display: flex;
    flex-direction: column;
    width: min(980px, calc(100vw - 36px));
    background: linear-gradient(180deg, rgba(66, 73, 77, 0.98), rgba(55, 61, 65, 0.98));
    border: 1px solid #4f565b;
    box-shadow: 0 26px 50px rgba(0, 0, 0, 0.34);
    overflow: hidden;
}

.important-note-modal__closebar {
    width: calc(100% - 56px);
    margin: 22px 28px 14px;
    padding: 10px 16px;
    border: 0;
    background: #ef3e2e;
    color: #fff3ec;
    cursor: pointer;
}

.important-note-modal__closebar:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.important-note-modal__body {
    display: grid;
    gap: 20px;
    padding: 0 28px 28px;
}

.important-note-modal__title {
    padding: 12px 18px;
    background: rgba(88, 95, 100, 0.55);
    color: #f0e8db;
    font-size: 18px;
    text-align: center;
}

.important-note-modal__textarea {
    width: 100%;
    min-height: 210px;
    padding: 14px;
    resize: vertical;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
}

.important-note-modal__textarea:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--input-focus) 38%, transparent);
}

.important-note-modal__active {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f0e8db;
    font-size: 14px;
}

.important-note-modal__active.is-hidden {
    display: none;
}

.important-note-modal__active input {
    width: 18px;
    height: 18px;
    accent-color: #6fa36d;
}

.important-note-modal__actions {
    display: flex;
    justify-content: center;
}

.emoticon-modal {
    display: flex;
    flex-direction: column;
    width: min(560px, calc(100vw - 36px));
    max-height: min(72vh, 620px);
    background: linear-gradient(180deg, rgba(66, 73, 77, 0.98), rgba(55, 61, 65, 0.98));
    border: 1px solid #4f565b;
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.34);
    overflow: hidden;
}

.emoticon-modal.is-dragging {
    user-select: none;
}

.emoticon-modal__closebar {
    justify-self: end;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(213, 204, 188, 0.24);
    background: rgba(221, 213, 203, 0.13);
    color: #f2eade;
    cursor: pointer;
}

.emoticon-modal__closebar:hover,
.emoticon-modal__closebar:focus-visible {
    outline: none;
    border-color: rgba(148, 181, 216, 0.55);
    background: rgba(79, 110, 144, 0.36);
}

.emoticon-modal__body {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 16px;
    min-height: 0;
    overflow: hidden;
}

.emoticon-modal__header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    cursor: move;
    user-select: none;
    touch-action: none;
}

.emoticon-modal__title {
    color: #f0e8db;
    font-size: 18px;
    font-weight: 700;
}

.emoticon-search {
    display: grid;
    gap: 5px;
    color: #e3d7c5;
    font-size: 12px;
}

.emoticon-search input {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(213, 204, 188, 0.24);
    background: #c8c4bd;
    color: #31373a;
    padding: 8px 10px;
    font: inherit;
}

.emoticon-search input:focus-visible {
    outline: 2px solid #74a4d8;
    outline-offset: 1px;
}

.emoticon-modal__meta,
.emoticon-empty {
    color: #d7cebf;
    font-size: 12px;
}

.emoticon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
    gap: 7px;
    min-height: 0;
    max-height: 380px;
    overflow: auto;
    padding-right: 2px;
    contain: content;
}

.emoticon-grid.is-empty {
    display: none;
}

.emoticon-button {
    min-height: 62px;
    border: 1px solid rgba(213, 204, 188, 0.18);
    background: rgba(221, 213, 203, 0.1);
    color: #f2eade;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: center;
    gap: 4px;
    padding: 6px 5px;
    line-height: 1;
    cursor: pointer;
    contain: layout paint;
    transition: background 120ms ease, border-color 120ms ease;
}

.emoticon-button__glyph {
    display: block;
    font-size: 25px;
    line-height: 1;
}

.emoticon-button__name {
    display: -webkit-box;
    max-width: 100%;
    min-height: 22px;
    overflow: hidden;
    color: #d8ccba;
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
    text-transform: lowercase;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.emoticon-button:hover,
.emoticon-button:focus,
.emoticon-button:focus-visible {
    outline: none;
    background: rgba(79, 110, 144, 0.44);
    border-color: rgba(148, 181, 216, 0.55);
}

.admin-modal {
    display: flex;
    flex-direction: column;
    width: min(1220px, calc(100vw - 24px));
    max-height: min(90vh, 980px);
    background: linear-gradient(180deg, rgba(66, 73, 77, 0.98), rgba(55, 61, 65, 0.98));
    border: 1px solid #4f565b;
    box-shadow: 0 26px 50px rgba(0, 0, 0, 0.34);
    overflow: hidden;
}

.admin-modal__closebar {
    width: calc(100% - 56px);
    margin: 22px 28px 14px;
    padding: 10px 16px;
    border: 0;
    background: #ef3e2e;
    color: #fff3ec;
    cursor: pointer;
}

.admin-modal__body {
    display: grid;
    gap: 18px;
    padding: 0 28px 28px;
    min-height: 0;
    overflow: hidden;
}

.admin-modal__header {
    display: grid;
    gap: 14px;
}

.admin-modal__title {
    padding: 12px 18px;
    background: rgba(88, 95, 100, 0.55);
    color: #f0e8db;
    font-size: 18px;
    text-align: center;
}

.admin-modal__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-tab-button {
    padding: 10px 14px;
    border: 1px solid #6b6860;
    background: #d2c6b5;
    color: #4a4641;
    cursor: pointer;
}

.admin-tab-button.is-active {
    background: #7f8f9c;
    color: #f3ece0;
    border-color: #8da2b0;
}

.admin-tab-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.admin-modal__content {
    min-height: 0;
    overflow: auto;
}

.admin-panel {
    display: grid;
    gap: 18px;
}

.admin-panel__toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    background: rgba(78, 86, 91, 0.48);
}

.admin-panel__hint {
    color: #d8d0c2;
    line-height: 1.45;
}

.admin-create-moderator,
.admin-advanced-settings {
    background: rgba(46, 52, 56, 0.54);
    border: 1px solid #434a4e;
}

.admin-create-moderator-shell {
    background: rgba(46, 52, 56, 0.54);
    border: 1px solid #434a4e;
}

.admin-create-moderator-shell summary {
    cursor: pointer;
    padding: 12px 16px;
    color: #e5dccd;
    font-weight: 700;
}

.admin-create-moderator-shell .admin-create-moderator {
    border-width: 1px 0 0;
}

.admin-create-moderator {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.admin-create-moderator__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.admin-create-moderator__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 12px;
}

.admin-create-moderator__flags {
    display: grid;
    gap: 10px;
    align-content: center;
}

.admin-inline-error {
    color: #ffd7cf;
    border: 1px solid rgba(188, 70, 57, 0.55);
    background: rgba(188, 70, 57, 0.16);
    padding: 10px 12px;
}

.admin-advanced-settings {
    padding: 0;
}

.admin-advanced-settings summary {
    cursor: pointer;
    padding: 14px 16px;
    color: #e5dccd;
    font-weight: 700;
}

.admin-advanced-settings .admin-queue-settings {
    border-width: 1px 0 0;
}

.admin-config-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 18px;
    min-height: 0;
}

.admin-sidebar,
.admin-editor,
.admin-queue-settings,
.admin-monitor-grid,
.admin-monitoring {
    background: rgba(46, 52, 56, 0.54);
    border: 1px solid #434a4e;
}

.admin-sidebar {
    display: grid;
    gap: 10px;
    padding: 16px;
    align-content: start;
    min-height: 0;
}

.admin-sidebar__title,
.admin-editor__title,
.admin-monitoring__title {
    color: #e5dccd;
    font-size: 15px;
}

.admin-moderator-list {
    display: grid;
    gap: 8px;
    max-height: 56vh;
    overflow: auto;
}

.admin-moderator-item {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid #4c5459;
    background: rgba(65, 72, 77, 0.7);
    color: #e7dfd1;
    text-align: left;
    cursor: pointer;
}

.admin-moderator-item.is-active {
    border-color: #87a2b2;
    box-shadow: inset 0 0 0 1px rgba(135, 162, 178, 0.45);
}

.admin-moderator-item__meta {
    color: #bdb3a3;
    font-size: 12px;
}

.admin-editor {
    display: grid;
    gap: 18px;
    padding: 16px;
    min-height: 0;
}

.admin-editor__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 14px;
}

.admin-password-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

.admin-password-field input {
    min-width: 0;
}

.admin-password-toggle {
    min-width: 82px;
    padding: 7px 10px;
    border: 1px solid rgba(148, 181, 216, 0.45);
    border-radius: 3px;
    background: rgba(93, 108, 118, 0.82);
    color: #f3ece0;
    cursor: pointer;
}

.admin-password-toggle[aria-pressed="true"] {
    border-color: rgba(255, 214, 107, 0.7);
    background: rgba(111, 88, 45, 0.92);
    color: #fff3cf;
}

.admin-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ddd4c5;
}

.admin-checkbox-row--strong {
    font-weight: 700;
}

.admin-queue-settings {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.admin-platform-grid {
    display: grid;
    gap: 14px;
}

.admin-platform-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #4c5459;
    background: rgba(65, 72, 77, 0.62);
}

.admin-platform-card--compact {
    background: rgba(55, 64, 69, 0.72);
}

.admin-platform-card__headline {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    color: #f0e7d9;
}

.admin-platform-card__meta {
    color: #bdb3a3;
    font-size: 12px;
}

.admin-platform-card__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-save-button {
    min-width: 116px;
    border: 1px solid rgba(255, 232, 176, 0.55);
    background: linear-gradient(135deg, #ffd66b 0%, #f59a2f 100%);
    color: #202522;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(245, 154, 47, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.admin-save-button:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.admin-save-button:focus-visible {
    outline: 3px solid rgba(255, 214, 107, 0.45);
    outline-offset: 3px;
}

.admin-save-button:disabled {
    color: #493b22;
    opacity: 0.75;
}

.admin-empty-state {
    padding: 22px;
    text-align: center;
    color: #d2c8b7;
    border: 1px dashed #5a6267;
    background: rgba(58, 64, 68, 0.48);
}

.admin-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(98, 108, 114, 0.45);
    color: #ede4d6;
    font-size: 12px;
}

.admin-status-chip--ok {
    background: rgba(72, 133, 90, 0.45);
    color: #e7f4df;
}

.admin-status-chip--warn {
    background: rgba(178, 133, 48, 0.42);
    color: #fff1c7;
}

.admin-status-chip--error {
    background: rgba(188, 70, 57, 0.48);
    color: #ffe2dc;
}

.admin-status-chip--fixed {
    background: rgba(83, 115, 196, 0.48);
    color: #e5ebff;
}

.admin-status-chip--muted {
    background: rgba(98, 108, 114, 0.32);
    color: #d9d4cb;
}

.admin-monitoring {
    display: grid;
    gap: 18px;
    padding: 16px;
}

.admin-monitoring__marker {
    color: #c8d2d6;
    font-size: 12px;
}

.admin-monitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding: 16px;
}

.admin-metric {
    display: grid;
    gap: 6px;
    padding: 12px;
    background: rgba(65, 72, 77, 0.64);
    border: 1px solid #4c5459;
}

.admin-metric__label {
    color: #cbbfae;
    font-size: 13px;
}

.admin-metric__value {
    color: #f5eee1;
    font-size: 22px;
}

.admin-monitor-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 18px;
}

.admin-monitor-section {
    display: grid;
    gap: 12px;
}

.admin-monitor-filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}

.admin-monitor-filter {
    display: grid;
    gap: 4px;
    color: #cbbfae;
    font-size: 12px;
}

.admin-monitor-filter select {
    min-height: 32px;
    border: 1px solid #687177;
    background: #dcd5cb;
    color: #3b3833;
}

.admin-error-groups {
    display: grid;
    gap: 8px;
}

.admin-media-cache-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}

.admin-error-group {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    padding: 10px;
    border: 1px solid rgba(241, 194, 90, 0.28);
    background: rgba(63, 57, 48, 0.48);
    color: #efe6d8;
}

.admin-error-group small {
    grid-column: 1 / -1;
    color: #d7cebf;
    overflow-wrap: anywhere;
}

.admin-monitor-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    background: rgba(65, 72, 77, 0.62);
    border: 1px solid #4c5459;
}

.admin-monitor-card--error {
    border-color: rgba(188, 70, 57, 0.54);
    background: rgba(88, 54, 52, 0.62);
}

.admin-monitor-card--resolved {
    border-color: rgba(88, 122, 91, 0.5);
    background: rgba(55, 68, 60, 0.62);
}

.admin-monitor-card__title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #efe6d8;
}

.admin-monitor-card__body {
    display: grid;
    gap: 4px;
    color: #d7cebf;
    font-size: 13px;
}

.admin-error-resolution {
    color: #dce8d6;
}

.admin-error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 6px;
}

.admin-error-actions .muted-button {
    min-height: 30px;
    padding: 5px 9px;
    font-size: 12px;
}

.admin-monitor-card__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(245, 238, 225, 0.12);
}

.admin-kick-button {
    border-color: rgba(255, 98, 74, 0.78);
    background: #d93724;
    color: #fff5ec;
}

.admin-kick-button:hover,
.admin-kick-button:focus-visible {
    background: #f04a32;
}

.admin-assignment-list {
    display: grid;
    gap: 6px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(245, 238, 225, 0.12);
}

.admin-assignment-list--loss {
    border-top-color: rgba(255, 190, 102, 0.28);
}

.admin-assignment-list--answers {
    border-top-color: rgba(143, 205, 145, 0.3);
}

.admin-assignment-list__heading {
    color: #f0e5d6;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-assignment-item {
    display: grid;
    gap: 2px;
    padding: 8px;
    border: 1px solid rgba(135, 162, 178, 0.32);
    background: rgba(35, 42, 46, 0.58);
}

.admin-assignment-item--loss {
    border-color: rgba(255, 190, 102, 0.44);
    background: rgba(79, 58, 33, 0.42);
}

.admin-assignment-item--answers {
    border-color: rgba(143, 205, 145, 0.4);
    background: rgba(37, 71, 45, 0.34);
}

.admin-assignment-item span,
.admin-assignment-item small {
    color: #cfc5b7;
    overflow-wrap: anywhere;
}

.admin-error-cause {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(245, 238, 225, 0.12);
    color: #f1eadc;
    overflow-wrap: anywhere;
}

.login-overlay {
    background:
        linear-gradient(90deg, rgba(66, 255, 207, 0.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(66, 255, 207, 0.026) 1px, transparent 1px),
        linear-gradient(135deg, rgba(15, 28, 31, 0.96), rgba(3, 7, 9, 0.98) 48%, rgba(14, 17, 18, 0.98));
    background-size: 48px 48px, 48px 48px, auto;
    backdrop-filter: blur(10px);
}

.login-overlay::before,
.login-overlay::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.login-overlay::before {
    background:
        linear-gradient(115deg, transparent 0 36%, rgba(62, 255, 205, 0.08) 48%, transparent 60%),
        linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.58));
    opacity: 0.72;
}

.login-overlay::after {
    background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.035) 0,
        rgba(255, 255, 255, 0.035) 1px,
        transparent 1px,
        transparent 8px
    );
    mix-blend-mode: screen;
    opacity: 0.17;
}

.login-card {
    position: relative;
    isolation: isolate;
    width: min(468px, calc(100vw - 32px));
    padding: 24px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(86, 255, 213, 0.36);
    background:
        linear-gradient(145deg, rgba(7, 16, 18, 0.98), rgba(18, 30, 32, 0.96) 62%, rgba(8, 12, 13, 0.98)),
        #081012;
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(232, 255, 248, 0.14),
        inset 0 -1px 0 rgba(48, 255, 208, 0.12);
}

.login-card::before {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: -1;
    border: 1px solid rgba(244, 201, 104, 0.16);
    border-radius: 6px;
    pointer-events: none;
}

.login-card::after {
    content: "";
    position: absolute;
    left: -30%;
    top: 0;
    z-index: -1;
    width: 140%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(76, 255, 211, 0.86), rgba(244, 201, 104, 0.78), transparent);
    box-shadow: 0 0 28px rgba(76, 255, 211, 0.38);
    animation: login-sweep 5.5s ease-in-out infinite;
}

.login-card__backdrop {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(76, 255, 211, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(76, 255, 211, 0.07) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.78), transparent 82%);
    opacity: 0.42;
}

.login-card__scan {
    position: absolute;
    right: -12%;
    width: 55%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(78, 255, 211, 0.42), transparent);
}

.login-card__scan--one {
    top: 74px;
    transform: rotate(-8deg);
}

.login-card__scan--two {
    bottom: 116px;
    transform: rotate(7deg);
    background: linear-gradient(90deg, transparent, rgba(244, 201, 104, 0.36), transparent);
}

.login-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.login-card__kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: #8fffe2;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.login-card__signal {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #53ffd4;
    box-shadow: 0 0 0 6px rgba(83, 255, 212, 0.12), 0 0 20px rgba(83, 255, 212, 0.74);
    animation: login-pulse 1.8s ease-in-out infinite;
}

.login-card__badge {
    display: grid;
    place-items: center;
    width: 36px;
    height: 28px;
    flex: 0 0 auto;
    border: 1px solid rgba(244, 201, 104, 0.46);
    border-radius: 6px;
    background: rgba(244, 201, 104, 0.09);
    color: #ffe1a4;
    font-size: 13px;
    font-weight: 700;
}

.login-card__title {
    margin: 0 0 10px;
    color: #f4fff9;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.08;
    text-shadow: 0 0 22px rgba(76, 255, 211, 0.28);
}

.login-card__text {
    margin: 0 0 14px;
    color: #bfcfc9;
    line-height: 1.55;
}

.login-card__terminal {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px;
    border: 1px solid rgba(86, 255, 213, 0.18);
    border-radius: 6px;
    background: rgba(1, 7, 8, 0.58);
    box-shadow: inset 0 0 22px rgba(39, 255, 203, 0.045);
    font-size: 12px;
}

.login-card__terminal div {
    display: grid;
    gap: 2px;
    color: #78928b;
}

.login-card__terminal strong {
    color: #f4c968;
    font-weight: 700;
}

.login-form {
    display: grid;
    gap: 12px;
}

.login-card .field {
    display: grid;
    gap: 7px;
    color: #dbe9e4;
    font-size: 13px;
    font-weight: 700;
}

.login-card .field input {
    width: 100%;
    min-height: 42px;
    padding: 11px 12px;
    border: 1px solid rgba(137, 174, 166, 0.46);
    border-radius: 6px;
    background: rgba(229, 242, 237, 0.08);
    color: #f5fffb;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.32);
    caret-color: #53ffd4;
    outline: none;
}

.login-card .field input::placeholder {
    color: rgba(205, 220, 214, 0.48);
}

.login-card .field input:focus {
    border-color: rgba(83, 255, 212, 0.86);
    background: rgba(240, 255, 250, 0.11);
    box-shadow:
        0 0 0 3px rgba(83, 255, 212, 0.13),
        inset 0 0 0 1px rgba(83, 255, 212, 0.12);
}

.login-card .field input:-webkit-autofill,
.login-card .field input:-webkit-autofill:hover,
.login-card .field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #061211;
    box-shadow: 0 0 0 1000px #bff7df inset;
}

.login-button {
    width: 100%;
    min-height: 42px;
    justify-self: stretch;
    border: 1px solid rgba(130, 255, 222, 0.66);
    border-radius: 6px;
    background: linear-gradient(180deg, #6bffd9, #14bd98 58%, #0b735f);
    color: #041615;
    font-weight: 800;
    box-shadow: 0 12px 34px rgba(20, 189, 152, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.login-admin-button {
    width: 100%;
    margin-top: 12px;
    padding: 11px 14px;
    border: 1px solid rgba(244, 201, 104, 0.35);
    border-radius: 6px;
    background: rgba(244, 201, 104, 0.09);
    color: #ffe1a4;
    font-weight: 700;
}

.login-card__hint {
    margin: 8px 0 0;
    color: #9fb4af;
    font-size: 13px;
    line-height: 1.45;
}

.login-card__hint--status {
    margin: 0 0 14px;
    padding: 11px 12px;
    border: 1px solid rgba(244, 201, 104, 0.22);
    border-radius: 6px;
    background: rgba(244, 201, 104, 0.07);
    color: #f5e6bd;
    overflow-wrap: anywhere;
}

.login-card__progress {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 22px;
    margin-top: 11px;
    color: #9bffe6;
    font-size: 13px;
}

.login-card__progress::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #53ffd4;
    box-shadow: 0 0 16px rgba(83, 255, 212, 0.72);
    animation: login-pulse 1s ease-in-out infinite;
}

.login-card__progress.is-hidden {
    display: none;
}

.login-form--submitting input {
    opacity: 0.72;
}

.login-card__error {
    min-height: 20px;
    margin-top: 12px;
    color: #ffb3a0;
    overflow-wrap: anywhere;
}

@keyframes login-sweep {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.62;
    }

    50% {
        transform: translateY(410px);
        opacity: 0.18;
    }
}

@keyframes login-pulse {
    0%,
    100% {
        opacity: 0.58;
    }

    50% {
        opacity: 1;
    }
}

@media (max-width: 560px) {
    .login-card {
        padding: 22px;
    }

    .login-card__title {
        font-size: 29px;
    }

    .login-card__terminal {
        font-size: 11px;
    }
}

@media (max-width: 1180px) {
    .dashboard {
        grid-template-columns: 1fr;
        grid-template-areas:
            "customer"
            "main"
            "moderator";
    }

    body[data-mask-layout="work"] .dashboard {
        grid-template-columns: 1fr;
        grid-template-areas:
            "queue"
            "main"
            "customer"
            "moderator";
    }

    body[data-mask-layout="work"] .dashboard__queue,
    body[data-mask-layout="work"] .composer {
        position: static;
    }

    body[data-mask-layout="work"] .queue-overview {
        grid-template-columns: 1fr;
    }

    .topbar {
        grid-template-columns: 1fr;
        grid-template-areas:
            "status"
            "build"
            "actions";
        justify-items: start;
    }

    .topbar__build {
        max-width: 100%;
        text-align: left;
    }

    .topbar__status {
        width: 100%;
        flex-wrap: wrap;
        align-items: flex-start;
        white-space: normal;
    }

    .topbar__platform-breakdown {
        width: 100%;
    }

    .topbar__actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .theme-picker,
    .notification-sound {
        flex-wrap: wrap;
    }

    .layout-switch {
        flex-wrap: wrap;
    }
}

@media (max-width: 720px) {
    .app-shell {
        padding: 8px;
    }

    .profile-actions,
    .composer__actions,
    .composer__secondary {
        flex-direction: column;
        align-items: stretch;
    }

    .message__bubble {
        max-width: 100%;
    }

    .imagepool-modal {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
    }

    .theme-picker,
    .notification-sound {
        width: 100%;
        justify-content: space-between;
    }

    .theme-picker__select,
    .notification-sound__select {
        flex: 1 1 180px;
        min-width: 0;
    }

    .notification-sound__volume {
        flex: 1 1 120px;
    }

    .imagepool-modal__body {
        grid-template-columns: 1fr;
        padding: 10px 12px 16px;
    }

    .important-note-modal {
        width: calc(100vw - 16px);
    }

    .important-note-modal__body {
        padding: 0 12px 16px;
    }

    .emoticon-modal {
        width: calc(100vw - 16px);
        max-height: min(78vh, 620px);
    }

    .admin-modal {
        width: calc(100vw - 16px);
    }

    .admin-modal__body {
        padding: 0 12px 16px;
    }

    .emoticon-modal__body {
        padding: 0 12px 16px;
    }

    .emoticon-modal__header {
        padding-top: 12px;
    }

    .emoticon-grid {
        grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
        max-height: 330px;
    }

    .emoticon-button {
        min-height: 58px;
    }

    .emoticon-button__glyph {
        font-size: 23px;
    }

    .emoticon-button__name {
        font-size: 9px;
    }

    .admin-config-layout,
    .admin-monitor-sections,
    .admin-platform-card__grid,
    .admin-editor__grid,
    .admin-create-moderator__grid {
        grid-template-columns: 1fr;
    }

    .imagepool-grid {
        grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
        gap: 12px;
    }
}