/* ============================================================
   UCE Toolkit v0.5.0 — United Chemical & Environment palette
   Primary blue: #0086C9 | Brand green: #00A85A
   Keep this file readable; group rules by component and purpose.
   ============================================================ */
:root {
  --brand-blue: #0086C9;
  --brand-blue-dark: #006DA8;
  --brand-green: #00A85A;
  --brand-green-dark: #00864A;
  --navy: #10243F;
  --line: #E2E9F3;
  --muted: #718096;
  --surface: #FFFFFF;
  --page-bg: #F3F6FB;
}

:root {
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#0086C9;
  background:#f3f6fb;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  --blue:#0086C9;
  --navy:#10243f;
  --line:#e2e9f3;
  --muted:#718096;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
.app-shell {
  min-height:100vh;
  display:flex;
}
.sidebar {
  width:226px;
  flex:0 0 226px;
  background:linear-gradient(180deg,#10243f,#142a47);
  color:#dce6f4;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  padding:18px 12px;
  transition:width .18s,flex-basis .18s;
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 5px 22px;
  border-bottom:1px solid #ffffff18;
}
.brand-mark {
  height:36px;
  width:36px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#0086C9;
  color:#fff;
  font-weight:850;
  font-size:20px;
  box-shadow:0 5px 15px #0002;
  flex:0 0 36px;
}
.brand-copy {
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1;
}
.brand-copy strong {
  font-size:14px;
  color:#fff;
}
.brand-copy small {
  font-size:10px;
  color:#a8bad2;
  margin-top:2px;
}
.icon-button {
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  border-radius:8px;
  padding:7px;
}
.icon-button:hover {
  background:#ffffff14;
}
.sidebar-toggle {
  font-size:17px;
}
.side-nav {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding-top:18px;
}
.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:42px;
  border:0;
  border-radius:9px;
  padding:10px 12px;
  background:transparent;
  color:#c5d2e3;
  text-align:left;
  font:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}
.nav-item:hover {
  background:#ffffff10;
  color:#fff;
}
.nav-item.active {
  background:#0086C9;
  color:#fff;
  box-shadow:0 6px 14px #0002;
}
.nav-icon {
  width:18px;
  flex:0 0 18px;
  text-align:center;
  font-size:18px;
  font-weight:800;
}
.sidebar-bottom {
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:22px;
}
.data-status {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  color:#9eb2cd;
  font-size:11px;
}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#00A85A;
  flex:0 0 7px;
}
.logout-link {
  color:#9fb1c9;
}
.app-shell.sidebar-collapsed .sidebar {
  width:68px;
  flex-basis:68px;
  padding:18px 8px;
}
.app-shell.sidebar-collapsed .brand {
  padding-left:6px;
  padding-right:0;
}
.app-shell.sidebar-collapsed .brand-copy,.app-shell.sidebar-collapsed .nav-label {
  display:none;
}
.app-shell.sidebar-collapsed .sidebar-toggle {
  display:none;
}
.app-shell.sidebar-collapsed .nav-item {
  justify-content:center;
  padding:10px 8px;
}
.app-shell.sidebar-collapsed .data-status {
  justify-content:center;
  padding:12px 8px;
}
.main-area {
  flex:1;
  min-width:0;
  max-width:calc(100% - 226px);
  padding:25px 30px 14px;
}
.app-shell.sidebar-collapsed .main-area {
  max-width:calc(100% - 68px);
}
.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:25px;
}
.eyebrow {
  font-size:10px;
  letter-spacing:1.4px;
  font-weight:800;
  color:#6580ad;
  margin:0 0 6px;
}
.topbar h1 {
  font-size:25px;
  letter-spacing:-.7px;
  margin:0;
  font-weight:780;
}
.page-subtitle {
  margin:5px 0 0;
  color:#75839a;
  font-size:13px;
}
.local-pill {
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 12px;
  color:#53647b;
  font-size:11px;
  white-space:nowrap;
}
.view-panel {
  display:block;
}
.hidden {
  display:none!important;
}
h2 {
  font-size:22px;
  letter-spacing:-.5px;
  margin:0 0 5px;
}
h3 {
  font-size:15px;
  margin:0;
  font-weight:750;
  letter-spacing:-.2px;
}
.muted {
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
  margin:5px 0 0;
}
.welcome-row {
  margin:0 0 18px;
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:16px;
}
.feature-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:9px;
  min-height:190px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  padding:22px 18px;
  cursor:pointer;
  color:inherit;
  font:inherit;
  box-shadow:0 4px 16px #10243f05;
}
.feature-card:hover {
  border-color:#a8c1f7;
  transform:translateY(-1px);
}
.feature-icon {
  width:45px;
  height:45px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:23px;
  font-weight:800;
  flex:0 0 auto;
}
.feature-icon.blue {
  background:#E5F3FB;
  color:#0086C9;
}
.feature-icon.teal {
  background:#E4F6EC;
  color:#00A85A;
}
.feature-icon.violet {
  background:#E4F6EC;
  color:#00A85A;
}
.feature-card strong {
  font-size:14px;
}
.feature-card small {
  font-size:11px;
  line-height:1.5;
  color:#728098;
  max-width:230px;
}
.feature-arrow {
  display:grid;
  place-items:center;
  border:1px solid #e3eaf5;
  border-radius:50%;
  width:30px;
  height:30px;
  color:#0086C9;
  margin-top:auto;
}
.content-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:13px;
  padding:18px;
  margin-bottom:15px;
  min-width:0;
  box-shadow:0 4px 18px #10243f04;
}
.card-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:15px;
}
.card-heading .muted {
  margin-top:4px;
}
.quick-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.quick-stat {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  background:#F5FBFE;
  border-radius:10px;
  padding:12px;
}
.quick-stat-icon {
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:18px;
  flex:0 0 34px;
}
.blue-soft {
  background:#E5F3FB;
  color:#0086C9;
}
.green-soft {
  background:#E4F6EC;
  color:#00A85A;
}
.red-soft {
  background:#fff0f0;
  color:#dc2626;
}
.gray-soft {
  background:#edf1f6;
  color:#64748b;
}
.quick-stat strong,.quick-stat small {
  display:block;
}
.quick-stat strong {
  font-size:18px;
  letter-spacing:-.4px;
}
.quick-stat small {
  font-size:10px;
  color:#77859a;
  margin-top:2px;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid transparent;
  border-radius:8px;
  padding:10px 13px;
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition: background .12s, border-color .12s;
}
.button:disabled {
  opacity:.45;
  cursor:not-allowed;
}
.primary {
  background:var(--blue);
  color:#fff;
  box-shadow:0 4px 10px #0086C920;
}
.primary:hover:not(:disabled) {
  background:#006DA8;
}
.secondary {
  background:#fff;
  color:#334155;
  border-color:#d8e1ed;
}
.secondary:hover:not(:disabled) {
  background:#f7f9fc;
}
.success {
  background:#00A85A;
  color:#fff;
}
.warning-button {
  background:#f59e0b;
  color:#fff;
}
.danger {
  background:#dc2626;
  color:#fff;
}
.small-button {
  padding:7px 10px;
  font-size:11px;
}
.link-button {
  border:0;
  background:transparent;
  color:#0086C9;
  padding:7px;
}
.button-row {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}
.full-button {
  width:100%;
  margin-top:14px;
}
.table-wrap {
  overflow:auto;
  border:1px solid #e7edf5;
  border-radius:9px;
}
table {
  border-collapse:collapse;
  width:100%;
  font-size:11px;
  min-width:590px;
}
th {
  background:#f7f9fc;
  color:#718096;
  font-size:10px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.4px;
  text-align:left;
  white-space:nowrap;
}
td,th {
  padding:11px 12px;
  border-bottom:1px solid #edf1f6;
}
tbody tr:last-child td {
  border-bottom:0;
}
td {
  color:#334155;
}
tbody tr:hover {
  background:#fafcff;
}
.empty-cell {
  text-align:center;
  color:#8a97a9;
  padding:25px!important;
}
.status-pill {
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:5px 8px;
  font-size:10px;
  font-weight:800;
  background:#edf1f6;
  color:#536174;
  white-space:nowrap;
}
.status-found,.status-completed {
  background:#e8f8ef;
  color:#00864A;
}
.status-processing,.status-queued {
  background:#E5F3FB;
  color:#006DA8;
}
.status-paused {
  background:#fff4df;
  color:#a16207;
}
.status-stopped,.status-failed,.status-other {
  background:#fff0f0;
  color:#b42318;
}
.lookup-layout {
  display:grid;
  grid-template-columns:minmax(310px,.95fr) minmax(360px,1.25fr);
  gap:14px;
  align-items:start;
}
.form-card,.process-card {
  min-height:100%;
}
.segmented {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  background:#F1F5F9;
  padding:3px;
  border-radius:9px;
  margin-bottom:15px;
}
.segment {
  border:0;
  border-radius:7px;
  background:transparent;
  padding:9px 8px;
  color:#64748b;
  font:inherit;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.segment.active {
  background:#fff;
  color:#0086C9;
  box-shadow:0 1px 4px #0f172a10;
}
.stack-form {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.stack-form>label,.stack-form label {
  font-size:12px;
  font-weight:700;
}
.required {
  color:#dc2626;
}
.text-input,select.text-input {
  width:100%;
  min-width:0;
  border:1px solid #d9e1ec;
  border-radius:8px;
  padding:10px 11px;
  font:inherit;
  font-size:12px;
  background:#fff;
  color:#17243a;
}
.text-input:focus,textarea:focus {
  outline:2px solid #0086C922;
  border-color:#7ba1f6;
}
.lookup-source-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.lookup-source-card {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:11px;
  border:1px solid #dce4f0;
  border-radius:9px;
  min-width:0;
  background:#fff;
}
.lookup-source-card:not(.source-inactive) {
  border-color:#8baaff;
  background:#F5FBFE;
}
.lookup-source-card.source-inactive {
  background:#f7f9fc;
}
.source-check {
  display:flex;
  align-items:flex-start;
  gap:8px;
  cursor:pointer;
}
.source-check input {
  margin:3px 0 0;
  accent-color:#0086C9;
}
.source-check strong,.source-check small {
  display:block;
}
.source-check strong {
  font-size:11px;
}
.source-check small {
  font-size:10px;
  color:#7b8799;
  margin-top:3px;
}
.lookup-source-card textarea {
  width:100%;
  height:86px;
  min-height:86px;
  resize:vertical;
  border:1px solid #d9e1ec;
  border-radius:7px;
  padding:9px;
  font:inherit;
  font-size:11px;
  line-height:1.45;
}
.lookup-source-card textarea:disabled,.lookup-file-button:has(input:disabled) {
  opacity:.45;
  cursor:not-allowed;
}
.file-button {
  display:inline-flex;
  align-items:center;
  border:1px solid #d9e1ec;
  padding:8px 10px;
  border-radius:7px;
  cursor:pointer;
  font-size:11px!important;
  align-self:flex-start;
}
.file-button input {
  max-width:100%;
  font-size:10px;
  margin-top:5px;
}
.hint {
  font-size:11px;
  color:#77859a;
  line-height:1.55;
  margin:7px 0;
}
.control-buttons {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:7px;
  margin:16px 0;
}
.control-buttons .button {
  padding:10px 7px;
  font-size:11px;
}
.lookup-progress {
  border:1px solid #e6ecf5;
  background:#fbfcff;
  border-radius:10px;
  padding:14px;
}
.progress-heading {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  margin-bottom:10px;
  font-size:12px;
}
#lookup-status { justify-self:start; }
#lookup-percent {
  justify-self:center;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:#77859a;
}
#lookup-count {
  justify-self:end;
  text-align:right;
  white-space:nowrap;
}
.progress-track {
  height:9px;
  background:#e6ebf3;
  border-radius:99px;
  overflow:hidden;
}
.progress-fill {
  height:100%;
  background:#0086C9;
  border-radius:99px;
  transition:width .2s;
}
.progress-meta {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
  color:#77859a;
  font-size:10px;
}
.result-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin-top:15px;
}
.result-stat {
  padding:10px 8px;
  border-radius:8px;
  text-align:center;
}
.result-stat strong,.result-stat span {
  display:block;
}
.result-stat strong {
  font-size:18px;
}
.result-stat span {
  font-size:9px;
  margin-top:3px;
  line-height:1.3;
}
.result-stat.found {
  background:#eaf8f0;
  color:#00864A;
}
.result-stat.missing {
  background:#fff0f0;
  color:#fd0303;
}
.result-stat.issue {
  background:#fce6c3;
  color:#6e4306;
}
.result-stat.neutral {
  background:#d2e6ff;
  color:#232d3c;
}
.process-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.notice {
  padding:10px 12px;
  border-radius:8px;
  font-size:11px;
  line-height:1.55;
  margin-top:12px;
}
.error {
  background:#fff2f1;
  border:1px solid #ffd8d5;
  color:#a22c24;
}
.search-form {
  display:flex;
  gap:9px;
}
.search-form input {
  flex:1;
  min-width:0;
  border:1px solid #d9e1ec;
  border-radius:8px;
  padding:12px;
  font:inherit;
  font-size:13px;
}
.search-summary {
  margin:10px 0;
}
.internal-grid {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(290px,.9fr);
  gap:14px;
  align-items:start;
}
.profile-result {
  margin-bottom:0;
}
.profile-result-heading {
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:15px;
  border-bottom:1px solid #edf1f6;
}
.profile-avatar-placeholder {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#eaf0f8;
  color:#8b9ab0;
  font-size:28px;
}
.profile-title {
  flex:1;
  min-width:0;
}
.profile-title h3 {
  font-size:16px;
  margin-bottom:5px;
}
.profile-title code {
  font-size:10px;
  color:#64748b;
}
.profile-fields {
  display:grid;
  grid-template-columns:1fr;
  gap:13px;
  margin:16px 0 0;
}
.profile-fields>div {
  min-width:0;
}
.profile-fields dt {
  font-size:10px;
  color:#7b8799;
  margin-bottom:5px;
}
.profile-fields dd {
  margin:0;
  font-size:12px;
  color:#263449;
  overflow-wrap:anywhere;
}
.profile-fields a {
  color:#0086C9;
  text-decoration:none;
}
.profile-fields a:hover {
  text-decoration:underline;
}
.history-list {
  display:flex;
  flex-direction:column;
}
.history-item {
  padding:11px 0;
  border-bottom:1px solid #edf1f6;
}
.history-item:last-child {
  border-bottom:0;
}
.history-item-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.history-item small {
  display:block;
  color:#77859a;
  font-size:10px;
  margin-top:5px;
}
.empty-state,.empty-utility {
  padding:25px;
  border:1px dashed #d9e1ec;
  border-radius:10px;
  background:#fafcff;
  color:#7a8799;
  text-align:center;
  font-size:12px;
}
.utility-card {
  padding-bottom:16px;
}
.utility-tabs {
  display:flex;
  gap:5px;
  overflow:auto;
  border-bottom:1px solid var(--line);
  margin:0 -18px 18px;
  padding:0 18px;
}
.utility-tab {
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  padding:12px 13px;
  font:inherit;
  font-size:11px;
  font-weight:700;
  color:#748197;
  white-space:nowrap;
  cursor:pointer;
}
.utility-tab.active {
  color:#0086C9;
  border-bottom-color:#0086C9;
}
.utility-pane {
  display:block;
}
.utility-two-col {
  display:grid;
  grid-template-columns:minmax(280px,.9fr) minmax(330px,1.1fr);
  gap:18px;
  align-items:start;
}
.dropzone {
  margin:0 0 14px;
  min-height:180px;
  border:1.5px dashed #c8d4e7;
  border-radius:11px;
  background:#F5FBFE;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  padding:20px;
  cursor:pointer;
}
.dropzone:hover,.dropzone.dragover {
  border-color:#3564d9;
  background:#EFF8FC;
}
.dropzone input {
  display:none;
}
.upload-icon {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  background:#E5F3FB;
  color:#006DA8;
  font-size:24px;
}
.dropzone strong {
  font-size:12px;
}
.small {
  font-size:11px;
}
.file-count {
  font-size:10px;
  color:#006DA8;
  max-width:100%;
  overflow-wrap:anywhere;
}
.check-row {
  display:flex;
  gap:8px;
  align-items:flex-start;
  cursor:pointer;
}
.check-row input {
  margin-top:3px;
  accent-color:#0086C9;
}
.check-row strong,.check-row small {
  display:block;
}
.check-row strong {
  font-size:11px;
}
.check-row small {
  font-size:10px;
  color:#79869a;
  margin-top:4px;
}
.mini-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:12px;
}
.mini-stats>div {
  background:#f5f8fd;
  padding:12px;
  border-radius:8px;
}
.mini-stats small,.mini-stats strong {
  display:block;
}
.mini-stats small {
  font-size:10px;
  color:#718096;
}
.mini-stats strong {
  font-size:19px;
  margin-top:5px;
}
.download-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:12px;
}
.download-card {
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #e1e8f2;
  border-radius:9px;
  padding:10px;
  color:#1c2b41;
  text-decoration:none;
  min-width:0;
}
.download-card:hover {
  border-color:#9cb4ef;
  background:#F5FBFE;
}
.download-symbol {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:8px;
  background:#edf3ff;
  color:#006DA8;
  font-size:18px;
}
.download-card strong,.download-card small {
  display:block;
  overflow-wrap:anywhere;
}
.download-card strong {
  font-size:11px;
}
.download-card small {
  font-size:10px;
  color:#7b8799;
  margin-top:3px;
}
.compact-select-row {
  display:grid;
  grid-template-columns:120px minmax(160px,240px) minmax(220px,1fr);
  gap:10px;
  align-items:center;
}
.compact-select-row>label {
  font-size:12px;
  font-weight:700;
}
.select-tip {
  margin:0;
  color:#718096;
  font-size:10px;
  line-height:1.5;
}
.field-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}
.export-field-grid {
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.field-grid label {
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid #e8edf4;
  background:#fbfcfe;
  padding:9px;
  border-radius:8px;
  font-size:10px;
  cursor:pointer;
  min-height:38px;
}
.field-grid label:has(input:checked) {
  border-color:#b5c7f2;
  background:#F5FBFE;
}
.field-grid input {
  accent-color:#0086C9;
}
.export-job-row select {
  width:100%;
}
.full-button {
  width:100%;
}
footer {
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#8994a5;
  font-size:10px;
  padding:13px 3px;
}
footer code {
  background:#e9edf3;
  padding:3px 5px;
  border-radius:4px;
  color:#637087;
}

@media(max-width:1050px) {
  .main-area {
    padding:22px 18px;
  }
  .lookup-layout {
    grid-template-columns:1fr;
  }
  .quick-stats {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .internal-grid {
    grid-template-columns:1fr;
  }
  .utility-two-col {
    grid-template-columns:1fr;
  }
  .compact-select-row {
    grid-template-columns:120px minmax(150px,1fr);
  }
  .select-tip {
    grid-column:2;
  }
  .field-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .export-field-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media(max-width:700px) {
  .export-field-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .sidebar {
    width:68px;
    flex-basis:68px;
    padding:14px 8px;
  }
  .brand {
    padding-left:6px;
    border:0;
  }
  .brand-copy,.nav-label {
    display:none;
  }
  .sidebar-toggle {
    display:none;
  }
  .nav-item {
    justify-content:center;
    padding:10px 8px;
  }
  .data-status {
    justify-content:center;
    padding:12px 8px;
  }
  .main-area,.app-shell.sidebar-collapsed .main-area {
    max-width:calc(100% - 68px);
    padding:17px 12px;
  }
  .app-shell.sidebar-collapsed .sidebar {
    width:68px;
    flex-basis:68px;
  }
  .topbar {
    align-items:flex-start;
    margin-bottom:18px;
  }
  .topbar h1 {
    font-size:21px;
  }
  .local-pill {
    display:none;
  }
  .feature-grid {
    grid-template-columns:1fr;
  }
  .feature-card {
    min-height:0;
    display:grid;
    grid-template-columns:44px 1fr 24px;
    text-align:left;
    align-items:center;
    padding:14px;
    column-gap:12px;
  }
  .feature-card .feature-icon {
    grid-row:span 2;
  }
  .feature-card strong {
    align-self:end;
  }
  .feature-card small {
    grid-column:2;
    max-width:none;
    align-self:start;
  }
  .feature-arrow {
    grid-column:3;
    grid-row:1/3;
  }
  .quick-stats {
    grid-template-columns:1fr 1fr;
  }
  .lookup-source-grid {
    grid-template-columns:1fr;
  }
  .control-buttons {
    grid-template-columns:1fr;
  }
  .result-stats {
    grid-template-columns:1fr 1fr;
  }
  .internal-grid {
    grid-template-columns:1fr;
  }
  .profile-fields {
    grid-template-columns:1fr;
  }
  .utility-two-col {
    grid-template-columns:1fr;
  }
  .compact-select-row {
    grid-template-columns:1fr;
    gap:5px;
  }
  .select-tip {
    grid-column:auto;
  }
  .field-grid {
    grid-template-columns:1fr 1fr;
  }
  .search-form {
    align-items:stretch;
    flex-direction:column;
  }
  .card-heading {
    align-items:flex-start;
  }
  .button-row .button {
    flex:1;
  }
  .button-row .primary {
    width:auto;
  }
  footer {
    flex-direction:column;
  }
  .content-card {
    padding:14px;
  }
  .utility-tabs {
    margin-left:-14px;
    margin-right:-14px;
    padding-left:14px;
    padding-right:14px;
  }
}
.topbar-title {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.main-menu-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #dce5f1;
  background:#fff;
  color:#42536b;
  width:36px;
  height:36px;
  flex:0 0 36px;
}
.topbar-title>div {
  min-width:0;
}

@media(max-width:700px) {
  .main-menu-toggle {
    display:none;
  }
}
.table-sub {
  display:block;
  color:#8290a4;
  font-size:9px;
  margin-top:4px;
}
.sidebar-bottom form {
  margin:0;
}
.sidebar-bottom form .nav-item {
  font-family:inherit;
}

/* UID Toolkit v0.5.0 — readability upgrade */
:root {
  font-size: 16px;
}
body {
  font-size: 16px;
  line-height: 1.5;
}
.brand-copy strong {
  font-size: 16px;
}
.brand-copy small {
  font-size: 12px;
}
.nav-item {
  font-size: 14px;
  min-height: 44px;
}
.data-status {
  font-size: 13px;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 1.3px;
}
.topbar h1 {
  font-size: 30px;
  line-height: 1.25;
}
.page-subtitle {
  font-size: 16px;
  line-height: 1.5;
}
.local-pill {
  font-size: 13px;
}
h2 {
  font-size: 24px;
  line-height: 1.3;
}
h3 {
  font-size: 19px;
  line-height: 1.35;
}
.muted {
  font-size: 15px;
  line-height: 1.55;
}
.feature-card strong {
  font-size: 17px;
}
.feature-card small {
  font-size: 14px;
  line-height: 1.55;
}
.quick-stat strong {
  font-size: 20px;
}
.quick-stat small {
  font-size: 13px;
  line-height: 1.4;
}
.button {
  font-size: 15px;
  min-height: 40px;
  padding: 10px 14px;
}
.small-button {
  font-size: 13px;
  min-height: 34px;
}
.link-button {
  font-size: 14px;
}
table {
  font-size: 14px;
}
th {
  font-size: 13px;
  letter-spacing: .3px;
}
td, th {
  padding: 12px 13px;
}
.status-pill {
  font-size: 12px;
  padding: 5px 9px;
}
.segment {
  font-size: 14px;
  padding: 10px 9px;
}
.text-input, select.text-input {
  font-size: 15px;
  min-height: 42px;
  padding: 10px 12px;
}
.stack-form > label, .stack-form label {
  font-size: 14px;
}
.source-check strong {
  font-size: 14px;
}
.source-check small {
  font-size: 13px;
}
.lookup-source-card textarea {
  font-size: 14px;
  line-height: 1.5;
}
.file-button {
  font-size: 14px !important;
}
.file-button input {
  font-size: 13px;
}
.hint {
  font-size: 14px;
  line-height: 1.55;
}
.control-buttons .button {
  font-size: 14px;
}
.progress-heading {
  font-size: 14px;
}
.progress-meta {
  font-size: 13px;
}
.result-stat strong {
  font-size: 20px;
}
.result-stat span {
  font-size: 12px;
  line-height: 1.4;
}
.notice {
  font-size: 14px;
  line-height: 1.55;
}
.search-form input {
  font-size: 16px;
  min-height: 46px;
}
.profile-title h3 {
  font-size: 18px;
}
.profile-title code {
  font-size: 13px;
}
.profile-fields dt {
  font-size: 13px;
}
.profile-fields dd {
  font-size: 15px;
  line-height: 1.5;
}
.history-item small {
  font-size: 13px;
}
.empty-state, .empty-utility {
  font-size: 15px;
  line-height: 1.55;
}
.utility-tab {
  font-size: 14px;
  padding: 13px 14px;
}
.dropzone strong {
  font-size: 15px;
}
.small {
  font-size: 14px;
}
.file-count {
  font-size: 13px;
}
.check-row strong {
  font-size: 14px;
}
.check-row small {
  font-size: 13px;
}
.mini-stats small {
  font-size: 13px;
}
.mini-stats strong {
  font-size: 21px;
}
.download-card strong {
  font-size: 14px;
}
.download-card small {
  font-size: 13px;
}
.compact-select-row > label {
  font-size: 14px;
}
.select-tip {
  font-size: 13px;
  line-height: 1.5;
}
.field-grid label {
  font-size: 14px;
  min-height: 42px;
}
footer {
  font-size: 12px;
}
.table-sub {
  font-size: 12px;
}

@media (max-width: 700px) {
  .topbar h1 {
    font-size: 25px;
  }
  .page-subtitle {
    font-size: 14px;
  }
  h2 {
    font-size: 22px;
  }
  h3 {
    font-size: 18px;
  }
  .nav-item {
    font-size: 14px;
  }
  .feature-card strong {
    font-size: 16px;
  }
  .feature-card small {
    font-size: 14px;
  }
  .content-card {
    padding: 14px;
  }
  .utility-tab {
    font-size: 13px;
  }
}

/* UID source selector: show one source at a time, using the full available width. */
.lookup-source-grid.single-source {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
}
.lookup-source-grid.single-source .lookup-source-card {
  width:100%;
  padding:14px;
}
.lookup-source-grid.single-source .lookup-source-card textarea {
  height:190px;
  min-height:150px;
  font-size:13px;
  line-height:1.55;
}
.lookup-source-grid.single-source .lookup-file-button {
  display:flex;
  align-items:center;
  gap:12px;
  align-self:stretch;
  min-height:54px;
}
.lookup-source-grid.single-source .lookup-file-button input {
  flex:1;
  min-width:0;
  max-width:100%;
  font-size:12px;
}
.lookup-settings-row {
  display:grid;
  grid-template-columns:160px minmax(0,1fr);
  gap:16px;
  align-items:start;
  margin-top:4px;
}
.lookup-settings-row .limit-row {
  margin-top:0;
}
.network-job-setting {
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
}
.network-job-setting>label {
  font-size:12px;
  font-weight:700;
}
.network-job-controls {
  display:grid;
  grid-template-columns:minmax(0,1fr) 64px;
  gap:8px;
  min-width:0;
}
.network-job-controls .text-input {
  min-width:0;
  width:100%;
}
.network-job-controls .button {
  min-width:0;
  padding-left:10px;
  padding-right:10px;
}
#lookup-network-status {
  margin-top:0;
  min-height:16px;
  overflow-wrap:anywhere;
}
#lookup-network-status.network-setting-running {
  color:var(--success, #16a34a);
  font-weight:600;
}
#lookup-network-status.network-setting-error {
  color:var(--danger, #dc2626);
}
.limit-help {
  margin-top:8px;
}
.limit-row {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:4px;
}
.limit-row>label {
  font-size:12px;
  font-weight:700;
}
.limit-row .text-input {
  max-width:220px;
}
.limit-row .hint {
  margin-top:0;
}
.control-buttons {
  grid-template-columns:1fr 1fr;
}

@media(max-width:700px) {
  .lookup-source-grid.single-source .lookup-source-card textarea {
    height:160px;
  }
  .limit-row .text-input {
    max-width:none;
  }
  .lookup-settings-row {
    grid-template-columns:120px minmax(0,1fr);
    gap:10px;
  }
  .network-job-controls {
    grid-template-columns:minmax(0,1fr) 58px;
    gap:6px;
  }
}

/* Two mutually-exclusive source checkboxes above one full-width input area. */
.lookup-source-options {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  width:100%;
}
.lookup-source-options>.lookup-source-option {
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  min-height:64px;
  box-sizing:border-box;
}
.lookup-source-option input[type="checkbox"] {
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:18px;
  height:18px;
  flex:0 0 18px;
  cursor:pointer;
}
.lookup-source-option span {
  min-width:0;
}
.lookup-source-option strong {
  font-size:14px;
  line-height:1.35;
}
.lookup-source-option small {
  font-size:12px;
  line-height:1.4;
}
.lookup-source-option {
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
  padding:13px;
  border:1px solid #dce4f0;
  border-radius:9px;
  background:#f7f9fc;
  cursor:pointer;
}
.lookup-source-option.selected {
  border-color:#7d9fff;
  background:#EFF8FC;
}
.lookup-source-option input {
  margin:3px 0 0;
  accent-color:#0086C9;
  flex:0 0 auto;
}
.lookup-source-option strong,.lookup-source-option small {
  display:block;
}
.lookup-source-option strong {
  font-size:12px;
}
.lookup-source-option small {
  font-size:11px;
  color:#7b8799;
  margin-top:4px;
}
.lookup-source-inputs {
  width:100%;
  min-width:0;
  margin-top:10px;
}
.lookup-source-inputs section {
  width:100%;
  min-width:0;
}
.lookup-source-inputs .source-panel-label {
  display:block;
  font-size:12px;
  font-weight:700;
  margin-bottom:7px;
}
.lookup-source-inputs textarea {
  display:block;
  width:100%;
  box-sizing:border-box;
  min-height:180px;
  resize:vertical;
  border:1px solid #d9e1ec;
  border-radius:8px;
  padding:12px;
  font:inherit;
  font-size:13px;
  line-height:1.55;
}
.lookup-source-inputs .lookup-file-button {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  box-sizing:border-box;
  min-height:58px;
}
.lookup-source-inputs .lookup-file-button input {
  flex:1;
  min-width:0;
  max-width:100%;
  font-size:12px;
}
.lookup-source-inputs #file-input-panel .muted {
  display:block;
  margin-top:9px;
  overflow-wrap:anywhere;
}

@media(max-width:700px) {
  .lookup-source-options {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .lookup-source-option {
    padding:10px;
    gap:7px;
  }
  .lookup-source-option strong {
    font-size:12px;
  }
  .lookup-source-option small {
    font-size:10px;
  }
  .lookup-source-inputs textarea {
    min-height:150px;
  }
}


/* Lookup timing: three evenly spaced metrics, visually separated from progress. */
.lookup-progress .progress-meta {
  display:block;
  margin-top:9px;
}
.lookup-timing-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
}
.lookup-timing-row > span {
  min-width:0;
  white-space:nowrap;
}
.lookup-timing-row > span:nth-child(1) { text-align:left; }
.lookup-timing-row > span:nth-child(2) { text-align:center; }
.lookup-timing-row > span:nth-child(3) { text-align:right; }
.lookup-timing-row strong {
  color:#46566d;
  font-weight:600;
}
.uid-activity-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
#lookup-current-uid {
  text-align: right;
  overflow-wrap: anywhere;
}

#lookup-elapsed{
  color:#640082;
}

#lookup-remaining{
  color:#007dc5;
}

@media (max-width: 700px) {
  .progress-heading { gap:6px; }
  .lookup-timing-row {
    grid-template-columns:1fr;
    gap:5px;
  }
  .lookup-timing-row > span,
  .lookup-timing-row > span:nth-child(n) {
    text-align:left;
    white-space:normal;
  }
  .uid-activity-heading {
    align-items: flex-start;
  }
  #lookup-current-uid {
    max-width: 60%;
  }
}
@media (max-width: 420px) {
  .progress-heading { grid-template-columns:minmax(0,1fr) auto; }
  #lookup-percent { grid-column:1; grid-row:2; justify-self:start; }
  #lookup-count { grid-column:2; grid-row:1 / span 2; align-self:center; }
}

/* Lookup activity log: restore the card, heading and per-UID row layout. */
.uid-activity {
  margin-top: 12px;
  border: 1px solid #dce5f1;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  min-width: 0;
}
.uid-activity-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 12px;
  background: #f6f9fd;
  border-bottom: 1px solid #dce5f1;
  color: #31577f;
  font-size: 12px;
  min-width: 0;
}
.uid-activity-heading > strong {
  flex: 0 0 auto;
  font-weight: 700;
}
#lookup-current-uid {
  min-width: 0;
  text-align: right;
  color: #0784c7;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.uid-activity-log {
  max-height: 290px;
  overflow: auto;
  padding: 0 12px;
  background: #fff;
  min-width: 0;
}
.uid-log-row {
  display: grid;
  grid-template-columns: minmax(150px, 34%) minmax(125px, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 10px;
  min-height: 29px;
  padding: 5px 0;
  border-bottom: 1px solid #edf1f7;
  min-width: 0;
  font-size: 12px;
}
.uid-log-row:last-child {
  border-bottom: 0;
}
.uid-log-row code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #304766;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.uid-log-status {
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.uid-log-status.no_metadata,
.uid-log-status.access_required,
.uid-log-status.access_denied {
  color: #dc2626;
}
.uid-log-status.found {
  color: #16835b;
}
.uid-log-status.error,
.uid-log-status.timeout {
  color: #64748b;
}
.uid-log-row small {
  min-width: 0;
  color: #718096;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.uid-log-empty {
  padding: 18px 0;
  color: #718096;
  font-size: 12px;
}
@media (max-width: 700px) {
  .uid-activity-heading {
    align-items: flex-start;
  }
  #lookup-current-uid {
    max-width: 62%;
  }
  .uid-log-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
  }
  .uid-log-row code {
    grid-column: 1;
  }
  .uid-log-status {
    grid-column: 2;
    text-align: right;
  }
  .uid-log-row small {
    grid-column: 1 / -1;
  }
}


/* Modern SaaS inline Lucide-style icon system */
.ui-icon{display:inline-block;flex:0 0 auto;width:1.15em;height:1.15em;vertical-align:-.2em;stroke:currentColor;pointer-events:none}
.nav-icon .ui-icon{width:19px;height:19px;vertical-align:middle}
.feature-icon .ui-icon{width:25px;height:25px;vertical-align:middle;stroke-width:1.75}
.quick-stat-icon .ui-icon{width:20px;height:20px;vertical-align:middle}
.feature-arrow .ui-icon{width:16px;height:16px}
.button .ui-icon,.icon-button .ui-icon{width:16px;height:16px}
.icon-button{display:inline-flex;align-items:center;justify-content:center}
.button{transition:background .15s,border-color .15s,box-shadow .15s,transform .15s}
.button:active:not(:disabled),.feature-card:active{transform:translateY(1px)}
.button:focus-visible,.icon-button:focus-visible,.nav-item:focus-visible,.feature-card:focus-visible{outline:3px solid #0086c94d;outline-offset:2px}
.nav-icon{display:inline-flex;align-items:center;justify-content:center}
.feature-icon{display:flex;align-items:center;justify-content:center}
.quick-stat-icon{display:flex;align-items:center;justify-content:center}
.download-symbol{display:inline-flex;align-items:center;justify-content:center}
.download-symbol .ui-icon{width:19px;height:19px}


/* Consistent icon coverage across all functional areas */
.icon-heading { display: flex; align-items: center; gap: 9px; }
.heading-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; color: var(--primary, #4f46e5); background: var(--primary-soft, #eef2ff); }
.heading-icon .ui-icon { width: 19px; height: 19px; }
.button.has-icon, .utility-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.button .ui-icon, .utility-tab .ui-icon { flex: 0 0 auto; }
.job-row-actions .button .ui-icon { vertical-align: middle; }
.icon-heading .heading-icon { margin-left: -1px; }
@media (max-width: 640px) { .heading-icon { flex-basis: 30px; width: 30px; height: 30px; } }


/* Result metric icons and action-button affordances */
.result-stat-label {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 4px;
  font-weight: 500;
}
.result-stat .stat-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.result-stat strong { line-height: 1.2; }
.process-actions .button, .job-row-actions .button, #lookup-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.job-row-actions .button .ui-icon, .process-actions .button .ui-icon, #lookup-start .ui-icon {
  flex: 0 0 auto;
}
#lookup-start.is-loading .ui-icon { animation: uce-icon-spin 1.1s linear infinite; }
@keyframes uce-icon-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #lookup-start.is-loading .ui-icon { animation: none; } }


/* Dashboard redesign: data-first overview with Chart.js */
.dashboard-overview { margin-bottom: 12px; }
.dashboard-stat-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.dashboard-stat {
  min-width:0; display:flex; align-items:flex-start; gap:12px;
  padding:17px 15px; border:1px solid transparent; border-radius:12px;
  background:#f5f9fc;
}
.dashboard-stat-icon {
  display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px;
  border-radius:12px; background:#e1f2fc; color:#0086c9;
}
.dashboard-stat > div { min-width:0; display:flex; flex-direction:column; gap:4px; }
.dashboard-stat strong { font-size:25px; line-height:1.15; font-weight:750; color:#16324f; overflow-wrap:anywhere; }
.dashboard-stat span:not(.dashboard-stat-icon) { font-size:12px; color:#718096; line-height:1.4; }
.stat-blue { background:#f1f8fd; border-color:#e4f1fa; }
.stat-sky { background:#f0f9fd; border-color:#e0f2fa; }
.stat-green { background:#f0faf5; border-color:#ddf3e7; }
.stat-green .dashboard-stat-icon { background:#d8f5e5; color:#00a85a; }
.stat-red { background:#fff5f5; border-color:#fde8e8; }
.stat-red .dashboard-stat-icon { background:#ffe5e5; color:#e5484d; }
.stat-amber { background:#fff9ed; border-color:#f8eed7; }
.stat-amber .dashboard-stat-icon { background:#fff0cb; color:#c98200; }
.stat-gray { background:#f4f6f9; border-color:#e8edf3; }
.stat-gray .dashboard-stat-icon { background:#e6ebf2; color:#66758a; }
.dashboard-chart-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:16px; margin:12px 0; }
.chart-card { min-width:0; }
.chart-plot { position:relative; min-height:255px; height:270px; width:100%; margin-top:10px; overflow:hidden; }
.chart-plot canvas { display:block; width:100% !important; height:100% !important; }
.chart-loading { display:grid; place-items:center; min-height:210px; color:#8190a5; font-size:13px; text-align:center; padding:12px; }
.chart-loading.hidden { display:none !important; }
.chart-plot > .chart-loading { position:absolute; inset:0; background:rgba(255,255,255,.94); }
.chart-legend { display:flex; flex-wrap:wrap; gap:15px; padding:6px 3px 0; color:#60718a; font-size:12px; }
.chart-legend span { display:inline-flex; align-items:center; gap:7px; }
.legend-dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.legend-blue { background:#1688dc; }
.legend-green { background:#00a85a; }
.distribution-layout { display:grid; grid-template-columns:minmax(170px,.95fr) minmax(180px,1.05fr); align-items:center; gap:12px; min-height:270px; }
.donut-chart-wrap { position:relative; display:grid; place-items:center; min-width:0; width:100%; max-width:270px; margin-inline:auto; }
.donut-chart-wrap canvas { display:block; width:100% !important; height:auto !important; }
.donut-chart-wrap .chart-loading { position:absolute; inset:0; pointer-events:none; }
.distribution-legend { display:flex; flex-direction:column; gap:17px; min-width:0; }
.distribution-legend-row { display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:9px; font-size:12px; color:#65758b; }
.distribution-legend-row .legend-dot { width:9px; height:9px; }
.distribution-legend-row strong { color:#253c59; font-size:13px; white-space:nowrap; }
.distribution-legend-row small { grid-column:2 / 4; color:#8a98ab; font-size:11px; margin-top:-5px; }
.dashboard-jobs-card { margin-top:12px; }
.dashboard-jobs-table { min-width:1000px; }
.dashboard-jobs-table th { white-space:nowrap; }
.dashboard-jobs-table td { vertical-align:middle; }
.dashboard-jobs-table td:first-child { color:#718096; width:38px; }
.dashboard-jobs-table .job-name-cell { min-width:150px; max-width:240px; }
.dashboard-jobs-table .job-name-cell strong { display:block; overflow-wrap:anywhere; }
.dashboard-jobs-table .job-name-cell small { display:block; color:#8391a5; margin-top:4px; font-size:11px; }
.dashboard-jobs-table .job-count { font-variant-numeric:tabular-nums; white-space:nowrap; }
.dashboard-jobs-table .count-found { color:#009b55; font-weight:650; }
.dashboard-jobs-table .count-empty { color:#e5484d; }
.dashboard-jobs-table .job-row-actions { display:flex; gap:6px; }
.dashboard-jobs-table .button { white-space:nowrap; }
@media (max-width:1250px) {
  .dashboard-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dashboard-chart-grid { grid-template-columns:minmax(0,1fr); }
  .distribution-layout { grid-template-columns:minmax(180px,.8fr) minmax(200px,1.2fr); }
}
@media (max-width:680px) {
  .dashboard-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .dashboard-stat { padding:12px 10px; gap:9px; }
  .dashboard-stat-icon { width:34px; height:34px; flex-basis:34px; }
  .dashboard-stat strong { font-size:20px; }
  .distribution-layout { grid-template-columns:1fr; padding-bottom:10px; }
  .distribution-legend { padding:0 10px; }
  .chart-plot { min-height:190px; height:220px; }
}


/* Dashboard layout hardening: explicit sizing prevents legacy card rules from collapsing the new grid. */
#panel-home .dashboard-stat-grid { display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:stretch; }
#panel-home .dashboard-stat { display:flex; flex-direction:row; align-items:flex-start; }
#panel-home .dashboard-chart-grid { display:grid !important; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); align-items:stretch; }
#panel-home .dashboard-stat > div { display:flex; flex-direction:column; min-width:0; }
#panel-home .chart-card { display:block; }
#panel-home .chart-plot { min-height:255px; }
#panel-home .distribution-layout { display:grid; grid-template-columns:minmax(170px,.95fr) minmax(180px,1.05fr); }
@media (max-width:1250px) {
  #panel-home .dashboard-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #panel-home .dashboard-chart-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:680px) {
  #panel-home .dashboard-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #panel-home .distribution-layout { grid-template-columns:1fr; }
}


/* ============================================================
   Popup notifications and modal components (consolidated)
   ============================================================ */
/* UID Toolkit popup component styles */
.popup-toast-region {
  position: fixed; z-index: 10000; top: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 10px;
  width: min(390px, calc(100vw - 32px)); pointer-events: none;
}
.popup-toast {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 13px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 13px;
  background: var(--surface, #fff); color: var(--text, #172033);
  box-shadow: 0 12px 36px rgba(15, 23, 42, .16);
  opacity: 0; transform: translateY(-8px) scale(.985);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: auto; overflow-wrap: anywhere;
}
.popup-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.popup-toast.is-leaving { opacity: 0; transform: translateY(-5px) scale(.985); }
.popup-toast-symbol {
  display: inline-flex; flex: 0 0 25px; width: 25px; height: 25px; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 15px; font-weight: 800; background: #e8eefc; color: #3159b7;
}
.popup-toast-success .popup-toast-symbol { background: #dcfce7; color: #15803d; }
.popup-toast-error .popup-toast-symbol { background: #fee2e2; color: #b91c1c; }
.popup-toast-warning .popup-toast-symbol { background: #fef3c7; color: #92400e; }
.popup-toast-message { flex: 1; min-width: 0; padding-top: 3px; font-size: 13px; line-height: 1.55; }
.popup-toast-close { flex: 0 0 auto; border: 0; background: transparent; color: #64748b; font-size: 21px; line-height: 1; padding: 0 2px; cursor: pointer; }
.popup-modal-overlay {
  position: fixed; z-index: 10001; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(15, 23, 42, .48); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .16s ease;
}
.popup-modal-overlay.is-visible { opacity: 1; }
.popup-modal {
  display: flex; align-items: center; flex-direction: column; gap: 14px;
  width: min(100%, 440px); max-height: min(90vh, 680px); overflow: auto;
  padding: 27px 26px 22px; border: 1px solid var(--border, #e2e8f0); border-radius: 18px;
  background: var(--surface, #fff); color: var(--text, #172033);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .25);
  transform: translateY(8px) scale(.99); transition: transform .16s ease;
}
.popup-modal-overlay.is-visible .popup-modal { transform: translateY(0) scale(1); }
.popup-modal-icon {
  display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 14px; background: #e8eefc; color: #3159b7; font-size: 23px; font-weight: 800;
}
.popup-modal-icon-success { background: #dcfce7; color: #15803d; }
.popup-modal-icon-error { background: #fee2e2; color: #b91c1c; }
.popup-modal-icon-warning, .popup-modal-icon-confirm { background: #fef3c7; color: #92400e; }
.popup-modal-content { width: 100%; text-align: center; }
.popup-modal-title { margin: 0 0 8px; font-size: 19px; font-weight: 750; line-height: 1.35; }
.popup-modal-message { margin: 0; color: var(--muted, #64748b); font-size: 14px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.popup-modal-input { display: block; width: 100%; margin-top: 17px; padding: 11px 12px; border: 1px solid var(--border, #cbd5e1); border-radius: 9px; background: var(--surface, #fff); color: inherit; font: inherit; outline: none; }
.popup-modal-input:focus { border-color: #647fe0; box-shadow: 0 0 0 3px rgba(100, 127, 224, .16); }
.popup-modal-actions { display: flex; justify-content: flex-end; gap: 9px; width: 100%; margin-top: 3px; }
.popup-button { min-height: 39px; padding: 9px 16px; border: 1px solid transparent; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: filter .15s ease, background .15s ease; }
.popup-button:hover { filter: brightness(.97); }
.popup-button:focus-visible, .popup-toast-close:focus-visible { outline: 3px solid rgba(100, 127, 224, .35); outline-offset: 2px; }
.popup-button-secondary { border-color: var(--border, #dbe2ea); background: var(--surface, #fff); color: var(--text, #172033); }
.popup-button-primary { background: #3159b7; color: #fff; }
.popup-button-danger { background: #c62828; color: #fff; }
@media (max-width: 520px) {
  .popup-toast-region { top: 12px; right: 12px; width: calc(100vw - 24px); }
  .popup-modal-overlay { padding: 14px; }
  .popup-modal { padding: 23px 18px 18px; }
  .popup-modal-actions { flex-direction: column-reverse; }
  .popup-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .popup-toast, .popup-modal-overlay, .popup-modal { transition: none; }
}


/* ============================================================
   Login screen (same shared stylesheet, fully scoped)
   ============================================================ */
.login-page { color-scheme:light; min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(ellipse at top left,#e2f3fb 0,transparent 42%),#f3f6fb; color:#17243a; font:15px Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.login-page .login-card { width:min(430px,100%); background:#fff; border:1px solid var(--line); border-radius:20px; padding:34px; box-shadow:0 22px 70px #10243f12; }
.login-page .login-brand { display:flex; align-items:center; gap:13px; margin-bottom:28px; }
.login-page .login-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,var(--blue),#006da8); color:white; font-weight:850; font-size:20px; letter-spacing:-1px; box-shadow:0 8px 20px #0086c92b; }
.login-page .login-brand-copy strong { display:block; color:var(--navy); font-size:17px; letter-spacing:-.3px; }
.login-page .login-brand-copy small { display:block; color:var(--muted); font-size:12px; margin-top:3px; }
.login-page h1 { font-size:25px; letter-spacing:-.8px; margin:0 0 8px; color:var(--navy); }
.login-page .login-muted { color:var(--muted); font-size:13px; line-height:1.6; margin:0 0 25px; }
.login-page .field-label { display:block; font-size:12px; font-weight:700; color:#334155; margin-bottom:8px; }
.login-page .field { display:block; width:100%; padding:13px 14px; border:1px solid #cfd9e6; border-radius:10px; font:inherit; font-size:14px; color:#17243a; background:#fff; transition:border-color .15s,box-shadow .15s; }
.login-page .field:focus { outline:0; border-color:var(--blue); box-shadow:0 0 0 3px #0086c91a; }
.login-page .login-btn { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; border:0; border-radius:10px; padding:13px 16px; margin-top:18px; background:var(--brand-green); color:#fff; font:inherit; font-size:14px; font-weight:750; cursor:pointer; transition:background .15s,transform .15s; }
.login-page .login-btn:hover { background:var(--brand-green-dark); }
.login-page .login-btn:active { transform:translateY(1px); }
.login-page .login-error { display:flex; gap:9px; align-items:flex-start; background:#fff1f0; border:1px solid #ffd6d2; color:#a32121; padding:11px 12px; border-radius:10px; font-size:13px; line-height:1.5; margin:0 0 18px; }
.login-page .login-footer { margin-top:25px; padding-top:17px; border-top:1px solid #eef2f7; color:#98a2b3; font-size:11px; text-align:center; }
@media(max-width:480px) { .login-page { padding:16px; } .login-page .login-card { padding:25px 22px; border-radius:16px; } .login-page h1 { font-size:23px; } }

/* ============================================================
   UID Toolkit final application shell — single stylesheet
   Header, sidebar, content and footer remain separate regions.
   ============================================================ */
:root {
  --brand-green: #00a85a;
  --brand-green-dark: #00864a;
  --brand-blue: #0086c9;
  --navy: #10243f;
  --line: #dfe7f1;
  --muted: #718096;
  --page-bg: #f2f6fb;
}
html, body { min-height: 100%; }
body { color: var(--navy); background: var(--page-bg); }
.app-shell { min-height: 100vh; align-items: stretch; }
.sidebar {
  width: 200px; flex: 0 0 200px; min-height: 100vh; padding: 22px 10px 16px;
  background: linear-gradient(180deg, #1b2b40 0%, #17283d 100%);
}
.brand { flex-direction: column; justify-content: center; gap: 10px; padding: 0 5px 14px; border: 0; text-align: center; }
.brand-mark { width: 60px; height: 58px; flex-basis: 58px; border-radius: 15px; background: linear-gradient(135deg,#00bd8b,#008d72); font-size: 18px; letter-spacing: -1px; }
.brand-copy { flex: none; align-items: center; }
.brand-copy strong { font-size: 17px; }
.brand-copy small { font-size: 12px; margin-top: 5px; }
.sidebar-utility { display:flex; align-items:center; justify-content:center; gap:12px; padding: 12px 0 17px; margin: 0 12px 10px; border-top: 1px solid #ffffff12; border-bottom: 1px solid #ffffff20; }
.sidebar-utility-button { width: 34px; height: 34px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #ffffff24; border-radius:9px; background:#ffffff08; color:#e5edf6; cursor:pointer; }
.sidebar-utility-button:hover { color:#fff; background:#ffffff18; }
.sidebar-utility-divider { height:25px; width:1px; background:#ffffff24; }
.sidebar-logout-form { margin:0; }
.side-nav { gap: 5px; padding-top: 3px; }
.nav-item { min-height: 44px; border-radius: 9px; padding: 11px 12px; font-size: 13px; font-weight: 550; }
.nav-item.active { background: linear-gradient(100deg,#00a85a,#00b66a); box-shadow: 0 5px 13px #00a85a26; }
.sidebar-bottom { padding-top: 14px; }
.main-area { max-width: none; min-width: 0; min-height: 100vh; padding: 0; display:flex; flex-direction:column; flex:1 1 auto; }
.topbar { flex: 0 0 auto; min-height: 76px; margin: 0; padding: 13px 24px; background:#fff; border-bottom:1px solid var(--line); }
.topbar-title { display:flex; align-items:center; gap:20px; min-width:0; }
.main-menu-toggle { flex:0 0 44px; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; color:var(--navy); background:#f5f7fa; border:1px solid #edf1f6; border-radius:10px; }
.topbar h1 { font-size:23px; line-height:1.2; letter-spacing:-.6px; color:#10243f; }
.eyebrow { display:none; }
.page-subtitle { margin-top:5px; color:#667791; font-size:13px; }
.topbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:18px; }
.local-pill { font-size:12px; color:#61738d; background:#f7fafc; padding:8px 11px; }
.profile-menu { position:relative; }
.profile-trigger { display:flex; align-items:center; gap:10px; padding:3px 0 3px 4px; border:0; background:transparent; color:var(--navy); cursor:pointer; }
.profile-avatar { display:grid; place-items:center; width:39px; height:39px; border-radius:50%; background:#e5ebf3; color:#53647b; font-weight:800; }
.profile-identity { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.profile-identity strong { font-size:13px; font-weight:650; }
.profile-identity small { font-size:11px; color:#718096; }
.profile-chevron { margin-left:2px; }
.profile-dropdown { position:absolute; z-index:120; top:calc(100% + 12px); right:0; width:235px; padding:8px; background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:0 15px 36px #10243f20; }
.profile-dropdown-heading { display:flex; flex-direction:column; gap:4px; padding:11px 12px 13px; border-bottom:1px solid #edf1f6; }
.profile-dropdown-heading strong { font-size:13px; }
.profile-dropdown-heading small { font-size:11px; color:var(--muted); }
.profile-dropdown form { margin:0; }
.profile-dropdown-item { display:flex; align-items:center; gap:10px; width:100%; margin-top:5px; padding:10px 12px; border:0; border-radius:8px; background:transparent; color:#24364d; text-align:left; font:inherit; font-size:13px; cursor:pointer; }
.profile-dropdown-item:hover { background:#f3f6fa; }
.profile-dropdown-item.danger { color:#d92d20; }
.view-panel { flex:1 0 auto; min-width:0; padding:24px; }
.content-card { border:1px solid #e7edf4; border-radius:12px; box-shadow:0 3px 14px #10243f06; }
footer.app-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px; margin-top:auto; padding:13px 24px; border-top:1px solid var(--line); background:#fff; color:#718096; font-size:12px; }
.app-footer code { color:#52637a; }
.about-overlay { position:fixed; z-index:10002; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; background:#10243f66; backdrop-filter:blur(2px); }
.about-overlay.hidden { display:none !important; }
.about-dialog { width:min(100%,440px); padding:24px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 24px 70px #10243f30; }
.about-dialog-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.about-kicker { color:var(--brand-green-dark); font-size:10px; font-weight:800; letter-spacing:1.2px; }
.about-dialog-header h2 { margin:5px 0 0; color:var(--navy); font-size:22px; }
.about-close { border:0; background:transparent; color:#718096; font-size:26px; line-height:1; cursor:pointer; }
.about-description { color:#64748b; font-size:13px; line-height:1.65; margin:15px 0 10px; }
.about-meta { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid #edf1f6; color:#718096; font-size:12px; }
.about-meta strong,.about-meta code { color:#24364d; font-size:12px; }
.about-dialog-actions { display:flex; justify-content:flex-end; margin-top:18px; }
.app-shell.sidebar-collapsed .sidebar { width:68px; flex-basis:68px; padding:18px 8px; }
.app-shell.sidebar-collapsed .brand { padding:0 0 14px; }
.app-shell.sidebar-collapsed .brand-copy,.app-shell.sidebar-collapsed .nav-label { display:none; }
.app-shell.sidebar-collapsed .brand-mark { width:42px; height:42px; flex-basis:42px; font-size:13px; }
.app-shell.sidebar-collapsed .sidebar-utility { flex-direction:column; gap:7px; margin:0 0 10px; }
.app-shell.sidebar-collapsed .sidebar-utility-divider { width:24px; height:1px; }
.app-shell.sidebar-collapsed .nav-item { justify-content:center; padding:10px 8px; }
.app-shell.sidebar-collapsed .main-area { max-width:none; }
@media (max-width: 900px) {
  .sidebar { width:185px; flex-basis:185px; }
  .view-panel { padding:18px; }
  .topbar { padding:12px 18px; }
  .topbar h1 { font-size:20px; }
  .local-pill { display:none; }
  footer.app-footer { flex-wrap:wrap; padding:12px 18px; }
}
@media (max-width: 640px) {
  .sidebar { width:68px; flex-basis:68px; padding:14px 7px; }
  .brand { padding:0 0 12px; }
  .brand-mark { width:42px; height:42px; flex-basis:42px; font-size:13px; }
  .brand-copy,.sidebar .nav-label { display:none; }
  .sidebar-utility { flex-direction:column; gap:7px; margin:0 0 10px; }
  .sidebar-utility-divider { width:24px; height:1px; }
  .nav-item { justify-content:center; padding:10px 7px; }
  .topbar { align-items:flex-start; gap:10px; padding:12px; }
  .topbar-title { gap:10px; }
  .topbar h1 { font-size:17px; }
  .page-subtitle { font-size:11px; }
  .profile-identity,.profile-chevron { display:none; }
  .view-panel { padding:12px; }
  footer.app-footer { align-items:flex-start; flex-direction:column; gap:6px; font-size:11px; }
}

/* Login password visibility control */
.password-field-wrap{position:relative;width:100%}.password-field-wrap .field{padding-right:48px}.password-visibility{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:#64748b;cursor:pointer}.password-visibility:hover{background:#f1f5f9;color:#0f172a}.password-visibility:focus-visible{outline:2px solid #0086c9;outline-offset:2px}.password-eye{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}