:root {
    color-scheme: light;
    --bg: #f2f2f2;
    --surface: #ffffff;
    --surface-2: #f6f6f6;
    --border: #cccccc;
    --border-dark: #777777;
    --text: #1f1f1f;
    --muted: #666666;
    --nav: #111111;
    --nav-brand: #000000;
    --nav-border: #000000;
    --nav-brand-border: #3a3a3a;
    --nav-text: #f2f2f2;
    --nav-muted: #bdbdbd;
    --nav-hover: #2d2d2d;
    --nav-active-border: #ffffff;
    --accent: #222222;
    --accent-dark: #000000;
    --on-accent: #ffffff;
    --panel-header-bg: #222222;
    --panel-header-border: #000000;
    --body-gradient-start: #dedede;
    --button-hover: #e8e8e8;
    --panel-shadow: #d5d5d5;
    --input-bg: #ffffff;
    --table-head-bg: #222222;
    --table-head-text: #ffffff;
    --table-even-bg: #f7f7f7;
    --table-hover-bg: #e9e9e9;
    --table-hover-outline: #999999;
    --subtle-bg: #f4f4f4;
    --subtle-bg-2: #fafafa;
    --status-bg: #eeeeee;
    --status-ok-bg: #eeeeee;
    --status-warn-bg: #eeeeee;
    --status-off-bg: #eeeeee;
    --panel-subheader-bg: #eeeeee;
    --login-grid: rgba(255, 255, 255, .12);
    --login-grid-y: rgba(255, 255, 255, .08);
    --danger: #333333;
    --success: #333333;
    --warning: #333333;
    --danger-border: #777777;
    --overlay: rgba(0, 0, 0, .45);
    --floating-shadow: rgba(0, 0, 0, .26);
    --topbar-shadow: rgba(0, 0, 0, .06);
    --theme-panel-border: rgba(255, 255, 255, .16);
    --theme-panel-bg: rgba(255, 255, 255, .05);
    --theme-choice-border: rgba(255, 255, 255, .26);
    --theme-choice-hover: rgba(255, 255, 255, .1);
    --theme-swatch-border: rgba(255, 255, 255, .62);
    font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}

html[data-theme="sage"] {
    --bg: #eef2ef;
    --surface: #fbfcfb;
    --surface-2: #f3f6f4;
    --border: #c7cfca;
    --border-dark: #89978f;
    --text: #26312d;
    --muted: #69766f;
    --nav: #26332f;
    --nav-brand: #1f2b27;
    --nav-border: #18211e;
    --nav-brand-border: #485850;
    --nav-text: #e0e7e3;
    --nav-muted: #a8b5af;
    --nav-hover: #34463f;
    --nav-active-border: #86b0a3;
    --accent: #47786d;
    --accent-dark: #365e55;
    --on-accent: #ffffff;
    --panel-header-bg: #40564e;
    --panel-header-border: #2d3e38;
    --body-gradient-start: #dde5e0;
    --button-hover: #e8eef0;
    --panel-shadow: #d2d9d5;
    --input-bg: #fdfefd;
    --table-head-bg: #4a6057;
    --table-head-text: #f4f7f5;
    --table-even-bg: #f5f8f6;
    --table-hover-bg: #e8f1ec;
    --table-hover-outline: #9fb9ae;
    --subtle-bg: #f3f7f5;
    --subtle-bg-2: #f8faf9;
    --status-bg: #edf2ef;
    --status-ok-bg: #e9f3ed;
    --status-warn-bg: #f8f1e3;
    --status-off-bg: #f8eceb;
    --panel-subheader-bg: #eef3f1;
    --login-grid: rgba(118, 163, 149, .18);
    --login-grid-y: rgba(255, 255, 255, .08);
    --danger: #9b4c49;
    --success: #47765c;
    --warning: #946f35;
    --danger-border: #c78b8b;
    --floating-shadow: rgba(0, 0, 0, .22);
    --topbar-shadow: rgba(38, 51, 47, .05);
}

html[data-theme="mist-blue"] {
    --bg: #edf2f5;
    --surface: #fbfcfd;
    --surface-2: #f1f5f7;
    --border: #c5d0d6;
    --border-dark: #8294a0;
    --text: #26313a;
    --muted: #667783;
    --nav: #24323d;
    --nav-brand: #1d2932;
    --nav-border: #18232b;
    --nav-brand-border: #475b68;
    --nav-text: #e1e8ec;
    --nav-muted: #a8b7c0;
    --nav-hover: #334754;
    --nav-active-border: #83a9bb;
    --accent: #487489;
    --accent-dark: #365b6e;
    --on-accent: #ffffff;
    --panel-header-bg: #3f5968;
    --panel-header-border: #2e414d;
    --body-gradient-start: #dce6eb;
    --button-hover: #e7eef2;
    --panel-shadow: #ced8dd;
    --input-bg: #fdfefe;
    --table-head-bg: #435f70;
    --table-head-text: #f5f8fa;
    --table-even-bg: #f5f8fa;
    --table-hover-bg: #e7f0f4;
    --table-hover-outline: #9db8c6;
    --subtle-bg: #f2f7f9;
    --subtle-bg-2: #f8fbfc;
    --status-bg: #edf3f6;
    --status-ok-bg: #e8f2f4;
    --status-warn-bg: #f8f3e7;
    --status-off-bg: #f8ecec;
    --panel-subheader-bg: #eef4f7;
    --login-grid: rgba(131, 169, 187, .18);
    --login-grid-y: rgba(255, 255, 255, .08);
    --danger: #954c4c;
    --success: #47765c;
    --warning: #8d6f38;
    --danger-border: #c78b8b;
    --floating-shadow: rgba(0, 0, 0, .22);
    --topbar-shadow: rgba(38, 49, 58, .05);
}

html[data-theme="graphite"] {
    --bg: #eff1f1;
    --surface: #fcfcfb;
    --surface-2: #f3f4f3;
    --border: #c9cfcc;
    --border-dark: #858f8a;
    --text: #262b29;
    --muted: #696f6c;
    --nav: #292e2d;
    --nav-brand: #202423;
    --nav-border: #181b1a;
    --nav-brand-border: #4b5350;
    --nav-text: #e2e7e5;
    --nav-muted: #aeb6b2;
    --nav-hover: #3a4140;
    --nav-active-border: #9aa8a1;
    --accent: #5d6e68;
    --accent-dark: #46534f;
    --on-accent: #ffffff;
    --panel-header-bg: #4b5652;
    --panel-header-border: #343d3a;
    --body-gradient-start: #e1e5e3;
    --button-hover: #e9eceb;
    --panel-shadow: #d6dbd9;
    --input-bg: #fdfdfc;
    --table-head-bg: #505a57;
    --table-head-text: #f5f6f5;
    --table-even-bg: #f6f7f7;
    --table-hover-bg: #eaeeee;
    --table-hover-outline: #aab4b0;
    --subtle-bg: #f5f7f6;
    --subtle-bg-2: #fafafa;
    --status-bg: #eff1f0;
    --status-ok-bg: #edf3f0;
    --status-warn-bg: #f5f1e8;
    --status-off-bg: #f5eeee;
    --panel-subheader-bg: #eef1ef;
    --login-grid: rgba(154, 168, 161, .18);
    --login-grid-y: rgba(255, 255, 255, .08);
    --danger: #914d4b;
    --success: #4f735e;
    --warning: #866c3c;
    --danger-border: #c78b8b;
    --floating-shadow: rgba(0, 0, 0, .22);
    --topbar-shadow: rgba(38, 43, 41, .05);
}

html[data-theme="tea"] {
    --bg: #f1f0eb;
    --surface: #fdfcf9;
    --surface-2: #f6f4ee;
    --border: #d1cabd;
    --border-dark: #968b7a;
    --text: #332f28;
    --muted: #786f61;
    --nav: #342f29;
    --nav-brand: #28231e;
    --nav-border: #1f1a16;
    --nav-brand-border: #5a5043;
    --nav-text: #ede7dc;
    --nav-muted: #bbb0a0;
    --nav-hover: #463f36;
    --nav-active-border: #b19b74;
    --accent: #7a6746;
    --accent-dark: #5e4f36;
    --on-accent: #ffffff;
    --panel-header-bg: #665940;
    --panel-header-border: #4c422f;
    --body-gradient-start: #e7e2d8;
    --button-hover: #eee9df;
    --panel-shadow: #ddd7cc;
    --input-bg: #fffefa;
    --table-head-bg: #6c6048;
    --table-head-text: #fbf8ef;
    --table-even-bg: #faf8f2;
    --table-hover-bg: #f0eadc;
    --table-hover-outline: #b9aa8f;
    --subtle-bg: #f7f3ea;
    --subtle-bg-2: #fbfaf6;
    --status-bg: #f2efe8;
    --status-ok-bg: #edf2e8;
    --status-warn-bg: #f7f0df;
    --status-off-bg: #f5ece9;
    --panel-subheader-bg: #f2eee5;
    --login-grid: rgba(177, 155, 116, .18);
    --login-grid-y: rgba(255, 255, 255, .08);
    --danger: #934f47;
    --success: #5f704b;
    --warning: #866333;
    --danger-border: #c78b8b;
    --floating-shadow: rgba(0, 0, 0, .22);
    --topbar-shadow: rgba(51, 47, 40, .05);
}

html[data-theme="soft-purple"] {
    --bg: #f1f0f4;
    --surface: #fdfcff;
    --surface-2: #f5f3f8;
    --border: #cec9d8;
    --border-dark: #8f86a0;
    --text: #302c37;
    --muted: #71697d;
    --nav: #302b3a;
    --nav-brand: #272230;
    --nav-border: #1d1925;
    --nav-brand-border: #534a62;
    --nav-text: #e8e3ef;
    --nav-muted: #b5adbf;
    --nav-hover: #433c50;
    --nav-active-border: #a99bc7;
    --accent: #6f628c;
    --accent-dark: #554b6d;
    --on-accent: #ffffff;
    --panel-header-bg: #5f5575;
    --panel-header-border: #463e57;
    --body-gradient-start: #e5e0eb;
    --button-hover: #ece8f1;
    --panel-shadow: #d8d2df;
    --input-bg: #fffefe;
    --table-head-bg: #675d7d;
    --table-head-text: #faf8fc;
    --table-even-bg: #f8f6fa;
    --table-hover-bg: #eee9f4;
    --table-hover-outline: #b2a6ca;
    --subtle-bg: #f5f2f8;
    --subtle-bg-2: #fbfafd;
    --status-bg: #f0eef3;
    --status-ok-bg: #edf2ee;
    --status-warn-bg: #f6f0e4;
    --status-off-bg: #f6eeee;
    --panel-subheader-bg: #f1eef5;
    --login-grid: rgba(169, 155, 199, .18);
    --login-grid-y: rgba(255, 255, 255, .08);
    --danger: #914d55;
    --success: #587456;
    --warning: #846839;
    --danger-border: #c78b8b;
    --floating-shadow: rgba(0, 0, 0, .22);
    --topbar-shadow: rgba(48, 44, 55, .05);
}

html[data-theme="paper-gray"] {
    --bg: #f4f4f1;
    --surface: #fffefa;
    --surface-2: #f7f6f1;
    --border: #d1d0c8;
    --border-dark: #8f8e86;
    --text: #2f302c;
    --muted: #707068;
    --nav: #292b28;
    --nav-brand: #20211f;
    --nav-border: #191a18;
    --nav-brand-border: #4c4d48;
    --nav-text: #e8e8e2;
    --nav-muted: #b6b6ae;
    --nav-hover: #3a3b37;
    --nav-active-border: #c2c0b2;
    --accent: #65675c;
    --accent-dark: #4f5148;
    --on-accent: #ffffff;
    --panel-header-bg: #57594f;
    --panel-header-border: #3f4139;
    --body-gradient-start: #e4e3dc;
    --button-hover: #ecebe4;
    --panel-shadow: #d9d8d1;
    --input-bg: #fffefa;
    --table-head-bg: #5d5f55;
    --table-head-text: #f7f7f1;
    --table-even-bg: #f8f7f2;
    --table-hover-bg: #eeeee7;
    --table-hover-outline: #b5b4aa;
    --subtle-bg: #f6f5ef;
    --subtle-bg-2: #fbfaf6;
    --status-bg: #f0efe9;
    --status-ok-bg: #eef2ec;
    --status-warn-bg: #f5f0e4;
    --status-off-bg: #f4ecea;
    --panel-subheader-bg: #eeeee7;
    --login-grid: rgba(194, 192, 178, .18);
    --login-grid-y: rgba(255, 255, 255, .08);
    --danger: #8f504c;
    --success: #5d735a;
    --warning: #806b40;
    --danger-border: #c78b8b;
    --floating-shadow: rgba(0, 0, 0, .22);
    --topbar-shadow: rgba(47, 48, 44, .05);
}

html[data-theme="warm-gray"] {
    --bg: #f0efed;
    --surface: #fcfbf8;
    --surface-2: #f5f3ef;
    --border: #cec9c1;
    --border-dark: #91897e;
    --text: #312e2a;
    --muted: #746d64;
    --nav: #302d29;
    --nav-brand: #24211e;
    --nav-border: #1b1816;
    --nav-brand-border: #514b44;
    --nav-text: #e9e4dd;
    --nav-muted: #b9b1a6;
    --nav-hover: #423d37;
    --nav-active-border: #b8aa98;
    --accent: #746858;
    --accent-dark: #5a5145;
    --on-accent: #ffffff;
    --panel-header-bg: #62584b;
    --panel-header-border: #493f35;
    --body-gradient-start: #e2ddd6;
    --button-hover: #ece7df;
    --panel-shadow: #dad5cc;
    --input-bg: #fffdfa;
    --table-head-bg: #675d50;
    --table-head-text: #faf7f1;
    --table-even-bg: #f8f5ef;
    --table-hover-bg: #eee8df;
    --table-hover-outline: #b7ab9a;
    --subtle-bg: #f6f2eb;
    --subtle-bg-2: #fbfaf6;
    --status-bg: #f1ede6;
    --status-ok-bg: #edf2e9;
    --status-warn-bg: #f6efe0;
    --status-off-bg: #f5ebe8;
    --panel-subheader-bg: #f0ebe3;
    --login-grid: rgba(184, 170, 152, .18);
    --login-grid-y: rgba(255, 255, 255, .08);
    --danger: #914f48;
    --success: #61734f;
    --warning: #836639;
    --danger-border: #c78b8b;
    --floating-shadow: rgba(0, 0, 0, .22);
    --topbar-shadow: rgba(49, 46, 42, .05);
}

html[data-theme="celadon"] {
    --bg: #edf3f0;
    --surface: #fbfdfb;
    --surface-2: #f1f7f4;
    --border: #c3d1cb;
    --border-dark: #81978e;
    --text: #26342f;
    --muted: #647970;
    --nav: #23332d;
    --nav-brand: #1b2824;
    --nav-border: #14201c;
    --nav-brand-border: #435c53;
    --nav-text: #dfeae5;
    --nav-muted: #a7bab1;
    --nav-hover: #314840;
    --nav-active-border: #91b9aa;
    --accent: #527e70;
    --accent-dark: #3e6156;
    --on-accent: #ffffff;
    --panel-header-bg: #486a5f;
    --panel-header-border: #334e45;
    --body-gradient-start: #dceae4;
    --button-hover: #e6f0eb;
    --panel-shadow: #cddbd5;
    --input-bg: #fdfffe;
    --table-head-bg: #4f7267;
    --table-head-text: #f3f8f6;
    --table-even-bg: #f5faf7;
    --table-hover-bg: #e4f1eb;
    --table-hover-outline: #9dbdaf;
    --subtle-bg: #f1f8f4;
    --subtle-bg-2: #f8fcfa;
    --status-bg: #ecf4f0;
    --status-ok-bg: #e8f3ec;
    --status-warn-bg: #f7f2e4;
    --status-off-bg: #f6ecea;
    --panel-subheader-bg: #eaf3ef;
    --login-grid: rgba(145, 185, 170, .18);
    --login-grid-y: rgba(255, 255, 255, .08);
    --danger: #944e49;
    --success: #47745e;
    --warning: #896b38;
    --danger-border: #c78b8b;
    --floating-shadow: rgba(0, 0, 0, .22);
    --topbar-shadow: rgba(38, 52, 47, .05);
}

html[data-theme="pearl-blue"] {
    --bg: #eef3f6;
    --surface: #fcfdfe;
    --surface-2: #f2f7fa;
    --border: #c6d2d9;
    --border-dark: #8496a2;
    --text: #27323a;
    --muted: #657985;
    --nav: #22313b;
    --nav-brand: #1b2730;
    --nav-border: #142029;
    --nav-brand-border: #435765;
    --nav-text: #e1e9ee;
    --nav-muted: #a8b8c2;
    --nav-hover: #314653;
    --nav-active-border: #91b1c2;
    --accent: #567a8d;
    --accent-dark: #405f70;
    --on-accent: #ffffff;
    --panel-header-bg: #4b6474;
    --panel-header-border: #364a57;
    --body-gradient-start: #dde9ef;
    --button-hover: #e7f0f4;
    --panel-shadow: #d0dbe1;
    --input-bg: #fdfeff;
    --table-head-bg: #506d7e;
    --table-head-text: #f4f8fa;
    --table-even-bg: #f5f9fb;
    --table-hover-bg: #e4f0f6;
    --table-hover-outline: #9fb9c7;
    --subtle-bg: #f1f7fa;
    --subtle-bg-2: #f8fbfd;
    --status-bg: #edf4f7;
    --status-ok-bg: #e9f3ee;
    --status-warn-bg: #f8f2e5;
    --status-off-bg: #f7ecec;
    --panel-subheader-bg: #eaf3f7;
    --login-grid: rgba(145, 177, 194, .18);
    --login-grid-y: rgba(255, 255, 255, .08);
    --danger: #944d4d;
    --success: #4d735f;
    --warning: #8b6b38;
    --danger-border: #c78b8b;
    --floating-shadow: rgba(0, 0, 0, .22);
    --topbar-shadow: rgba(39, 50, 58, .05);
}

html[data-theme="rose-gray"] {
    --bg: #f3f0f0;
    --surface: #fffdfd;
    --surface-2: #f8f4f4;
    --border: #d6c9c9;
    --border-dark: #9b8888;
    --text: #352d2d;
    --muted: #7b6b6b;
    --nav: #332b2d;
    --nav-brand: #282123;
    --nav-border: #1f181a;
    --nav-brand-border: #57484b;
    --nav-text: #eee5e6;
    --nav-muted: #beaeb0;
    --nav-hover: #473c3f;
    --nav-active-border: #c39fa4;
    --accent: #85676d;
    --accent-dark: #684f55;
    --on-accent: #ffffff;
    --panel-header-bg: #705b60;
    --panel-header-border: #554247;
    --body-gradient-start: #e8dfdf;
    --button-hover: #efe7e7;
    --panel-shadow: #ddd3d3;
    --input-bg: #fffefe;
    --table-head-bg: #786166;
    --table-head-text: #fbf7f7;
    --table-even-bg: #faf7f7;
    --table-hover-bg: #f0e6e7;
    --table-hover-outline: #c3aaae;
    --subtle-bg: #f8f3f3;
    --subtle-bg-2: #fcfafa;
    --status-bg: #f2eded;
    --status-ok-bg: #edf2ec;
    --status-warn-bg: #f7f0e3;
    --status-off-bg: #f6ecec;
    --panel-subheader-bg: #f3eeee;
    --login-grid: rgba(195, 159, 164, .18);
    --login-grid-y: rgba(255, 255, 255, .08);
    --danger: #884a4d;
    --success: #5f7358;
    --warning: #84683b;
    --danger-border: #c78b8b;
    --floating-shadow: rgba(0, 0, 0, .22);
    --topbar-shadow: rgba(53, 45, 45, .05);
}

html[data-theme="olive-gray"] {
    --bg: #f0f2ed;
    --surface: #fcfdf9;
    --surface-2: #f4f6f0;
    --border: #ccd2c3;
    --border-dark: #8b967d;
    --text: #2f352a;
    --muted: #6e7864;
    --nav: #2b3327;
    --nav-brand: #22281f;
    --nav-border: #191f16;
    --nav-brand-border: #4c5846;
    --nav-text: #e6ebdf;
    --nav-muted: #b4bca9;
    --nav-hover: #3d4737;
    --nav-active-border: #a6ba8f;
    --accent: #6d7c5c;
    --accent-dark: #556247;
    --on-accent: #ffffff;
    --panel-header-bg: #5e6a50;
    --panel-header-border: #444d39;
    --body-gradient-start: #e1e7da;
    --button-hover: #eaf0e3;
    --panel-shadow: #d6dccf;
    --input-bg: #fffefa;
    --table-head-bg: #687459;
    --table-head-text: #f6f9f2;
    --table-even-bg: #f7faf3;
    --table-hover-bg: #eaf1e2;
    --table-hover-outline: #adbd9c;
    --subtle-bg: #f4f8ef;
    --subtle-bg-2: #fafcf7;
    --status-bg: #eef3e8;
    --status-ok-bg: #eaf3e8;
    --status-warn-bg: #f7f1e3;
    --status-off-bg: #f6ecea;
    --panel-subheader-bg: #eef4e8;
    --login-grid: rgba(166, 186, 143, .18);
    --login-grid-y: rgba(255, 255, 255, .08);
    --danger: #914f48;
    --success: #5b744f;
    --warning: #846b3a;
    --danger-border: #c78b8b;
    --floating-shadow: rgba(0, 0, 0, .22);
    --topbar-shadow: rgba(47, 53, 42, .05);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; }
a { color: var(--accent); text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--border-dark);
    border-radius: 0;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
button:hover, .button:hover { background: var(--button-hover); }
.button-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button-primary:hover { background: var(--accent-dark); }
.button-danger { border-color: var(--danger-border); color: var(--danger); }
.button-small { min-height: 28px; padding: 0 9px; font-size: 12px; }
.button-link { border: 0; background: transparent; min-height: auto; padding: 0; color: var(--accent); }

.app-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--nav); color: var(--nav-text); border-right: 1px solid var(--nav-border); }
.brand { height: 62px; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--nav-brand-border); font-weight: 700; font-size: 18px; }
.nav-section { padding: 14px 10px 4px; color: var(--nav-muted); font-size: 11px; text-transform: uppercase; }
.nav-link { display: block; color: var(--nav-text); padding: 10px 12px; border-left: 3px solid transparent; }
.nav-link:hover, .nav-link.active { background: var(--nav-hover); border-left-color: var(--nav-active-border); }
.main { min-width: 0; }
.topbar { height: 62px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 22px; }
.topbar h1 { font-size: 18px; margin: 0; font-weight: 650; }
.topbar-user { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.content { padding: 18px 22px 36px; }

.panel { background: var(--surface); border: 1px solid var(--border); margin-bottom: 14px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.panel-header h2, .panel-header h3 { margin: 0; font-size: 14px; }
.panel-body { padding: 12px; }
.panel-subheader { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--panel-subheader-bg); }
.panel-subheader strong { font-size: 13px; color: var(--text); }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.form-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px 12px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.field { min-width: 0; }
.field.span-2 { grid-column: span 2; }
.field.span-3 { grid-column: span 3; }
.field.span-4 { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 4px; color: var(--text); font-size: 12px; font-weight: 600; }
.field input, .field select, .field textarea {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--border-dark);
    border-radius: 0;
    background: var(--input-bg);
    color: var(--text);
    padding: 6px 8px;
    outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.field textarea { min-height: 82px; resize: vertical; }
.inline-options { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 34px; }
.inline-options label { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: 400; }
.inline-options input { width: auto; min-height: auto; }

.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { border: 1px solid var(--border); padding: 7px 8px; text-align: left; vertical-align: top; white-space: nowrap; }
th { position: sticky; top: 0; background: var(--table-head-bg); color: var(--table-head-text); font-size: 12px; z-index: 1; }
tbody tr:hover { background: var(--table-hover-bg); }
td.wrap { white-space: normal; min-width: 180px; max-width: 320px; }
.row-actions { display: flex; gap: 7px; align-items: center; }
.status { display: inline-block; border: 1px solid var(--border-dark); padding: 2px 6px; background: var(--status-bg); font-size: 12px; }
.status.ok { color: var(--success); border-color: var(--border-dark); background: var(--status-ok-bg); }
.status.off { color: var(--danger); border-color: var(--border-dark); background: var(--status-off-bg); }
.status.warn { color: var(--warning); border-color: var(--border-dark); background: var(--status-warn-bg); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.empty { padding: 34px; text-align: center; color: var(--muted); }
.alert { border: 1px solid; padding: 10px 12px; margin-bottom: 14px; }
.alert-success { color: var(--success); border-color: var(--border-dark); background: var(--status-ok-bg); }
.alert-error { color: var(--danger); border-color: var(--border-dark); background: var(--status-off-bg); }
.alert-error ul { margin: 0; padding-left: 20px; }

.summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.summary-strip > div {
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid var(--border-dark);
    border-left: 5px solid var(--accent);
    background: var(--surface);
    box-shadow: 3px 3px 0 var(--panel-shadow);
}

.summary-label {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
}

.summary-strip strong {
    font-size: 17px;
    color: var(--text);
}

.detail-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(380px, .65fr); gap: 14px; align-items: start; }
.tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--surface-2); overflow-x: auto; }
.tab-button { border: 0; border-right: 1px solid var(--border); min-height: 38px; background: transparent; }
.tab-button.active { background: var(--surface); box-shadow: inset 0 -3px var(--accent); }
.tab-panel { display: none; padding: 12px; }
.tab-panel.active { display: block; }
.timeline { display: grid; gap: 8px; max-height: 510px; overflow: auto; }
.timeline-item { border-left: 3px solid var(--accent); padding: 7px 9px; background: var(--subtle-bg-2); }
.timeline-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.pagination { display: flex; align-items: center; gap: 5px; margin-top: 12px; }
.pagination a, .pagination span { border: 1px solid var(--border); padding: 5px 9px; background: var(--surface); }
.pagination .active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.login-page { min-height: 100vh; display: grid; place-items: center; background: var(--nav); }
.login-box { width: min(420px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border-dark); box-shadow: 12px 12px 0 var(--floating-shadow); }
.login-head { padding: 20px; border-bottom: 1px solid var(--border); background: var(--panel-header-bg); color: var(--nav-text); }
.login-head h1 { margin: 0 0 5px; font-size: 22px; }
.login-form { padding: 20px; }

dialog { width: min(500px, calc(100vw - 30px)); border: 1px solid var(--border-dark); border-radius: 0; padding: 0; }
dialog::backdrop { background: var(--overlay); }
.dialog-head { padding: 12px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-weight: 700; }
.dialog-body { padding: 14px; }

.employee-table td {
    vertical-align: middle;
}

.employee-identity {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.employee-name-column {
    width: 105px;
    min-width: 105px;
    max-width: 125px;
}

.employee-contact-column {
    width: 165px;
    min-width: 145px;
    max-width: 180px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.employee-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 190px;
}

.customer-row-actions {
    display: grid;
    align-items: start;
    justify-items: stretch;
    min-width: 58px;
}

.employee-dialog {
    width: min(880px, calc(100vw - 30px));
}

.assignment-dialog {
    width: min(620px, calc(100vw - 28px));
    max-height: calc(100vh - 72px);
    overflow: hidden;
}

.assignment-dialog-body {
    overflow-x: hidden;
}

.assignment-dialog input,
.assignment-dialog select {
    max-width: 100%;
}

.assignment-dialog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.assignment-dialog-grid .span-2 {
    grid-column: 1 / -1;
}

.assignment-dialog-note {
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.assignment-dialog-actions {
    justify-content: flex-end;
    margin-top: 12px;
}

.customer-assignment-panel {
    margin-bottom: 14px;
}

.assignment-grid {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    align-items: end;
}

.assignment-options .inline-options {
    min-height: 34px;
}

.assignment-submit button {
    width: 100%;
}

.assignment-note {
    margin-top: 8px;
    padding: 8px 10px;
    border-left: 4px solid var(--accent);
    background: var(--subtle-bg);
    color: var(--text);
    font-size: 12px;
    line-height: 1.6;
}

.permission-custom-field {
    grid-column: 1 / -1;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 8px 10px;
}

.permission-group {
    border: 1px solid var(--border);
    background: var(--subtle-bg-2);
    padding: 8px 9px;
}

.permission-group strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
    font-size: 12px;
}

.permission-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
}

.permission-checks label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    font-weight: 400;
    white-space: nowrap;
}

.permission-checks input {
    width: auto;
    min-height: 0;
}

.password-reset-section {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.password-reset-section h3 {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 14px;
}

.dictionary-workspace {
    overflow: hidden;
}

.dictionary-title-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 10px 12px 0;
    background: var(--panel-subheader-bg);
    border-bottom: 1px solid var(--border);
}

.dictionary-title-tab {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-bottom: 0;
    background: var(--subtle-bg-2);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 4px 0 0;
}

.dictionary-title-tab small {
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--button-hover);
    color: var(--muted);
    font-size: 11px;
}

.dictionary-title-tab.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: inset 0 3px var(--accent);
}

.dictionary-title-tab.active small {
    background: var(--subtle-bg);
    color: var(--accent-dark);
}

.dictionary-content {
    background: var(--surface);
}

.dictionary-tab-panel {
    display: none;
}

.dictionary-tab-panel.active {
    display: block;
}

.dictionary-add-form {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 86px auto;
    gap: 8px;
    align-items: end;
}

.dictionary-table th:nth-child(2),
.dictionary-table td:nth-child(2) {
    width: 80px;
}

.dictionary-table th:nth-child(3),
.dictionary-table td:nth-child(3),
.dictionary-table th:nth-child(4),
.dictionary-table td:nth-child(4) {
    width: 78px;
}

.dictionary-sort-cell input,
.dictionary-sort-field input {
    text-align: center;
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

@media (max-width: 1050px) {
    .form-grid, .form-grid.cols-3 { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
    .detail-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .brand { height: 52px; }
    .nav-section { display: none; }
    .sidebar nav { display: flex; overflow-x: auto; }
    .nav-link { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
    .nav-link.active { border-bottom-color: var(--nav-active-border); }
    .theme-manager { margin: 8px 10px 10px; }
    .theme-options { grid-template-columns: repeat(6, 32px); }
    .topbar { height: auto; min-height: 54px; padding: 10px 14px; }
    .content { padding: 12px; }
    .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; }
    .field.span-2, .field.span-3, .field.span-4 { grid-column: auto; }
    .summary-strip { grid-template-columns: 1fr; }
    .dictionary-add-form { grid-template-columns: 1fr; }
}

/* Visual pass: compact, sharp-edged CRM workstation UI. */
body {
    background:
        linear-gradient(180deg, var(--body-gradient-start) 0, var(--bg) 190px),
        var(--bg);
    font-size: 13px;
}

.app-shell {
    grid-template-columns: 236px minmax(0, 1fr);
}

.sidebar {
    display: flex;
    flex-direction: column;
    background: var(--nav);
    border-right: 1px solid var(--nav-border);
    box-shadow: inset -1px 0 0 var(--nav-brand-border);
}

.sidebar nav {
    flex: 1;
}

.brand {
    height: 58px;
    padding-left: 18px;
    background: var(--nav-brand);
    color: var(--nav-text);
    border-bottom: 1px solid var(--nav-brand-border);
    letter-spacing: 0;
}

.brand::before {
    content: "";
    width: 7px;
    height: 28px;
    margin-right: 10px;
    background: var(--nav-active-border);
    display: inline-block;
}

.nav-section {
    padding: 18px 18px 6px;
    color: var(--nav-muted);
    font-size: 11px;
}

.nav-link {
    margin: 0 10px 4px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-left: 4px solid transparent;
    color: var(--nav-text);
}

.nav-link:hover,
.nav-link.active {
    background: var(--nav-hover);
    border-color: var(--nav-brand-border);
    border-left-color: var(--nav-active-border);
    color: var(--nav-text);
}

.theme-manager {
    margin: 12px 10px 14px;
    padding: 10px;
    border: 1px solid var(--theme-panel-border);
    background: var(--theme-panel-bg);
}

.theme-manager-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: var(--nav-muted);
    font-size: 11px;
    font-weight: 700;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.theme-choice {
    width: 100%;
    min-width: 0;
    min-height: 28px;
    padding: 0;
    border: 1px solid var(--theme-choice-border);
    background: transparent;
}

.theme-choice:hover,
.theme-choice.active {
    border-color: var(--nav-active-border);
    background: var(--theme-choice-hover);
}

.theme-swatch {
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid var(--theme-swatch-border);
}

.theme-choice[data-theme-value="default"] .theme-swatch { background: linear-gradient(90deg, #111 0 50%, #fff 50% 100%); }
.theme-choice[data-theme-value="sage"] .theme-swatch { background: #47786d; }
.theme-choice[data-theme-value="mist-blue"] .theme-swatch { background: #487489; }
.theme-choice[data-theme-value="graphite"] .theme-swatch { background: #5d6e68; }
.theme-choice[data-theme-value="tea"] .theme-swatch { background: #7a6746; }
.theme-choice[data-theme-value="soft-purple"] .theme-swatch { background: #6f628c; }
.theme-choice[data-theme-value="paper-gray"] .theme-swatch { background: #65675c; }
.theme-choice[data-theme-value="warm-gray"] .theme-swatch { background: #746858; }
.theme-choice[data-theme-value="celadon"] .theme-swatch { background: #527e70; }
.theme-choice[data-theme-value="pearl-blue"] .theme-swatch { background: #567a8d; }
.theme-choice[data-theme-value="rose-gray"] .theme-swatch { background: #85676d; }
.theme-choice[data-theme-value="olive-gray"] .theme-swatch { background: #6d7c5c; }

.topbar {
    height: 58px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 0 var(--topbar-shadow);
}

.topbar h1 {
    font-size: 20px;
    color: var(--text);
}

.topbar-user {
    gap: 9px;
}

.content {
    padding: 18px;
}

.panel {
    border-color: var(--border);
    box-shadow: 4px 4px 0 var(--panel-shadow);
    margin-bottom: 18px;
}

.panel-header {
    min-height: 42px;
    padding: 8px 10px 8px 12px;
    background: var(--panel-header-bg);
    color: var(--nav-text);
    border-bottom-color: var(--panel-header-border);
}

.panel-header h2,
.panel-header h3 {
    font-size: 14px;
    letter-spacing: 0;
}

.panel-header .muted,
.panel-header .small {
    color: var(--nav-text);
}

.panel-body {
    padding: 12px;
    background: var(--surface);
}

.toolbar {
    gap: 6px;
}

button,
.button {
    min-height: 31px;
    padding: 0 12px;
    border-color: var(--border-dark);
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
}

.button-small {
    min-height: 26px;
    padding: 0 8px;
    font-size: 12px;
}

.button-primary {
    background: var(--accent);
    border-color: var(--accent-dark);
    color: var(--on-accent);
}

.button-primary:hover {
    background: var(--accent-dark);
}

.button-danger {
    background: var(--status-off-bg);
    border-color: var(--border-dark);
    color: var(--danger);
}

.form-grid {
    grid-template-columns: repeat(6, minmax(126px, 1fr));
    gap: 8px;
}

.form-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.field label {
    margin-bottom: 3px;
    color: var(--text);
    font-size: 11px;
}

.field input,
.field select,
.field textarea,
td input,
td select {
    min-height: 30px;
    border-color: var(--border-dark);
    background: var(--input-bg);
    padding: 4px 7px;
    font-size: 13px;
}

.field textarea {
    min-height: 72px;
}

.inline-options {
    min-height: 30px;
    gap: 9px;
    align-content: center;
}

.filter-tags-field {
    grid-column: 1 / -1;
}

.filter-tags-options {
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    gap: 10px;
    min-height: auto;
}

.filter-tags-options label {
    min-height: 22px;
    padding-right: 2px;
    white-space: nowrap;
}

.follow-result-options {
    align-items: center;
    align-content: flex-start;
    gap: 4px 12px;
    min-height: auto;
}

.follow-result-options label {
    min-height: 18px;
    line-height: 18px;
    white-space: nowrap;
}

.follow-result-options input[type="radio"] {
    width: 14px;
    height: 14px;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.table-wrap {
    border-top: 0;
    background: var(--surface);
}

table {
    font-size: 12px;
}

th,
td {
    border-color: var(--border);
    padding: 6px 7px;
}

th {
    background: var(--table-head-bg);
    color: var(--table-head-text);
    border-color: var(--panel-header-border);
    font-weight: 650;
}

tbody tr:nth-child(even) {
    background: var(--table-even-bg);
}

tbody tr:hover {
    background: var(--table-hover-bg);
    outline: 1px solid var(--table-hover-outline);
    outline-offset: -1px;
}

td.wrap {
    min-width: 220px;
    max-width: 360px;
    line-height: 1.45;
}

.customer-status-text {
    color: var(--text);
    font-weight: 650;
}

.followup-cell {
    min-width: 240px;
    max-width: 330px;
    position: relative;
    padding-top: 17px;
    white-space: normal;
    line-height: 1.35;
}

.followup-latest {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: baseline;
}

.followup-preview {
    margin-top: 2px;
}

.followup-dropdown {
    margin-top: 5px;
}

.followup-dropdown summary {
    position: absolute;
    top: 5px;
    right: 7px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.followup-dropdown summary::-webkit-details-marker {
    display: none;
}

.followup-dropdown summary:hover {
    color: var(--accent-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.followup-arrow {
    display: inline-block;
    font-size: 10px;
    line-height: 1;
    transition: transform .12s ease;
}

.followup-dropdown[open] .followup-arrow {
    transform: rotate(180deg);
}

.followup-menu {
    margin-top: 5px;
    display: grid;
    gap: 5px;
    background: transparent;
}

.followup-menu-item {
    padding: 0;
    border: 0;
    white-space: normal;
}

.followup-menu-item:last-child {
    border: 0;
}

.status {
    background: var(--status-bg);
    border-color: var(--border-dark);
    color: var(--text);
    font-size: 11px;
    font-weight: 650;
    margin: 0 3px 3px 0;
}

.status.ok {
    background: var(--status-ok-bg);
}

.status.warn {
    background: var(--status-warn-bg);
}

.status.off {
    background: var(--status-off-bg);
}

.tag-cell {
    min-width: 128px;
    max-width: 180px;
    white-space: normal;
}

.tag-list {
    min-width: 128px;
    max-width: 180px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    white-space: normal;
    line-height: 1.2;
}

.tag-list .status {
    border: 0;
    margin: 0;
    min-width: 42px;
    min-height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    line-height: 17px;
    font-size: 11px;
    box-sizing: border-box;
}

.detail-layout {
    grid-template-columns: minmax(0, 1.2fr) 430px;
}

.detail-layout > * {
    min-width: 0;
}

.followup-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.followup-form-grid .span-3 {
    grid-column: 1 / -1;
}

.tabs {
    background: var(--panel-subheader-bg);
}

.tab-button {
    min-height: 40px;
    padding: 0 16px;
    color: var(--text);
    font-weight: 650;
}

.tab-button.active {
    background: var(--surface);
    box-shadow: inset 0 -4px var(--accent);
}

.timeline-item {
    background: var(--subtle-bg-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
}

.login-page {
    background:
        linear-gradient(90deg, var(--login-grid) 0 1px, transparent 1px 26px),
        linear-gradient(180deg, var(--login-grid-y) 0 1px, transparent 1px 26px),
        var(--nav);
}

.login-box {
    border-color: var(--nav-hover);
    box-shadow: 14px 14px 0 var(--floating-shadow);
}

.login-head {
    background: var(--panel-header-bg);
    color: var(--nav-text);
}

.login-head .muted {
    color: var(--nav-text);
}

@media (max-width: 1200px) {
    .form-grid { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
    .assignment-grid { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
}

@media (max-width: 1050px) {
    .detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .assignment-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
    .permission-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

@media (max-width: 720px) {
    .followup-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .assignment-dialog-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .assignment-dialog-grid .span-2 {
        grid-column: auto;
    }
    .assignment-grid { grid-template-columns: minmax(0, 1fr); }
    .assignment-grid .span-2 { grid-column: auto; }
    .permission-grid { grid-template-columns: minmax(0, 1fr); }
}

/* CRM 2026 rebuild: fixed low-fatigue gray-blue admin theme. */
:root {
    --bg: #eef3f7;
    --surface: #fbfdff;
    --surface-2: #f2f6fa;
    --border: #c7d3dd;
    --border-dark: #8fa3b3;
    --text: #24313b;
    --muted: #687988;
    --nav: #d8e5ef;
    --nav-brand: #c8d9e6;
    --nav-border: #adbfcd;
    --nav-brand-border: #adbfcd;
    --nav-text: #23313c;
    --nav-muted: #647786;
    --nav-hover: #c8d9e6;
    --nav-active-border: #527a99;
    --accent: #4f7896;
    --accent-dark: #395d75;
    --on-accent: #ffffff;
    --panel-header-bg: #dbe8f2;
    --panel-header-border: #b8cad8;
    --body-gradient-start: #e7eef4;
    --button-hover: #e8f0f6;
    --panel-shadow: rgba(124, 146, 164, .24);
    --input-bg: #ffffff;
    --table-head-bg: #d4e2ee;
    --table-head-text: #21313f;
    --table-even-bg: #f7fafc;
    --table-hover-bg: #e8f2f8;
    --table-hover-outline: #a7bfd1;
    --subtle-bg: #eef5fa;
    --subtle-bg-2: #f8fbfd;
    --status-bg: #edf3f7;
    --status-ok-bg: #e4f1ea;
    --status-warn-bg: #f5eedc;
    --status-off-bg: #f6e7e7;
    --panel-subheader-bg: #eef5fa;
    --danger: #9a4b4b;
    --success: #3f7357;
    --warning: #80622b;
    --danger-border: #c88c8c;
    --topbar-shadow: rgba(58, 86, 108, .08);
}

body {
    background: linear-gradient(180deg, var(--body-gradient-start), var(--bg) 220px);
}

.sidebar {
    color: var(--nav-text);
}

.brand {
    color: var(--text);
}

.nav-link {
    color: var(--nav-text);
}

.nav-link.active {
    background: #edf5fb;
    color: #153246;
}

.panel {
    border-radius: 2px;
    box-shadow: 0 1px 2px var(--panel-shadow);
}

.panel-header {
    color: var(--text);
}

.panel-header .muted,
.panel-header .small {
    color: var(--muted);
}

button,
.button,
.button-small {
    border-radius: 2px;
}

input,
select,
textarea {
    border-radius: 1px;
}

.form-grid {
    gap: 8px 10px;
}

.large-textarea {
    min-height: 150px;
}

.compact-text {
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-side-panel {
    min-width: 0;
    overflow-x: hidden;
}

.followup-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
}

.followup-form-grid .span-3 {
    grid-column: 1 / -1;
}

.follow-result-options {
    gap: 4px 6px;
    align-items: center;
}

.follow-result-options label {
    min-height: 24px;
    padding: 2px 7px;
    line-height: 18px;
}

.tag-list {
    gap: 3px;
    align-items: flex-start;
}

.tag-list .status {
    min-height: 18px;
    line-height: 16px;
    padding: 1px 6px;
}

.employee-dialog,
.assignment-dialog {
    width: min(980px, calc(100vw - 36px));
    max-height: calc(100vh - 40px);
}

.assignment-dialog-body,
.dialog-body {
    overflow: auto;
}

.assignment-bulkbar {
    flex-wrap: wrap;
}

.assignment-bulkbar .toolbar {
    flex-wrap: wrap;
}

.assignment-bulkbar select {
    min-width: 220px;
}

.assignment-customer-table select {
    min-width: 210px;
}

.customer-form-grid {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
}

@media (max-width: 1050px) {
    .detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .customer-form-grid,
    .followup-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Legacy CRM skin: match the reference screenshot. */
body {
    margin: 0;
    font-size: 12px;
    color: #222;
    background: #ffffff;
}

.app-shell {
    display: grid;
    grid-template-columns: 156px minmax(0, 1fr);
    min-height: 100vh;
    background: #ffffff;
}

.sidebar {
    background: #f7f8fa;
    border-right: 1px solid #96b4cf;
    box-shadow: inset -1px 0 0 #dbe6ef;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px 8px;
    border-bottom: 1px solid #c9d8e4;
    background: #fff;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #7d1443 0%, #6a0e3a 100%);
    color: #efc45a;
    border: 1px solid #f2d48a;
    font-size: 18px;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.brand-text {
    display: grid;
    gap: 2px;
}

.brand-text strong {
    font-size: 14px;
    line-height: 1;
}

.brand-text span {
    font-size: 11px;
    color: #5c6a75;
}

.brand-logo {
    display: block;
    width: 128px;
    max-width: 100%;
    height: 54px;
    object-fit: contain;
    object-position: left center;
}

.sidebar nav {
    padding: 6px 0;
}

.nav-section {
    position: relative;
    margin: 6px 8px 2px;
    padding: 4px 0 4px 14px;
    color: #1f2d3a;
    font-size: 12px;
    font-weight: 700;
}

.nav-section::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 7px;
    height: 7px;
    border: 1px solid #98a8b5;
    background: #fff;
    box-sizing: border-box;
}

.nav-link {
    display: block;
    margin: 0 6px 6px 10px;
    padding: 5px 8px 5px 12px;
    border: 1px solid #d7e1e8;
    border-left: 3px solid #c5d5e2;
    background: #fff;
    color: #203041;
    text-decoration: none;
    line-height: 1.2;
}

.nav-link.active {
    background: linear-gradient(180deg, #07599a 0%, #004b86 100%);
    color: #fff;
    border-color: #00477d;
    border-left-color: #00477d;
}

.main {
    min-width: 0;
    background: #ffffff;
}

.topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-height: 56px;
    padding: 8px 10px 6px;
    background: #ffffff;
    border-bottom: 4px solid #00518f;
    box-shadow: inset 0 -1px 0 #d5dce3;
}

.topbar-left {
    display: grid;
    gap: 4px;
}

.topbar-userline {
    font-size: 14px;
    font-weight: 700;
    color: #232323;
}

.topbar-subline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #333;
}

.topbar-subline a,
.link-button {
    color: #333;
    background: transparent;
    border: 0;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 1px;
}

.topbar-link,
.topbar-logout,
.language-select {
    height: 24px;
    padding: 0 8px;
    border: 1px solid #9d9d9d;
    background: linear-gradient(180deg, #ffffff 0%, #ececec 100%);
    color: #202020;
    font-size: 12px;
}

.topbar-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.content {
    padding: 6px 6px 8px;
    background: #fff;
}

.summary-strip {
    display: none;
}

.panel {
    margin-bottom: 6px;
    border: 1px solid #93b3cd;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.panel-header,
.panel-subheader {
    background: linear-gradient(180deg, #f8fdff 0%, #dceff1 100%);
    border-bottom: 1px solid #a7c1cf;
    color: #1e2f39;
}

.panel-header {
    min-height: 26px;
    padding: 4px 8px;
    align-items: center;
}

.panel-header h2,
.panel-header h3 {
    font-size: 13px;
    font-weight: 700;
    margin: 0;
}

.panel-body {
    padding: 6px 6px 4px;
    background: #e8f4f5;
}

.panel-subheader {
    padding: 4px 8px;
}

.toolbar {
    gap: 6px;
}

button,
.button,
.button-small,
.button-primary {
    min-height: 24px;
    padding: 0 10px;
    border: 1px solid #b4a27f;
    border-radius: 0;
    background: linear-gradient(180deg, #f8f1dd 0%, #e6d7b2 100%);
    color: #333;
    box-shadow: none;
}

.button-primary,
.button-danger {
    background: linear-gradient(180deg, #f8f1dd 0%, #e6d7b2 100%);
    color: #333;
}

button:hover,
.button:hover,
.button-small:hover,
.button-primary:hover {
    background: linear-gradient(180deg, #fff5e0 0%, #eadab6 100%);
}

input,
select,
textarea {
    min-height: 22px;
    padding: 2px 5px;
    border: 1px solid #aeb9c1;
    border-radius: 0;
    background: #fff;
    color: #222;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.03);
}

textarea {
    min-height: 60px;
}

.form-grid {
    gap: 5px 8px;
}

.field {
    gap: 2px;
}

.field label {
    margin-bottom: 0;
    color: #1f2e38;
    font-size: 12px;
    font-weight: 400;
}

.table-wrap {
    border-top: 1px solid #94b0c4;
    background: #fff;
}

table {
    font-size: 12px;
}

th,
td {
    padding: 4px 6px;
    border-color: #d6dde4;
}

th {
    background: #eef5f7;
    color: #56626b;
    font-weight: 400;
}

tbody tr:nth-child(even) {
    background: #fff;
}

tbody tr:hover {
    background: #fff;
    outline: none;
    outline-offset: -1px;
}

.status {
    border: 0;
    background: transparent;
    color: #333;
}

.status.ok {
    background: #44d86f;
    color: #072d12;
}

.status.warn {
    background: #f0d66a;
    color: #3b2f02;
}

.status.off {
    background: #e87f7f;
    color: #3b0707;
}

td .status:not(.ok):not(.warn):not(.off) {
    background: transparent;
    color: #222;
}

.tag-list .status {
    border: 1px solid rgba(0,0,0,.15);
    font-weight: 700;
}

.tabs {
    background: linear-gradient(180deg, #07599a 0%, #004b86 100%);
    color: #fff;
}

.tab-button {
    min-height: 28px;
    padding: 0 14px;
    color: #fff;
}

.tab-button.active {
    background: #ffffff;
    color: #004b86;
    box-shadow: none;
}

.timeline-item {
    background: #fff;
    border: 1px solid #d2dbe2;
    border-left: 4px solid #004b86;
}

.detail-layout {
    grid-template-columns: minmax(0, 1.35fr) 430px;
    gap: 6px;
}

.detail-side-panel {
    min-width: 0;
}

.followup-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
}

.followup-form-grid .span-3 {
    grid-column: 1 / -1;
}

.follow-result-options {
    gap: 4px 8px;
}

.follow-result-options label {
    min-height: 20px;
    padding: 0;
    background: transparent;
}

.employee-dialog,
.assignment-dialog {
    border: 1px solid #93b3cd;
    border-radius: 0;
    background: #fff;
}

.dialog-head {
    background: linear-gradient(180deg, #07599a 0%, #004b86 100%);
    color: #fff;
}

.dialog-body {
    background: #e8f4f5;
}

.permission-grid {
    gap: 8px;
}

.assignment-grid,
.customer-form-grid {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.assignment-customer-table select {
    min-width: 180px;
}

.login-page {
    background: #ffffff;
}

.login-box {
    border: 1px solid #93b3cd;
    box-shadow: none;
}

@media (max-width: 1050px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        border-right: 0;
        border-bottom: 1px solid #96b4cf;
    }

    .detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .topbar {
        flex-direction: column;
    }

    .topbar-right {
        flex-wrap: wrap;
    }
}

.background-cell,
.followup-cell {
    position: relative;
    min-width: 260px;
    max-width: 420px;
    width: 28vw;
    white-space: normal;
    line-height: 18px;
    padding-right: 42px;
    overflow: hidden;
}

.followup-cell {
    min-width: 250px;
    max-width: 360px;
    width: 24vw;
    padding-top: 4px;
}

.cell-fill-ellipsis,
.followup-preview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.followup-latest {
    display: block;
    max-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.followup-latest strong,
.followup-latest span {
    display: inline;
}

.followup-preview {
    margin-top: 0;
    -webkit-line-clamp: 1;
    max-height: 18px;
}

.more-record-list {
    display: grid;
    gap: 8px;
}

.more-record-item {
    padding-bottom: 8px;
    border-bottom: 1px solid #d6dde4;
}

.more-record-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.more-record-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 3px;
    color: #1f2e38;
}

.more-record-content {
    white-space: pre-wrap;
}

.table-wrap table tbody tr,
.table-wrap table tbody tr:nth-child(odd),
.table-wrap table tbody tr:nth-child(even),
.table-wrap table tbody tr:hover,
.table-wrap table tbody td {
    background: #fff !important;
    color: #222;
}

.table-wrap table tbody tr:hover {
    outline: none !important;
}

.background-cell,
.followup-cell {
    position: relative;
    overflow: visible !important;
    z-index: 1;
}

.table-wrap table tbody tr:has(.cell-more-dropdown[open]) {
    position: relative;
    z-index: 30;
}

/* Compact, business-readable audit log. */
.audit-filter-form {
    padding-top: 10px;
    padding-bottom: 10px;
}

.audit-table {
    min-width: 1080px;
    table-layout: auto;
}

.audit-table th,
.audit-table td {
    padding: 6px 9px;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    vertical-align: middle;
}

.audit-time {
    width: 142px;
    color: #536273;
    font-variant-numeric: tabular-nums;
}

.audit-user {
    width: 170px;
}

.audit-user span {
    color: #6c7886;
}

.audit-summary {
    width: 100%;
}

.audit-summary strong {
    color: #234c75;
}

.audit-summary span {
    color: #3e4a57;
}

.audit-ip {
    width: 128px;
    color: #536273;
    font-family: Consolas, "Courier New", monospace;
}

.audit-category {
    display: inline-block;
    min-width: 74px;
    padding: 3px 7px;
    border: 1px solid #aebdca;
    border-radius: 2px;
    background: #edf2f6;
    color: #3e566c;
    text-align: center;
    font-size: 11px;
}

.audit-category-auth { background: #e3f1e9; border-color: #9fc8af; color: #28613f; }
.audit-category-customer { background: #e5eef8; border-color: #a6bdd6; color: #28577f; }
.audit-category-followup { background: #eef0dc; border-color: #bec59a; color: #596322; }
.audit-category-assignment { background: #eee8f5; border-color: #c1afd2; color: #654681; }
.audit-category-user { background: #e7f0f2; border-color: #a5c2c8; color: #35616a; }
.audit-category-department { background: #f1ece3; border-color: #c9b99f; color: #6f5732; }
.audit-category-dictionary { background: #f3ebdf; border-color: #d1b998; color: #78562e; }
.audit-category-security { background: #f7e4e2; border-color: #d6aaa5; color: #873e37; }
.audit-category-system { background: #eceff2; border-color: #b7c0c8; color: #505e6a; }

.background-cell {
    min-width: 300px;
    max-width: 460px;
    width: 32vw;
    padding-right: 6px;
}

.followup-cell {
    min-width: 270px;
    max-width: 380px;
    width: 25vw;
    padding: 4px 6px;
}

.cell-fill-ellipsis,
.followup-preview {
    padding-right: 36px;
    line-height: 18px;
}

.cell-more-dropdown {
    position: absolute;
    top: 4px;
    right: 6px;
    z-index: 6;
}

.cell-more-dropdown[open] {
    z-index: 60;
}

.cell-more-dropdown summary {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0;
    border: 0;
    background: #fff;
    color: #004b86;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    list-style: none;
}

.cell-more-dropdown summary::-webkit-details-marker {
    display: none;
}

.cell-more-dropdown summary:hover {
    color: #00335f;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cell-more-menu {
    position: absolute;
    top: 22px;
    right: 0;
    width: min(460px, calc(100vw - 32px));
    max-height: 260px;
    overflow: auto;
    padding: 8px 10px;
    border: 1px solid #93b3cd;
    background: #fff;
    box-shadow: 0 6px 16px rgba(30, 55, 75, .18);
    color: #222;
    line-height: 1.55;
    white-space: normal;
}

.cell-more-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.cell-more-menu .more-record-list {
    gap: 6px;
}

.cell-more-menu .more-record-item {
    padding-bottom: 6px;
}

.cell-more-menu .more-record-meta {
    gap: 4px 10px;
    margin-bottom: 2px;
}

.product-multi-field {
    min-width: 0;
}

.multi-select {
    position: relative;
    min-width: 0;
}

.multi-select-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    width: 100%;
    padding: 4px 7px;
    border: 1px solid var(--border-dark);
    background: var(--input-bg);
    color: var(--text);
    font-size: 13px;
    line-height: 20px;
    cursor: pointer;
    list-style: none;
}

.multi-select-summary::-webkit-details-marker {
    display: none;
}

.multi-select-summary:hover,
.multi-select[open] .multi-select-summary {
    border-color: var(--accent);
}

.multi-select-chevron {
    color: var(--muted);
    font-size: 16px;
    line-height: 16px;
    transition: transform .15s ease;
}

.multi-select[open] .multi-select-chevron {
    transform: rotate(180deg);
}

.multi-select-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 3px);
    left: 0;
    width: 100%;
    max-height: 210px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid var(--border-dark);
    background: var(--surface);
    box-shadow: 0 8px 18px var(--floating-shadow);
}

.multi-select-option {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    margin: 0;
    padding: 4px 6px;
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
}

.multi-select-option:hover {
    background: var(--subtle-bg);
}

.multi-select-option input {
    width: auto;
    min-height: auto;
    margin: 0;
}