:root {
  --ink: #17324d;
  --muted: #718399;
  --line: #dfe8f0;
  --canvas: #edf3f7;
  --card: #ffffff;
  --nav: #10283f;
  --nav-soft: #183a55;
  --brand: #087f8c;
  --brand-2: #0aa6a6;
  --blue: #2f6fdd;
  --coral: #e9685b;
  --amber: #d89724;
  --success: #1d9b72;
  --shadow: 0 14px 36px rgba(27, 56, 82, .09);
  --soft-shadow: 0 5px 18px rgba(27, 56, 82, .07);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--ink); background: var(--canvas); font-family: Bahnschrift, "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; font-size: 13px; }
button, input, select { font: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.is-hidden { display: none !important; }

/* Global shell */
.app-shell { min-height: 100vh; padding-top: 72px; }
.global-header { position: fixed; z-index: 70; inset: 0 0 auto 0; height: 72px; display: flex; align-items: center; padding: 0 28px; color: var(--ink); background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(207,220,231,.8); box-shadow: 0 3px 18px rgba(30,58,82,.06); backdrop-filter: blur(12px); }
.brand-block { width: 144px; height: 58px; display: flex; align-items: center; }
.brand-image { display: block; width: 135px; height: 58px; object-fit: contain; object-position: left center; }
.brand-block > .brand-image:not(.brand-image-source) { display: none; }
.system-title { height: 34px; margin-left: 22px; padding-left: 22px; display: flex; align-items: center; gap: 12px; border-left: 1px solid var(--line); color: #17324d; font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.system-title span { padding: 5px 8px; color: #087f8c; background: #e9f7f7; border: 1px solid #c9eceb; border-radius: 99px; font-size: 8px; letter-spacing: .16em; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.top-actions > button { min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px; color: #64778c; background: transparent; }
.top-actions > button:hover { color: var(--ink); background: #f1f5f8; }
.system-health { display: flex; align-items: center; gap: 7px; margin-right: 8px; color: #62788b; font-size: 11px; }
.system-health i { width: 8px; height: 8px; border-radius: 50%; background: #28b483; box-shadow: 0 0 0 4px rgba(40,180,131,.12); }
.top-actions .user-chip { display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 5px; color: var(--ink); background: #f3f7fa; }
.user-chip > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--nav); font-style: normal; font-weight: 700; }
.user-chip > span { display: grid; text-align: left; font-weight: 700; line-height: 1.15; }.user-chip small { color: #8291a0; font-size: 9px; font-weight: 400; }

.sidebar { position: fixed; z-index: 55; left: 0; top: 72px; bottom: 0; width: 224px; display: flex; flex-direction: column; overflow: hidden; color: #d8e6ef; background: var(--nav); box-shadow: 10px 0 30px rgba(10,30,48,.08); transition: width .24s ease; }
.sidebar::before { content: ""; position: absolute; width: 180px; height: 180px; left: -80px; bottom: 50px; border-radius: 50%; background: rgba(14,167,169,.12); filter: blur(3px); }
.sidebar-command { height: 55px; display: flex; align-items: center; justify-content: flex-end; padding: 0 15px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar-toggle { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: #9fc0d3; background: rgba(255,255,255,.04); }
.nav-list { position: relative; padding: 14px 12px; }
.nav-item, .subnav button { width: 100%; border: 0; text-align: left; }
.nav-item { height: 44px; display: grid; grid-template-columns: 25px 1fr 18px; align-items: center; padding: 0 12px; border-radius: 10px; color: #a9c0cf; background: transparent; }
.nav-item > span { color: #6f9bb5; font-size: 15px; }.nav-item > i { color: #658ba3; font-size: 10px; font-style: normal; }
.nav-item:hover { color: white; background: rgba(255,255,255,.055); }
.nav-parent.open { color: white; background: rgba(255,255,255,.045); }
.subnav { position: relative; margin: 5px 0 9px 24px; padding: 2px 0 2px 15px; border-left: 1px solid rgba(117,181,199,.24); }
.subnav button { position: relative; height: 38px; padding: 0 12px; border-radius: 9px; color: #93aebe; background: transparent; }
.subnav button:hover { color: white; }.subnav button.active { color: white; background: rgba(19,166,165,.22); box-shadow: inset 0 0 0 1px rgba(69,209,204,.16); }
.subnav button.active::before { content: ""; position: absolute; left: -19px; top: 13px; width: 7px; height: 12px; border-radius: 9px; background: #39c7bd; box-shadow: 0 0 10px rgba(57,199,189,.6); }
.sidebar-foot { position: relative; margin-top: auto; padding: 20px; display: flex; align-items: center; gap: 8px; color: #7999ad; font-size: 10px; }.sidebar-foot b { margin-left: auto; padding: 4px 7px; color: #5ee0ce; background: rgba(23,183,171,.12); border-radius: 99px; font-size: 8px; letter-spacing: .08em; }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #38c795; }

.main-area { min-height: calc(100vh - 72px); margin-left: 224px; transition: margin-left .24s ease; }
.workspace-tabs { height: 48px; display: flex; align-items: end; gap: 4px; padding: 8px 24px 0; background: #f7fafc; border-bottom: 1px solid #dbe5ed; }
.workspace-tabs button { height: 34px; padding: 0 15px; border: 0; border-radius: 9px 9px 0 0; color: #8392a1; background: transparent; }
.workspace-tabs button:hover { color: var(--ink); background: #edf3f7; }.workspace-tabs button.active { color: var(--brand); background: white; box-shadow: 0 -3px 12px rgba(36,72,99,.05); font-weight: 700; }.workspace-tabs button span { margin-left: 8px; color: #a1afbc; }.workspace-tabs .tab-close { margin-left: auto; padding: 0 8px; }
.content-card { margin: 18px; }

/* Page identity and overview */
.page-hero { position: relative; min-height: 152px; display: flex; align-items: center; justify-content: space-between; gap: 30px; overflow: hidden; padding: 26px 30px; border-radius: 20px; color: white; background: #12334b; box-shadow: 0 18px 42px rgba(20,58,83,.17); }
.page-hero::before { content: ""; position: absolute; width: 270px; height: 270px; right: 20%; top: -190px; border: 50px solid rgba(47,190,181,.13); border-radius: 50%; }.page-hero::after { content: ""; position: absolute; width: 160px; height: 160px; left: 43%; bottom: -125px; border: 26px solid rgba(83,143,218,.14); border-radius: 50%; }
.hero-copy, .hero-stats { position: relative; z-index: 1; }
.hero-copy small { color: #6fd9d2; font-size: 9px; font-weight: 700; letter-spacing: .18em; }.hero-copy h1 { margin: 7px 0 5px; font-size: 27px; letter-spacing: .02em; }.hero-copy p { margin: 0; color: #b5cbd7; font-size: 12px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(130px,1fr)); gap: 10px; }
.hero-stats > div { min-width: 132px; padding: 16px 17px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.07); backdrop-filter: blur(8px); }
.hero-stats span { display: block; color: #b8ccd6; font-size: 10px; }.hero-stats b { display: inline-block; margin-top: 5px; font-size: 25px; line-height: 1; }.hero-stats small { margin-left: 5px; color: #80d5cf; font-size: 9px; }

.page-tabs { min-height: 62px; display: flex; align-items: center; margin-top: 14px; padding: 8px 10px; border: 1px solid rgba(215,226,235,.9); border-radius: 16px; background: rgba(255,255,255,.9); box-shadow: var(--soft-shadow); }
.page-tabs > button:not(.pass-entry) { height: 42px; min-width: 100px; padding: 0 18px; border: 0; border-radius: 11px; color: #728397; background: transparent; font-weight: 700; }
.page-tabs > button:not(.pass-entry):hover { color: var(--ink); background: #eef4f7; }.page-tabs > button.active:not(.pass-entry) { color: #fff; background: var(--nav); box-shadow: 0 7px 15px rgba(16,40,63,.18); }
.page-tab-actions { margin-left: auto; }.pass-entry { height: 40px; padding: 0 12px; border: 1px solid #d7e4ec; border-radius: 11px; color: #4c6d81; background: #f7fafc; }.pass-entry:hover { color: var(--brand); border-color: #9bd2d0; background: #ecf8f7; }.pass-entry b { margin-left: 6px; padding: 3px 6px; border-radius: 99px; color: #718497; background: white; font-size: 9px; }

/* Filters and controls */
.filter-panel { margin-top: 14px; padding: 18px 20px; border: 1px solid rgba(214,225,234,.9); border-radius: 16px; background: white; box-shadow: var(--soft-shadow); }
.filter-grid { display: grid; grid-template-columns: 1.1fr 1.2fr 1.2fr auto; gap: 14px; align-items: end; }.filter-grid label, .query-filter-grid label { display: grid; gap: 7px; color: #667b8f; font-size: 10px; font-weight: 700; }.filter-grid label > span, .query-filter-grid label > span { text-align: left; }
input, select { outline: none; }
.filter-grid input, .filter-grid select, .query-filter-grid input, .query-filter-grid select, .export-body input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #d9e4ec; border-radius: 10px; color: var(--ink); background: #f9fbfc; }
.filter-grid input:focus, .filter-grid select:focus, .query-filter-grid input:focus, .query-filter-grid select:focus, .export-body input:focus { border-color: #52b7b2; background: white; box-shadow: 0 0 0 3px rgba(10,166,166,.1); }
.keyword-field { align-self: end; }.filter-actions { display: flex; gap: 8px; }
.btn { height: 38px; padding: 0 15px; border: 1px solid #d8e3ea; border-radius: 10px; color: #526b7d; background: white; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }.btn:hover:not(:disabled) { color: var(--ink); border-color: #bfd0dc; background: #f7fafc; transform: translateY(-1px); box-shadow: 0 5px 12px rgba(30,62,87,.08); }.btn:disabled { opacity: .42; cursor: not-allowed; }.btn.primary { color: white; border-color: var(--brand); background: var(--brand); }.btn.primary:hover:not(:disabled) { color: white; border-color: #076e79; background: #076e79; }.btn.soft { color: var(--brand); border-color: #a8d9d6; background: #eef9f8; }.btn.strong { color: white; border-color: var(--nav); background: var(--nav); }.btn.warning { color: #a56a0c; border-color: #edd099; background: #fff8e9; }.btn.success { color: #137b5b; border-color: #a5dac8; background: #edfaf5; }.btn.danger { color: #c34c43; border-color: #efc0bb; background: #fff2f0; }
.text-btn, .link-btn { border: 0; color: var(--brand); background: transparent; }.toolbar-divider { width: 1px; height: 25px; margin: 0 2px; background: var(--line); }

/* Batch and work table */
.batch-section { margin-top: 14px; overflow: hidden; border: 1px solid #d8e5ec; border-radius: 14px; background: white; box-shadow: var(--soft-shadow); }.batch-toggle { width: 100%; height: 52px; display: flex; align-items: center; padding: 0 17px; border: 0; color: var(--ink); background: white; }.batch-toggle:hover { background: #f8fbfc; }.chevron { width: 26px; color: var(--brand); transform: rotate(180deg); transition: transform .2s; }.batch-title { font-weight: 800; }.batch-summary { margin-left: 12px; color: #8595a4; font-size: 11px; }.batch-summary b { color: var(--ink); }.batch-summary em { margin-left: 5px; padding: 3px 7px; border-radius: 99px; color: #237bb0; background: #eaf5fb; font-style: normal; }.batch-hint { margin-left: auto; color: #8999a6; font-size: 10px; }.batch-table-wrap { max-height: 220px; overflow: auto; transition: max-height .25s ease; }.batch-section.collapsed .batch-table-wrap { max-height: 0; }.batch-section.collapsed .chevron { transform: rotate(0); }
.task-section { margin-top: 14px; padding: 0 14px 10px; border: 1px solid #d8e5ec; border-radius: 16px; background: white; box-shadow: var(--shadow); }.task-toolbar { min-height: 64px; display: flex; align-items: center; gap: 14px; }.toolbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }.quick-action { min-width: 106px; color: #337b94; border-color: #b8d8e3; background: #f4fafb; font-weight: 700; }.quick-action.active { color: white; border-color: var(--blue); background: var(--blue); box-shadow: 0 7px 15px rgba(47,111,221,.18); }.toolbar-sort-hint { padding: 7px 9px; border-radius: 8px; color: #506c82; background: #eff4f8; font-size: 9px; }.selection-info { margin-left: auto; display: flex; align-items: center; gap: 10px; color: #8494a2; font-size: 10px; }.selection-info b { padding: 6px 9px; border-radius: 99px; color: #50697d; background: #eef3f6; font-weight: 700; }
.table-shell { position: relative; min-height: 310px; overflow: auto; border: 1px solid #e0e8ee; border-radius: 12px; background: white; }.data-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 11px; }.data-table th { position: sticky; z-index: 2; top: 0; height: 42px; padding: 0 10px; color: #6f8292; background: #f3f7f9; border-bottom: 1px solid #dce6ed; text-align: left; font-size: 9px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }.data-table th:first-child { border-radius: 10px 0 0 0; }.data-table th:last-child { border-radius: 0 10px 0 0; }.data-table td { height: 45px; padding: 0 10px; color: #415c70; border-bottom: 1px solid #edf1f4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.data-table tbody tr { transition: background .15s ease, box-shadow .15s ease; }.data-table tbody tr:hover { background: #f4faf9; }.data-table tbody tr.selected { background: #e9f6f5; box-shadow: inset 3px 0 var(--brand-2); }.data-table a { color: var(--blue); font-weight: 700; }.data-table input[type=checkbox], .assignment-table input[type=checkbox] { accent-color: var(--brand); }.task-table { min-width: 1540px; }.query-table { min-width: 1500px; }.check-cell { width: 42px; text-align: center !important; }
.status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 99px; font-size: 9px; font-weight: 800; }.status.pending { color: #9b6a12; background: #fff5da; }.status.reviewing { color: #087f8c; background: #e5f6f5; }.status.other { color: #4f6e91; background: #eaf1f8; }.status.suspended { color: #ac6c0b; background: #fff1d6; }.status.terminated { color: #bd4e46; background: #ffebe9; }.status.complete { color: #1b855f; background: #e6f6ef; }
.people-cell { display: flex; gap: 3px; }.people-cell span { padding: 3px 5px; border-radius: 5px; color: #3b6a7c; background: #edf5f7; font-size: 9px; }.empty-state { min-height: 280px; display: grid; place-content: center; justify-items: center; gap: 7px; color: #8b9aa7; }.empty-state > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--brand); background: #e9f6f5; font-size: 22px; }.empty-state b { color: #536c7e; }.empty-state small { font-size: 10px; }
.pagination { min-height: 48px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: #8393a0; font-size: 10px; }.pagination button, .pagination select { height: 30px; min-width: 30px; border: 1px solid #d9e4eb; border-radius: 8px; color: #65798b; background: white; }.pagination button.active { color: white; border-color: var(--brand); background: var(--brand); }

/* Query */
.query-filter-panel { margin-top: 14px; }.query-filter-grid { display: grid; grid-template-columns: repeat(4,minmax(160px,1fr)); gap: 14px; }.query-more { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #d9e5ec; }.query-filter-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; }.query-filter-actions > div { display: flex; gap: 8px; }.query-section { margin-top: 14px; }.query-toolbar { padding: 0; }.query-table th:nth-child(2) { width: 130px; }.query-table th:nth-child(10) { width: 190px; }.query-table th:nth-child(11) { width: 170px; }.query-table th:nth-child(12) { width: 150px; }.query-table th:last-child { width: 100px; }.icon-btn { width: 28px; height: 28px; border: 1px solid #d6e2e9; border-radius: 8px; color: var(--blue); background: #f7fafc; }.row-rollback { font-size: 10px; }.row-rollback:disabled { color: #b8c1c8; }

/* Overlays and configuration */
.mask { position: fixed; z-index: 90; inset: 0; background: rgba(10,27,43,.46); backdrop-filter: blur(3px); }.config-drawer { position: fixed; z-index: 100; top: 0; right: -440px; width: 420px; height: 100vh; display: flex; flex-direction: column; color: var(--ink); background: #f7fafc; box-shadow: -24px 0 60px rgba(9,29,46,.24); transition: right .25s ease; }.config-drawer.open { right: 0; }.config-drawer header { min-height: 100px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: white; background: var(--nav); }.config-drawer header small, .modal-header small { display: block; margin-bottom: 5px; color: #69d7cf; font-size: 8px; letter-spacing: .15em; }.config-drawer h2, .modal h2 { margin: 0; font-size: 19px; }.config-drawer header button, .modal-header > button { width: 34px; height: 34px; border: 0; border-radius: 10px; color: inherit; background: rgba(255,255,255,.08); font-size: 20px; }.drawer-body { flex: 1; padding: 22px; }.config-note { display: flex; gap: 11px; padding: 14px; border: 1px solid #cde7e5; border-radius: 12px; background: #edf9f8; }.config-note > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: white; background: var(--brand); }.config-note p { margin: 0; color: #62808b; line-height: 1.6; font-size: 11px; }.config-note b { display: block; color: var(--ink); }.switch-card { min-height: 82px; margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid #dce7ed; border-radius: 14px; background: white; cursor: pointer; }.switch-copy { flex: 1; }.switch-copy b, .switch-copy small { display: block; }.switch-copy small { margin-top: 5px; color: #82929f; font-size: 10px; line-height: 1.5; }.switch-card input { display: none; }.switch-card > i { position: relative; width: 42px; height: 23px; border-radius: 99px; background: #ccd7de; transition: .2s; }.switch-card > i::after { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.18); transition: .2s; }.switch-card input:checked + i { background: var(--brand-2); }.switch-card input:checked + i::after { transform: translateX(19px); }.config-preview { margin-top: 24px; }.config-preview > span { color: #738695; font-size: 10px; font-weight: 800; }.config-preview > div { min-height: 78px; margin-top: 8px; display: flex; align-items: center; gap: 7px; padding: 13px; border: 1px dashed #cbdbe4; border-radius: 12px; background: white; }.config-preview em { color: #9ba8b2; font-size: 10px; font-style: normal; }.preview-pill { padding: 7px 10px; border-radius: 8px; color: var(--brand); background: #e8f7f6; font-size: 10px; }.config-drawer footer { min-height: 74px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 0 22px; border-top: 1px solid #dce6ec; background: white; }

/* Modals */
.modal-mask { z-index: 110; }.modal { position: fixed; z-index: 120; overflow: hidden; border: 1px solid rgba(255,255,255,.65); border-radius: 18px; background: white; box-shadow: 0 30px 90px rgba(7,27,43,.35); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }.modal.open { opacity: 1; pointer-events: auto; }.modal-header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 23px; color: white; background: var(--nav); }.detail-modal, .confirm-modal, .export-modal { left: 50%; top: 50%; transform: translate(-50%,-47%) scale(.98); }.detail-modal.open, .confirm-modal.open, .export-modal.open { transform: translate(-50%,-50%) scale(1); }.detail-modal { width: min(760px,calc(100vw - 40px)); }.confirm-modal { width: min(520px,calc(100vw - 40px)); }.export-modal { width: min(560px,calc(100vw - 40px)); }.detail-body { display: grid; grid-template-columns: repeat(2,1fr); max-height: 58vh; overflow: auto; padding: 14px 22px 24px; }.detail-body > div { padding: 14px; border-bottom: 1px solid #e9eff3; }.detail-body span, .detail-body b { display: block; }.detail-body span { color: #8997a4; font-size: 9px; }.detail-body b { margin-top: 5px; font-weight: 600; }.confirm-body { display: flex; gap: 16px; padding: 27px; }.confirm-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: #ba5e12; background: #fff0dd; font-size: 20px; font-weight: 800; }.confirm-body p { margin: 2px 0 8px; line-height: 1.7; }.confirm-body small { color: #8594a1; line-height: 1.5; }.export-body { padding: 26px; }.export-body label { display: grid; gap: 8px; color: #64798b; font-size: 10px; font-weight: 700; }.export-body p { margin: 11px 0 0; color: #8b99a5; font-size: 10px; }.modal-footer { min-height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-top: 1px solid #e0e9ef; background: #fafcfd; }.modal-footer > div { display: flex; gap: 8px; }

/* Assignment workbench */
.batch-assign-modal { width: calc(100vw - 40px); height: calc(100vh - 40px); left: 20px; top: 20px; display: flex; flex-direction: column; border-radius: 20px; transform: translateY(8px) scale(.995); }.batch-assign-modal.open { transform: none; }.batch-assign-header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: white; background: var(--nav); }.batch-assign-header h2 { font-size: 18px; }.batch-assign-header h2::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 3px; background: #38c9bc; box-shadow: 0 0 0 5px rgba(56,201,188,.11); }.batch-assign-header button { width: 35px; height: 35px; border: 0; border-radius: 10px; color: #bed0dc; background: rgba(255,255,255,.07); font-size: 20px; }.batch-assign-meta { min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid #e0e9ef; background: #f8fbfc; }.batch-assign-meta span { font-weight: 800; }.batch-assign-meta small { color: #8b9aa6; }.batch-assign-meta em { margin-left: auto; padding: 6px 9px; border-radius: 8px; color: #8a651a; background: #fff3d5; font-size: 9px; font-style: normal; }.assignment-table-shell { flex: 1; min-height: 0; margin: 12px 12px 0; overflow: auto; border: 1px solid #dce6ec; border-radius: 12px; }.assignment-table { width: max(100%,1900px); border-collapse: separate; border-spacing: 0; table-layout: fixed; color: #466075; font-size: 11px; }.assignment-table th, .assignment-table td { height: 43px; padding: 0 9px; border-right: 1px solid #e7edf1; border-bottom: 1px solid #e7edf1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.assignment-table .bulk-row th { position: sticky; z-index: 5; top: 0; height: 80px; vertical-align: bottom; padding-bottom: 9px; color: #64798a; background: #f8fbfc; font-weight: 600; }.assignment-table .assignment-head th { position: sticky; z-index: 4; top: 80px; height: 39px; color: #dcebf2; background: #1b3d57; font-size: 9px; letter-spacing: .03em; }.assignment-head i { color: #68d9d0; font-style: normal; }.assign-col-id { width: 90px; }.assign-col-name { width: 105px; }.assign-col-sample { width: 145px; }.assign-col-test { width: 230px; }.assign-col-date { width: 120px; }.assign-col-node { width: 215px; }.bulk-person-slot { display: block; margin-top: 7px; }.person-picker { position: relative; width: 100%; text-align: left; font-weight: 400; }.person-picker.open { z-index: 20; }.person-picker-toggle { width: 100%; height: 33px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 0 9px; border: 1px solid #d6e2e9; border-radius: 8px; color: #526b7d; background: white; font-size: 10px; }.person-picker-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.person-picker-toggle i { color: #8493a0; font-style: normal; }.person-picker.open .person-picker-toggle { border-color: #45b5ae; box-shadow: 0 0 0 3px rgba(10,166,166,.1); }.person-picker-menu { position: absolute; z-index: 8; top: calc(100% + 4px); left: 0; width: 100%; min-width: 205px; max-height: 220px; overflow-y: auto; display: none; padding: 5px; border: 1px solid #d0dde5; border-radius: 10px; background: white; box-shadow: 0 15px 30px rgba(22,52,75,.18); }.person-picker.open .person-picker-menu { display: block; animation: reveal .15s ease; }.person-picker-menu label { height: 34px; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 3px; padding: 0 8px; border-radius: 7px; color: #456075; cursor: pointer; }.person-picker-menu label:hover { background: #edf8f7; }.person-picker-menu input { margin: 0; }.person-picker-menu small { color: #96a4af; font-size: 8px; }.assignment-table td:has(.person-picker), .assignment-table .bulk-row th:has(.person-picker) { overflow: visible; }.assignment-validation { margin: 9px auto 0; padding: 9px 13px; display: flex; align-items: center; gap: 8px; border: 1px solid #efc2bc; border-radius: 10px; color: #a44e47; background: #fff1ef; }.assignment-validation > span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; color: white; background: var(--coral); font-weight: 800; }.assignment-validation small { color: #a97974; }.batch-assign-footer { min-height: 68px; display: flex; align-items: center; justify-content: center; gap: 9px; border-top: 1px solid #e0e9ef; background: #fafcfd; }

.toast { position: fixed; z-index: 200; right: 24px; bottom: 24px; min-width: 300px; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #cce7df; border-left: 4px solid var(--success); border-radius: 13px; background: white; box-shadow: 0 18px 45px rgba(17,48,70,.2); transform: translateY(30px); opacity: 0; pointer-events: none; transition: .22s ease; }.toast.show { transform: none; opacity: 1; }.toast > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--success); }.toast b, .toast small { display: block; }.toast small { margin-top: 3px; color: #81909c; font-size: 10px; }

.sidebar-collapsed .sidebar { width: 72px; }.sidebar-collapsed .main-area { margin-left: 72px; }.sidebar-collapsed .nav-item { grid-template-columns: 1fr; justify-items: center; font-size: 0; }.sidebar-collapsed .nav-item > span { font-size: 16px; }.sidebar-collapsed .nav-item i, .sidebar-collapsed .subnav, .sidebar-collapsed .sidebar-foot { display: none; }.sidebar-collapsed .sidebar-command { justify-content: center; padding: 0; }

@keyframes reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (max-width: 1250px) { .hero-stats > div { min-width: 105px; }.filter-grid { grid-template-columns: 1fr 1fr; }.filter-actions { justify-content: flex-end; }.query-filter-grid { grid-template-columns: repeat(2,minmax(170px,1fr)); } }
@media (max-width: 900px) { .sidebar { width: 72px; }.main-area { margin-left: 72px; }.nav-item { grid-template-columns: 1fr; justify-items: center; font-size: 0; }.nav-item > span { font-size: 16px; }.nav-item i, .subnav, .sidebar-foot { display: none; }.system-title span, .system-health { display: none; }.page-hero { align-items: flex-start; flex-direction: column; }.hero-stats { width: 100%; }.batch-assign-modal { width: calc(100vw - 16px); height: calc(100vh - 16px); left: 8px; top: 8px; }.detail-body { grid-template-columns: 1fr; } }