@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --app-bg: #edf2f8;
    --app-bg-accent: #d9e8fb;
    --surface: #ffffff;
    --surface-soft: #f8fafd;
    --border-soft: rgba(15, 23, 42, 0.12);
    --border-strong: rgba(15, 23, 42, 0.2);
    --shadow-soft: 0 8px 28px rgba(15, 23, 42, 0.08);
    --shadow-card: 0 4px 16px rgba(15, 23, 42, 0.06);
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --text-primary: #0f172a;
    --heading-color: #0f1f34;
    --text-subtle: #5b6678;
    --text-soft: #75849a;
    --link: #0f6fdd;
    --bg-gradient-start: #f8fbff;
    --hero-start: #f1f7ff;
    --hero-end: #ffffff;
    --hero-border: rgba(37, 99, 235, 0.18);
    --field-border: rgba(148, 163, 184, 0.52);
    --focus-ring: rgba(14, 116, 204, 0.45);
    --focus-shadow: rgba(14, 116, 204, 0.18);
    --tab-active-bg: #ffffff;
    --log-bg: #0f172a;
    --log-text: #e2e8f0;
    --sidebar-bg-start: #f8fbffcc;
    --sidebar-bg-end: #e8f0fbba;
    --sidebar-glow: rgba(14, 116, 204, 0.16);
    --sidebar-text: #203147;
    --sidebar-text-muted: #4c6788;
    --sidebar-section: #325987;
    --sidebar-active-bg: rgba(14, 116, 204, 0.16);
    --sidebar-active-border: rgba(14, 116, 204, 0.32);
    --sidebar-hover-bg: rgba(15, 23, 42, 0.08);
    --sidebar-hover-border: rgba(15, 23, 42, 0.2);
    --sidebar-border: rgba(15, 23, 42, 0.14);
    --sidebar-shadow: 8px 0 24px rgba(15, 23, 42, 0.12);
    --banner-hue-filter: none;
    --btn-primary-bg: #1d4ed8;
    --btn-primary-border: #1e40af;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #475569;
    --btn-secondary-border: #334155;
    --btn-secondary-text: #ffffff;
    --btn-success-bg: #059669;
    --btn-success-border: #047857;
    --btn-success-text: #ffffff;
    --btn-warning-bg: #b45309;
    --btn-warning-border: #92400e;
    --btn-warning-text: #ffffff;
    --btn-danger-bg: #dc2626;
    --btn-danger-border: #b91c1c;
    --btn-danger-text: #ffffff;
    --btn-info-bg: #0f93b8;
    --btn-info-border: #0b7593;
    --btn-info-text: #ffffff;
    --btn-light-bg: #f1f5f9;
    --btn-light-border: #cbd5e1;
    --btn-light-text: #0f172a;
    --btn-dark-bg: #1f2937;
    --btn-dark-border: #111827;
    --btn-dark-text: #f8fafc;
    --btn-shadow: 0 2px 7px rgba(15, 23, 42, 0.16);
    --btn-hover-brightness: 1.06;
    --btn-active-brightness: 0.96;
    --table-head-bg: #17324f;
    --table-head-striped-bg: #1c3b5c;
    --table-head-active-bg: #0f2a45;
    --table-head-hover-bg: #214466;
    --table-head-text: #ffffff;
    --table-row-hover-bg: rgba(14, 116, 204, 0.06);
    --control-bg: #ffffff;
    --control-text: #0f172a;
    --control-placeholder: #6b7280;
    --control-disabled-bg: #d6dee8;
    --control-disabled-text: #536173;
    --checkbox-accent: var(--btn-primary-bg);
}

html,
body {
    font-family: 'Manrope', 'Segoe UI', Tahoma, Verdana, sans-serif;
    overscroll-behavior-y: contain;
    min-height: 100%;
    background:
        radial-gradient(1450px 600px at 10% -20%, var(--app-bg-accent), transparent 58%),
        linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--app-bg) 100%);
}

body {
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

body.theme-dark {
    --app-bg: #0a1220;
    --app-bg-accent: #113457;
    --surface: #0f1a2c;
    --surface-soft: #17263c;
    --border-soft: rgba(148, 163, 184, 0.22);
    --border-strong: rgba(148, 163, 184, 0.35);
    --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 6px 22px rgba(0, 0, 0, 0.36);
    --text-primary: #e2e8f0;
    --heading-color: #f8fafc;
    --text-subtle: #b6c2d1;
    --text-soft: #9fb1c8;
    --link: #7dc7ff;
    --bg-gradient-start: #08111d;
    --hero-start: #0f2b49;
    --hero-end: #14334f;
    --hero-border: rgba(125, 199, 255, 0.35);
    --field-border: rgba(148, 163, 184, 0.45);
    --focus-ring: rgba(125, 199, 255, 0.65);
    --focus-shadow: rgba(125, 199, 255, 0.24);
    --tab-active-bg: #0f1a2c;
    --log-bg: #050c16;
    --log-text: #d6e4f4;
    --sidebar-bg-start: #111827cc;
    --sidebar-bg-end: #0f172abc;
    --sidebar-glow: rgba(56, 189, 248, 0.25);
    --sidebar-text: rgba(243, 244, 246, 0.88);
    --sidebar-text-muted: rgba(209, 213, 219, 0.92);
    --sidebar-section: rgba(191, 219, 254, 0.9);
    --sidebar-active-bg: rgba(14, 165, 233, 0.2);
    --sidebar-active-border: rgba(125, 211, 252, 0.5);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
    --sidebar-hover-border: rgba(255, 255, 255, 0.16);
    --sidebar-border: rgba(148, 163, 184, 0.2);
    --sidebar-shadow: 8px 0 24px rgba(2, 8, 23, 0.28);
    --banner-hue-filter: hue-rotate(198deg) saturate(1.2);
    --btn-primary-bg: #2f88ff;
    --btn-primary-border: #1f6fd8;
    --btn-primary-text: #f8fcff;
    --btn-secondary-bg: #44576f;
    --btn-secondary-border: #32465f;
    --btn-secondary-text: #eaf2ff;
    --btn-success-bg: #16a085;
    --btn-success-border: #0f7f69;
    --btn-success-text: #f3fffb;
    --btn-warning-bg: #d0811f;
    --btn-warning-border: #ad6613;
    --btn-warning-text: #fffdf8;
    --btn-danger-bg: #e55454;
    --btn-danger-border: #c53f3f;
    --btn-danger-text: #fff7f7;
    --btn-info-bg: #1e9ed8;
    --btn-info-border: #167fb2;
    --btn-info-text: #f5fcff;
    --btn-light-bg: #2d3f57;
    --btn-light-border: #41546c;
    --btn-light-text: #e8f3ff;
    --btn-dark-bg: #091324;
    --btn-dark-border: #020814;
    --btn-dark-text: #dbeafe;
    --btn-shadow: 0 4px 12px rgba(2, 8, 23, 0.34);
    --table-head-bg: #16344f;
    --table-head-striped-bg: #1d425f;
    --table-head-active-bg: #112b43;
    --table-head-hover-bg: #245172;
    --table-head-text: #eff7ff;
    --table-row-hover-bg: rgba(125, 199, 255, 0.12);
    --control-bg: #0b1525;
    --control-text: #eaf3ff;
    --control-placeholder: #8ea3be;
    --control-disabled-bg: #23344a;
    --control-disabled-text: #9db2cc;
    --checkbox-accent: #4ba5ff;
}

body.theme-midnight {
    --app-bg: #050914;
    --app-bg-accent: #0d2d5c;
    --surface: #0a162b;
    --surface-soft: #132441;
    --border-soft: rgba(122, 162, 247, 0.22);
    --border-strong: rgba(122, 162, 247, 0.38);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.55);
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45);
    --text-primary: #dbe9ff;
    --heading-color: #f5f9ff;
    --text-subtle: #a9c2e8;
    --text-soft: #8ea9d5;
    --link: #7db7ff;
    --bg-gradient-start: #040a16;
    --hero-start: #0f2c54;
    --hero-end: #123560;
    --hero-border: rgba(125, 183, 255, 0.4);
    --field-border: rgba(147, 197, 253, 0.42);
    --focus-ring: rgba(125, 183, 255, 0.72);
    --focus-shadow: rgba(125, 183, 255, 0.28);
    --tab-active-bg: #0b1a34;
    --log-bg: #020611;
    --log-text: #dbe9ff;
    --sidebar-bg-start: #081326cc;
    --sidebar-bg-end: #040d1eb8;
    --sidebar-glow: rgba(80, 160, 255, 0.28);
    --sidebar-text: #d9e8ff;
    --sidebar-text-muted: #a8c0e6;
    --sidebar-section: #9fc5ff;
    --sidebar-active-bg: rgba(88, 166, 255, 0.22);
    --sidebar-active-border: rgba(149, 198, 255, 0.5);
    --sidebar-hover-bg: rgba(154, 190, 255, 0.12);
    --sidebar-hover-border: rgba(154, 190, 255, 0.22);
    --sidebar-border: rgba(122, 162, 247, 0.24);
    --sidebar-shadow: 8px 0 24px rgba(0, 7, 18, 0.36);
    --banner-hue-filter: hue-rotate(236deg) saturate(1.28);
    --btn-primary-bg: #4e8fff;
    --btn-primary-border: #2e70df;
    --btn-primary-text: #f2f7ff;
    --btn-secondary-bg: #3f5372;
    --btn-secondary-border: #2e4160;
    --btn-secondary-text: #e5eeff;
    --btn-success-bg: #1e9d7a;
    --btn-success-border: #16795e;
    --btn-success-text: #f2fff9;
    --btn-warning-bg: #cc8a2d;
    --btn-warning-border: #a86d1f;
    --btn-warning-text: #fffef8;
    --btn-danger-bg: #dc5f70;
    --btn-danger-border: #b94b5a;
    --btn-danger-text: #fff8fa;
    --btn-info-bg: #5ba5ff;
    --btn-info-border: #3f86de;
    --btn-info-text: #f4f9ff;
    --btn-light-bg: #2b405f;
    --btn-light-border: #405679;
    --btn-light-text: #e8f1ff;
    --btn-dark-bg: #061022;
    --btn-dark-border: #020915;
    --btn-dark-text: #dceaff;
    --btn-shadow: 0 4px 12px rgba(2, 7, 18, 0.36);
    --table-head-bg: #153355;
    --table-head-striped-bg: #1b3f64;
    --table-head-active-bg: #102943;
    --table-head-hover-bg: #24517c;
    --table-head-text: #ebf4ff;
    --table-row-hover-bg: rgba(125, 183, 255, 0.14);
    --control-bg: #0b1a31;
    --control-text: #e7f1ff;
    --control-placeholder: #95abca;
    --control-disabled-bg: #233751;
    --control-disabled-text: #a5bddc;
    --checkbox-accent: #5ba5ff;
}

body.theme-purple {
    --app-bg: #130d22;
    --app-bg-accent: #40217a;
    --surface: #1b1232;
    --surface-soft: #261a45;
    --border-soft: rgba(196, 167, 255, 0.24);
    --border-strong: rgba(196, 167, 255, 0.4);
    --shadow-soft: 0 14px 36px rgba(9, 5, 18, 0.52);
    --shadow-card: 0 8px 24px rgba(9, 5, 18, 0.4);
    --text-primary: #efe6ff;
    --heading-color: #fcf8ff;
    --text-subtle: #d4c2f4;
    --text-soft: #b9a3df;
    --link: #c7a4ff;
    --bg-gradient-start: #100a1d;
    --hero-start: #432278;
    --hero-end: #512f88;
    --hero-border: rgba(199, 164, 255, 0.4);
    --field-border: rgba(196, 167, 255, 0.4);
    --focus-ring: rgba(220, 189, 255, 0.78);
    --focus-shadow: rgba(167, 118, 255, 0.3);
    --tab-active-bg: #1d1238;
    --log-bg: #0e0820;
    --log-text: #ede3ff;
    --sidebar-bg-start: #241245cc;
    --sidebar-bg-end: #170d2fbb;
    --sidebar-glow: rgba(178, 112, 255, 0.26);
    --sidebar-text: #efdcff;
    --sidebar-text-muted: #cfb2f2;
    --sidebar-section: #ddb8ff;
    --sidebar-active-bg: rgba(191, 132, 255, 0.24);
    --sidebar-active-border: rgba(221, 184, 255, 0.5);
    --sidebar-hover-bg: rgba(234, 206, 255, 0.1);
    --sidebar-hover-border: rgba(234, 206, 255, 0.2);
    --sidebar-border: rgba(196, 167, 255, 0.24);
    --sidebar-shadow: 8px 0 24px rgba(13, 6, 26, 0.36);
    --banner-hue-filter: none;
    --btn-primary-bg: #9d6dff;
    --btn-primary-border: #7e4edb;
    --btn-primary-text: #f9f4ff;
    --btn-secondary-bg: #59467c;
    --btn-secondary-border: #463663;
    --btn-secondary-text: #efe6ff;
    --btn-success-bg: #39a97c;
    --btn-success-border: #28865f;
    --btn-success-text: #f2fff9;
    --btn-warning-bg: #d79233;
    --btn-warning-border: #b47723;
    --btn-warning-text: #fffef8;
    --btn-danger-bg: #e06b8e;
    --btn-danger-border: #bf5376;
    --btn-danger-text: #fff8fb;
    --btn-info-bg: #af7cff;
    --btn-info-border: #8d5ddf;
    --btn-info-text: #fbf8ff;
    --btn-light-bg: #4f3b76;
    --btn-light-border: #644d8f;
    --btn-light-text: #f2eaff;
    --btn-dark-bg: #130a26;
    --btn-dark-border: #0c0618;
    --btn-dark-text: #ecdfff;
    --btn-shadow: 0 4px 12px rgba(13, 6, 26, 0.34);
    --table-head-bg: #3e2368;
    --table-head-striped-bg: #4a2a7a;
    --table-head-active-bg: #341d57;
    --table-head-hover-bg: #59308d;
    --table-head-text: #faf5ff;
    --table-row-hover-bg: rgba(221, 184, 255, 0.13);
    --control-bg: #21133c;
    --control-text: #f2e9ff;
    --control-placeholder: #b9a3dc;
    --control-disabled-bg: #3b2a5f;
    --control-disabled-text: #ccb6ef;
    --checkbox-accent: #9d6dff;
}

body.theme-pink {
    --app-bg: #2a0d1f;
    --app-bg-accent: #9e1f67;
    --surface: #38142a;
    --surface-soft: #49203a;
    --border-soft: rgba(255, 170, 214, 0.24);
    --border-strong: rgba(255, 170, 214, 0.4);
    --shadow-soft: 0 14px 36px rgba(35, 8, 25, 0.5);
    --shadow-card: 0 8px 24px rgba(35, 8, 25, 0.4);
    --text-primary: #ffe7f4;
    --heading-color: #fff7fc;
    --text-subtle: #f4bad8;
    --text-soft: #e4a2c7;
    --link: #ff9bd1;
    --bg-gradient-start: #240a1a;
    --hero-start: #8b1e5c;
    --hero-end: #a22c70;
    --hero-border: rgba(255, 155, 209, 0.42);
    --field-border: rgba(255, 170, 214, 0.42);
    --focus-ring: rgba(255, 193, 226, 0.82);
    --focus-shadow: rgba(255, 126, 191, 0.28);
    --tab-active-bg: #3a162c;
    --log-bg: #210b1a;
    --log-text: #ffe3f2;
    --sidebar-bg-start: #4a1636cc;
    --sidebar-bg-end: #2b0f20bb;
    --sidebar-glow: rgba(255, 117, 187, 0.24);
    --sidebar-text: #ffe3f1;
    --sidebar-text-muted: #f0b8d7;
    --sidebar-section: #ffc7e4;
    --sidebar-active-bg: rgba(255, 140, 201, 0.24);
    --sidebar-active-border: rgba(255, 195, 227, 0.48);
    --sidebar-hover-bg: rgba(255, 218, 237, 0.1);
    --sidebar-hover-border: rgba(255, 218, 237, 0.2);
    --sidebar-border: rgba(255, 170, 214, 0.26);
    --sidebar-shadow: 8px 0 24px rgba(31, 8, 23, 0.38);
    --banner-hue-filter: hue-rotate(28deg) saturate(1.28);
    --btn-primary-bg: #ff64ba;
    --btn-primary-border: #dc4f9f;
    --btn-primary-text: #fff8fc;
    --btn-secondary-bg: #755070;
    --btn-secondary-border: #5d3f59;
    --btn-secondary-text: #fceefe;
    --btn-success-bg: #27b084;
    --btn-success-border: #1b8b66;
    --btn-success-text: #f3fff9;
    --btn-warning-bg: #db9440;
    --btn-warning-border: #b9782d;
    --btn-warning-text: #fffef8;
    --btn-danger-bg: #f05e7f;
    --btn-danger-border: #cc4868;
    --btn-danger-text: #fff8fa;
    --btn-info-bg: #ff7ebf;
    --btn-info-border: #d864a0;
    --btn-info-text: #fff8fc;
    --btn-light-bg: #724663;
    --btn-light-border: #89567a;
    --btn-light-text: #ffeaf7;
    --btn-dark-bg: #240d1b;
    --btn-dark-border: #170811;
    --btn-dark-text: #ffe6f4;
    --btn-shadow: 0 4px 12px rgba(31, 8, 23, 0.34);
    --table-head-bg: #7b2a58;
    --table-head-striped-bg: #8f3168;
    --table-head-active-bg: #69224b;
    --table-head-hover-bg: #a43a78;
    --table-head-text: #fff4fb;
    --table-row-hover-bg: rgba(255, 195, 227, 0.12);
    --control-bg: #3f1630;
    --control-text: #ffe8f5;
    --control-placeholder: #d8a6c4;
    --control-disabled-bg: #60324f;
    --control-disabled-text: #efc6de;
    --checkbox-accent: #ff64ba;
}

body.theme-aurora {
    --app-bg: #051d1b;
    --app-bg-accent: #0e5f66;
    --surface: #0b2a2d;
    --surface-soft: #15373b;
    --border-soft: rgba(115, 236, 210, 0.24);
    --border-strong: rgba(115, 236, 210, 0.4);
    --shadow-soft: 0 14px 36px rgba(3, 14, 13, 0.52);
    --shadow-card: 0 8px 24px rgba(3, 14, 13, 0.42);
    --text-primary: #defaf4;
    --heading-color: #f4fffc;
    --text-subtle: #b5e9de;
    --text-soft: #95d2c7;
    --link: #7ff7d6;
    --bg-gradient-start: #041614;
    --hero-start: #0d5b5f;
    --hero-end: #13726f;
    --hero-border: rgba(127, 247, 214, 0.4);
    --field-border: rgba(127, 247, 214, 0.36);
    --focus-ring: rgba(150, 255, 226, 0.78);
    --focus-shadow: rgba(70, 226, 184, 0.26);
    --tab-active-bg: #0c2e31;
    --log-bg: #041715;
    --log-text: #daf8f2;
    --sidebar-bg-start: #0e2b2dcc;
    --sidebar-bg-end: #081d20bb;
    --sidebar-glow: rgba(72, 233, 201, 0.24);
    --sidebar-text: #dbfaf4;
    --sidebar-text-muted: #b5e4d9;
    --sidebar-section: #b5f5e6;
    --sidebar-active-bg: rgba(110, 244, 213, 0.2);
    --sidebar-active-border: rgba(155, 255, 233, 0.44);
    --sidebar-hover-bg: rgba(191, 255, 240, 0.09);
    --sidebar-hover-border: rgba(191, 255, 240, 0.2);
    --sidebar-border: rgba(115, 236, 210, 0.24);
    --sidebar-shadow: 8px 0 24px rgba(3, 14, 13, 0.34);
    --banner-hue-filter: hue-rotate(120deg) saturate(1.25);
    --btn-primary-bg: #2cc9a8;
    --btn-primary-border: #1ea98b;
    --btn-primary-text: #f4fffc;
    --btn-secondary-bg: #3f6570;
    --btn-secondary-border: #2f4f59;
    --btn-secondary-text: #e9fbf7;
    --btn-success-bg: #1ea77f;
    --btn-success-border: #167f61;
    --btn-success-text: #f3fffa;
    --btn-warning-bg: #d09a3d;
    --btn-warning-border: #ae7d2a;
    --btn-warning-text: #fffef8;
    --btn-danger-bg: #e35f75;
    --btn-danger-border: #bf495e;
    --btn-danger-text: #fff8fa;
    --btn-info-bg: #39d8bd;
    --btn-info-border: #24b39a;
    --btn-info-text: #f3fffb;
    --btn-light-bg: #345a61;
    --btn-light-border: #446f75;
    --btn-light-text: #e9fbf7;
    --btn-dark-bg: #071614;
    --btn-dark-border: #030d0c;
    --btn-dark-text: #daf8f2;
    --btn-shadow: 0 4px 12px rgba(3, 14, 13, 0.34);
    --table-head-bg: #126263;
    --table-head-striped-bg: #157473;
    --table-head-active-bg: #0f5253;
    --table-head-hover-bg: #1b8482;
    --table-head-text: #edfffb;
    --table-row-hover-bg: rgba(155, 255, 233, 0.12);
    --control-bg: #0d2f32;
    --control-text: #e6faf6;
    --control-placeholder: #9fcec5;
    --control-disabled-bg: #23494e;
    --control-disabled-text: #bfe7df;
    --checkbox-accent: #2cc9a8;
}

body.theme-sunset {
    --app-bg: #24120c;
    --app-bg-accent: #7d3618;
    --surface: #4a2a1c;
    --surface-soft: #5a3422;
    --border-soft: rgba(255, 195, 132, 0.28);
    --border-strong: rgba(255, 195, 132, 0.46);
    --shadow-soft: 0 14px 36px rgba(24, 10, 6, 0.55);
    --shadow-card: 0 8px 24px rgba(24, 10, 6, 0.44);
    --text-primary: #ffe9d4;
    --heading-color: #fff5ea;
    --text-subtle: #f6c89f;
    --text-soft: #e8b186;
    --link: #ffd39d;
    --bg-gradient-start: #1f100b;
    --hero-start: #9a411c;
    --hero-end: #be5a24;
    --hero-border: rgba(255, 203, 145, 0.46);
    --field-border: rgba(255, 203, 145, 0.4);
    --focus-ring: rgba(255, 221, 173, 0.82);
    --focus-shadow: rgba(255, 169, 97, 0.28);
    --tab-active-bg: #552f1f;
    --log-bg: #1d0d08;
    --log-text: #ffe8d4;
    --sidebar-bg-start: #35150da8;
    --sidebar-bg-end: #220f0896;
    --sidebar-glow: rgba(255, 157, 88, 0.22);
    --sidebar-text: #ffdfc0;
    --sidebar-text-muted: #f5bc88;
    --sidebar-section: #ffd3a8;
    --sidebar-active-bg: rgba(255, 175, 110, 0.34);
    --sidebar-active-border: rgba(255, 219, 173, 0.62);
    --sidebar-hover-bg: rgba(255, 226, 194, 0.15);
    --sidebar-hover-border: rgba(255, 226, 194, 0.32);
    --sidebar-border: rgba(255, 198, 136, 0.34);
    --sidebar-shadow: 8px 0 24px rgba(24, 10, 6, 0.38);
    --banner-hue-filter: hue-rotate(145deg) saturate(1.45) brightness(1.05);
    --btn-primary-bg: #f28b3c;
    --btn-primary-border: #d16f27;
    --btn-primary-text: #fffaf5;
    --btn-secondary-bg: #7a5642;
    --btn-secondary-border: #634433;
    --btn-secondary-text: #fff2e6;
    --btn-success-bg: #2fa070;
    --btn-success-border: #237b56;
    --btn-success-text: #f4fff9;
    --btn-warning-bg: #e4a238;
    --btn-warning-border: #bf8125;
    --btn-warning-text: #fffef8;
    --btn-danger-bg: #e66a4b;
    --btn-danger-border: #c55338;
    --btn-danger-text: #fff8f6;
    --btn-info-bg: #f39a54;
    --btn-info-border: #d07d3c;
    --btn-info-text: #fff8f2;
    --btn-light-bg: #7f553e;
    --btn-light-border: #996b50;
    --btn-light-text: #fff1e4;
    --btn-dark-bg: #2a120a;
    --btn-dark-border: #1a0904;
    --btn-dark-text: #ffe5cf;
    --btn-shadow: 0 4px 12px rgba(24, 10, 6, 0.36);
    --table-head-bg: #8e4423;
    --table-head-striped-bg: #a6532b;
    --table-head-active-bg: #78381c;
    --table-head-hover-bg: #b85e30;
    --table-head-text: #fff5eb;
    --table-row-hover-bg: rgba(255, 219, 173, 0.14);
    --control-bg: #613622;
    --control-text: #fff1e2;
    --control-placeholder: #e7bc95;
    --control-disabled-bg: #835238;
    --control-disabled-text: #ffd8b8;
    --checkbox-accent: #f28b3c;
}

a,
.btn-link {
    color: var(--link);
}

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.content {
    padding-top: 1.1rem;
}

.app-page {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1.2rem 1.2rem 1.4rem;
    min-height: calc(100vh - 4rem);
}

.app-page > h1,
.app-page > h2,
.app-page > h3,
.app-page > h4,
.app-page > h5,
.app-page > h6 {
    margin-bottom: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0.01em;
    font-weight: 700;
    color: var(--heading-color);
}

hr {
    border-top: 1px solid var(--border-soft);
}

.text-info,
.text-muted {
    color: var(--text-subtle) !important;
}

.jumbotron {
    background: linear-gradient(135deg, var(--hero-start) 0%, var(--hero-end) 95%);
    border: 1px solid var(--hero-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.card,
.modal-content,
.dropdown-menu,
.table,
.alert,
.list-group {
    border-radius: var(--radius-md);
}

.card,
.modal-content,
.dropdown-menu,
.alert,
.list-group {
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-card);
}

.table {
    overflow: hidden;
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-card);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    vertical-align: middle;
    padding: 0.62rem 0.65rem;
}

.table-hover tbody tr:hover {
    background-color: var(--table-row-hover-bg);
}

.table-dark {
    --bs-table-bg: var(--table-head-bg);
    --bs-table-striped-bg: var(--table-head-striped-bg);
    --bs-table-striped-color: var(--table-head-text);
    --bs-table-active-bg: var(--table-head-active-bg);
    --bs-table-hover-bg: var(--table-head-hover-bg);
    --bs-table-hover-color: var(--table-head-text);
}

.form-control,
.form-select,
.input-group-text,
.btn {
    border-radius: var(--radius-sm);
}

.form-control,
.form-select,
.input-group-text,
textarea,
select {
    background-color: var(--control-bg);
    color: var(--control-text);
    border-color: var(--field-border);
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus,
select:focus {
    box-shadow: 0 0 0 0.2rem var(--focus-shadow);
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--control-placeholder);
    opacity: 1;
}

.input-group-text {
    color: var(--text-subtle);
    background-color: color-mix(in srgb, var(--control-bg) 78%, var(--surface-soft) 22%);
}

.form-group {
    margin-bottom: 0.9rem;
}

.form-group > label,
.control-label,
label {
    font-weight: 600;
    color: var(--text-subtle);
    margin-bottom: 0.35rem;
}

.btn {
    font-weight: 600;
    border-width: 1px;
    box-shadow: var(--btn-shadow);
}

/* High-visibility keyboard focus across custom and Bootstrap-styled controls. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
    color: var(--btn-primary-text);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-text);
}

.btn-success {
    background-color: var(--btn-success-bg);
    border-color: var(--btn-success-border);
    color: var(--btn-success-text);
}

.btn-warning {
    background-color: var(--btn-warning-bg);
    border-color: var(--btn-warning-border);
    color: var(--btn-warning-text);
}

.btn-danger {
    background-color: var(--btn-danger-bg);
    border-color: var(--btn-danger-border);
    color: var(--btn-danger-text);
}

.btn-info {
    background-color: var(--btn-info-bg);
    border-color: var(--btn-info-border);
    color: var(--btn-info-text);
}

.btn-light {
    background-color: var(--btn-light-bg);
    border-color: var(--btn-light-border);
    color: var(--btn-light-text);
}

.btn-dark {
    background-color: var(--btn-dark-bg);
    border-color: var(--btn-dark-border);
    color: var(--btn-dark-text);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-info:hover,
.btn-light:hover,
.btn-dark:hover {
    filter: brightness(var(--btn-hover-brightness));
}

.btn-primary:active,
.btn-secondary:active,
.btn-success:active,
.btn-warning:active,
.btn-danger:active,
.btn-info:active,
.btn-light:active,
.btn-dark:active {
    filter: brightness(var(--btn-active-brightness));
}

.btn-outline-primary {
    color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    color: var(--btn-primary-text);
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
}

.btn-outline-secondary {
    color: var(--btn-secondary-text);
    border-color: var(--btn-secondary-border);
    background-color: color-mix(in srgb, var(--btn-secondary-bg) 24%, transparent);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    color: var(--btn-secondary-text);
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
}

.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.nav-tabs {
    border-bottom: 1px solid var(--border-soft);
    gap: 0.4rem;
}

.nav-tabs .nav-link {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border: 1px solid transparent;
    color: var(--text-subtle);
    font-weight: 600;
    padding: 0.5rem 0.85rem;
}

.nav-tabs .nav-link.active {
    color: var(--heading-color);
    background: var(--tab-active-bg);
    border-color: var(--border-soft);
    border-bottom-color: var(--tab-active-bg);
}

.tab-content {
    padding-top: 0.9rem;
}

.app-page .row {
    --bs-gutter-y: 0.8rem;
}

.list-box {
    background: var(--surface-soft);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

.alert {
    border-width: 1px;
}

textarea.logs-content,
textarea.form-control {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #16a34a;
}

.invalid {
    outline: 1px solid #dc2626;
}

.validation-message {
    color: #dc2626;
}

#blazor-error-ui {
    background: #fff7d9;
    border-top: 1px solid #ebd38a;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #1f2937;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

#qrCode {
    margin: 15px;
}

#qrCode img {
    border-width: 3px;
    border-style: solid;
    border-color: white;
}

footer {
    overflow: hidden !important;
}

input[type="checkbox"] {
    height: 1.1em;
    width: 1.1em;
    accent-color: var(--checkbox-accent);
}

input[disabled],
input[readonly],
select[disabled] {
    background-color: var(--control-disabled-bg) !important;
    color: var(--control-disabled-text) !important;
    border-color: color-mix(in srgb, var(--field-border) 70%, var(--control-disabled-bg) 30%) !important;
}

.pointer {
    cursor: pointer;
}

#components-reconnect-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
    background-color: rgba(2, 8, 23, 0.38) !important;
    background-image: none !important;
    backdrop-filter: blur(1.5px) !important;
    color: var(--log-text);
    font-weight: 800;
    font-size: clamp(1.15rem, 2.1vw, 2rem);
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

#components-reconnect-modal .spinner-border,
#components-reconnect-modal .components-reconnect-spinner,
#components-reconnect-modal svg {
    display: none !important;
}

#components-reconnect-modal [style*="border-radius: 50%"][style*="border-width: 0.3em"][style*="border-style: solid"] {
    width: clamp(86px, 10vw, 128px) !important;
    height: clamp(86px, 10vw, 128px) !important;
    border: 0 !important;
    border-color: transparent !important;
    border-image: none !important;
    background: none !important;
    animation: none !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}

#components-reconnect-modal .custom-inline-spinner-gif {
    width: clamp(86px, 10vw, 128px) !important;
    height: clamp(86px, 10vw, 128px) !important;
    display: inline-block !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
    vertical-align: middle;
}

#components-reconnect-modal .custom-reconnect-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

#components-reconnect-modal .custom-reconnect-gif {
    width: clamp(86px, 10vw, 128px);
    height: clamp(86px, 10vw, 128px);
    object-fit: contain;
    margin: 0 auto 0.35rem;
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.35));
    pointer-events: none;
}

#components-reconnect-modal .custom-reconnect-text {
    font-weight: 800;
    text-align: center;
}

#components-reconnect-modal .custom-reconnect-rainbow {
    color: #ff5f9e;
    animation: reconnect-rainbow-flow 5s linear infinite;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal[style*="display: block"],
#components-reconnect-modal[style*="visibility: visible"] {
    color: var(--log-text) !important;
    animation: none !important;
}

#components-reconnect-modal.components-reconnect-show > :not(img),
#components-reconnect-modal[style*="display: block"] > :not(img),
#components-reconnect-modal[style*="visibility: visible"] > :not(img) {
    display: inline-block;
    color: #ffffff !important;
    background-image: linear-gradient(
        90deg,
        #ff2d95 0%,
        #ff8f1f 18%,
        #ffe73a 36%,
        #34e95d 54%,
        #22d6ff 72%,
        #7f70ff 86%,
        #ff2d95 100%
    ) !important;
    background-size: 260% 100% !important;
    background-position: 0% 50% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: reconnect-rainbow-slide 2.6s linear infinite !important;
}

#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    color: #ffccd5;
}

@keyframes reconnect-rainbow-flow {
    0% {
        color: #ff3b7f;
    }
    17% {
        color: #ff8a00;
    }
    34% {
        color: #ffe500;
    }
    50% {
        color: #45f26d;
    }
    67% {
        color: #18d4ff;
    }
    84% {
        color: #6c7cff;
    }
    100% {
        color: #ff3b7f;
    }
}

@keyframes reconnect-rainbow-slide {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 260% 50%;
    }
}


@media (max-width: 640.98px) {
    .content {
        padding-top: 1rem;
        padding-inline: 0.85rem !important;
    }

    .app-page {
        padding: 0.85rem 0.85rem 1.1rem;
        min-height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

#components-reconnect-modal.components-reconnect-show > :not(img),
#components-reconnect-modal[style*="display: block"] > :not(img),
#components-reconnect-modal[style*="visibility: visible"] > :not(img) {
    animation-duration: 2.6s !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    #components-reconnect-modal.components-reconnect-show > :not(img),
    #components-reconnect-modal[style*="display: block"] > :not(img),
    #components-reconnect-modal[style*="visibility: visible"] > :not(img) {
        color: #ff5f9e !important;
        background: none !important;
        -webkit-text-fill-color: currentcolor !important;
        animation: reconnect-rainbow-flow 2.4s linear infinite !important;
    }
}