/* CITOTEST measurement workspace. Shared by every operational page. */
:root {
  --op-canvas: #f5f8fd;
  --op-sidebar: #ffffff;
  --op-panel: #fff;
  --op-border: #e1e8f2;
  --op-ink: #202b3e;
  --op-muted: #71819a;
  --op-primary: #165dff;
  --op-primary-soft: #eaf2ff;
  --op-success: #167455;
  --op-warn: #9a6519;
  --op-danger: #b53e3e;
  --op-radius: 8px;
  --op-header-height: 64px;
  --op-sidebar-width: 232px;
}
html { scroll-behavior: smooth; }
body { color: var(--op-ink); background: var(--op-canvas); line-height: 1.55; }
a { color: var(--op-primary); }
a:hover { color: #0b3e6d; }
:focus-visible { outline-color: #2879ad; }

/* Stable CRM-style shell. */
.topbar { border-top: 0; border-bottom: 1px solid var(--op-border); box-shadow: none; }
.topbar__brandlogo { width: 112px; height: 30px; object-fit: contain; object-position: left center; }
.topbar__heading strong { font-size: 16px; letter-spacing: .01em; }
.topbar__heading small { color: #687b8d; }
.topbar__action, .account-menu summary { border-radius: 7px; }
.topbar__action:hover, .account-menu summary:hover { background: #edf4f9; }
.avatar { background: #e0edf6; color: #154e7a; }
.side-nav { background: var(--op-sidebar); }
.side-nav__group { margin-bottom: 20px; }
.side-nav__label { padding-left: 14px; color: #687e90; font-weight: 650; }
.side-nav__link { border-radius: 7px; min-height: 42px; }
.side-nav__link:hover { background: #e9f0f6; }
.side-nav__link.is-active { position: relative; background: #e4eff8; color: #154e7a; }
.side-nav__link.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #2371a4; }
.side-nav__foot { color: #51677b; }
.side-nav__foot .status-dot { background: #1b8067; }
.crumb { color: #607286; }
.crumb strong { color: #284960; font-weight: 650; }
.main { max-width: 1680px; padding-top: 10px; }
.page-greeting { color: #122f49; font-size: clamp(23px, 2vw, 29px); font-weight: 700; letter-spacing: -.025em; }
.page-sub { color: #617588; }
.page-head, .page-header { margin-bottom: 22px; }
.page-head__actions { gap: 10px; }

/* Surfaces and numbers. */
.card, .kpi { border: 1px solid var(--op-border); border-radius: 9px; background: var(--op-panel); box-shadow: 0 2px 10px #19324b08; }
.card__head { border-bottom: 1px solid #e6edf2; background: #fbfcfd; }
.card__head h2 { font-size: 14px; color: #223e56; font-weight: 650; }
.card__head h2 i { color: #567d9b; }
.card__note { color: #687b8e; }
.kpi { min-height: 134px; padding: 20px 22px; }
.kpi__label { color: #5e7184; font-weight: 550; }
.kpi__value { color: #143953; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.kpi__hint { color: #697d8e; }
.kpi--live { border-color: #c3d7e6; background: #fafdff; }
.kpi--live .kpi__value { color: #195b88; }
.metric__num { color: #193d59; font-variant-numeric: tabular-nums; }
.metric__unit { color: #6a7d8f; }
.live-status { border-radius: 8px; border-color: #d4e2ec; background: #eef5fa; }
.live-status.is-offline { border-color: #e7d9bb; background: #fff9ed; }
.live-status__message { color: #576c80; }

/* Controls share one height and visible focus treatment. */
.btn { min-height: 40px; border-radius: 7px; background: #185a92; border-color: #185a92; font-weight: 600; gap: 7px; }
.btn:hover { background: #104674; border-color: #104674; }
.btn--ghost { background: #fff; color: #285272; border-color: #cbd9e4; }
.btn--ghost:hover { background: #edf4f9; border-color: #a7c3d5; color: #164b75; }
.btn--text { background: transparent; border-color: transparent; color: #185a92; }
.btn--text:hover { background: #eaf2f8; border-color: transparent; }
.btn--sm { min-height: 32px; padding: 0 11px; }
.field label { display: block; margin-bottom: 7px; color: #304d65; font-weight: 600; }
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea,
.toolbar input, .toolbar select { border: 1px solid #cbd9e4; border-radius: 7px; background: #fff; color: #18364f; }
.field input:not([type=checkbox]):not([type=radio]):focus, .field select:focus, .field textarea:focus,
.toolbar input:focus, .toolbar select:focus { border-color: #2879ad; outline: 3px solid #2879ad2b; outline-offset: 0; }
.field__hint, .hint { color: #64788a; line-height: 1.6; }
.toolbar { align-items: end; gap: 12px; }
.form-actions { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.details-card > summary { color: #24445e; font-weight: 650; }
.details-card > summary:hover { background: #f5f9fc; }
.flash, .notice { border-radius: 8px; }
.flash--ok { border-color: #bddfcf; background: #eef9f3; }
.flash--error { border-color: #e8c4c4; background: #fff2f2; }
.badge { border-radius: 5px; font-weight: 600; }
.row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.empty, .empty-state { padding: 42px 24px; }

/* Data tables remain readable on workstation and tablet widths. */
.table-wrap { border-radius: 0 0 8px 8px; scrollbar-color: #c0cfdb transparent; }
table.data-table { font-size: 13px; }
table.data-table th { color: #3e586f; font-weight: 650; background: #f0f5f8; border-bottom: 1px solid #dce6ed; }
table.data-table th:first-child { background: #f0f5f8; }
table.data-table td { color: #243d54; }
table.data-table tbody tr:nth-child(even) td { background: #fbfcfd; }
table.data-table tbody tr:hover td { background: #eef5fa; }
table.data-table .num, .mono { font-variant-numeric: tabular-nums; }
.table-footer { background: #fbfcfd; }

/* Imported certificate flow. */
.workspace-column { max-width: 900px; }
.file-drop { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 20px; border: 1px dashed #86a9c3; border-radius: 9px; background: #f7fafc; color: #4f667b; cursor: pointer; text-align: center; }
.file-drop:hover, .file-drop:focus-within { border-color: #185a92; background: #f0f7fb; }
.file-drop > i { font-size: 27px; color: #3978a5; }
.file-drop strong { color: #21425e; font-size: 15px; }
.file-drop input { max-width: 100%; margin-top: 7px; }
.selected-files { min-height: 26px; margin-top: 14px; color: #516a80; overflow-wrap: anywhere; }
.plain-list { margin: 0; padding-left: 20px; color: #405b70; line-height: 1.9; }
.cert-original-card { max-width: 900px; margin-inline: auto; }
.cert-original-card .kv { margin-bottom: 22px; }

/* Public search follows familiar enterprise verification pages. */
.page-public .topbar { padding-inline: max(20px, calc((100vw - 1200px) / 2)); }
.page-public .topbar { background: #fff; }
.page-public .topbar__brand { gap: 18px; }
.page-public .topbar__heading { padding-left: 18px; border-left: 1px solid #dce4ef; }
.certificate-query .query-hero { border-color: #d4e0e8; border-radius: 10px; padding: 34px; box-shadow: 0 3px 16px #15344d08; }
.certificate-query .query-hero h1 { color: #163a58; font-size: 28px; }
.certificate-query .query-hero h1 span { margin-left: 8px; color: #617d93; font-size: 16px; font-weight: 500; }
.certificate-query .query-form input { min-height: 48px; font-size: 16px; }
.certificate-query .query-form .btn { min-height: 48px; }
.certificate-query .query-results-title { font-size: 20px; color: #173c58; }
.certificate-query .query-results-title [lang=en], .certificate-query .empty-state [lang=en] { font-size: .7em; color: #71879a; font-weight: 500; }
.certificate-query .lookup-verdict { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 17px 20px; border: 1px solid #badbcf; border-radius: 9px; background: #f0faf5; color: #1e644c; }
.certificate-query .lookup-verdict > i { font-size: 22px; }
.certificate-query .lookup-verdict > div { flex: 1; display: grid; gap: 3px; }
.certificate-query .lookup-verdict strong { font-size: 15px; }
.certificate-query .lookup-verdict strong span { margin-left: 6px; font-size: 12px; font-weight: 500; }
.certificate-query .lookup-verdict > div > span { font-size: 12px; }
.certificate-query .lookup-verdict b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #d9f0e5; font-size: 13px; }
.certificate-query .query-hero .en-line, .en-line { display: block; margin-top: 4px; color: #72869a; font-size: .9em; line-height: 1.55; }
.certificate-query [lang=en] { letter-spacing: 0; }
.certificate-query table.data-table th small { display: block; margin-top: 3px; color: #75899b; font-size: 11px; font-weight: 450; }
.certificate-query .result-list { display: grid; gap: 14px; margin-bottom: 22px; }
.certificate-query .result-card { border: 1px solid #cbdde8; border-radius: 10px; background: #fff; overflow: hidden; }
.certificate-query .result-card__head { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid #e3eaf0; background: #f7fafc; }
.certificate-query .result-card__head h3 { margin: 0; font-size: 16px; color: #163b58; }
.certificate-query .result-card__body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 22px; }
.certificate-query .result-card__body dl { margin: 0; min-width: 0; }
.certificate-query .result-card__body dt { margin: 0 0 5px; color: #687d90; font-size: 12px; }
.certificate-query .result-card__body dt small { display: block; font-size: 11px; font-weight: 400; }
.certificate-query .result-card__body dd { margin: 0; color: #1e3c54; font-size: 14px; overflow-wrap: anywhere; }
.certificate-query .result-card__actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid #e7edf2; }
.certificate-query .query-help-panel { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 0 0 22px; }
.certificate-query .query-help-panel article { padding: 20px; border: 1px solid var(--op-border); border-radius: 9px; background: #fff; }
.certificate-query .query-help-panel strong { display: block; color: #244760; font-size: 14px; }
.certificate-query .query-help-panel p { margin: 8px 0 0; color: #5d7387; font-size: 12px; line-height: 1.65; }

/* CRM report workspace shell: same brand rail, navigation, task tabs and canvas. */
body:not(.page-public) .topbar {
  width: calc(100% - var(--op-sidebar-width));
  height: var(--op-header-height);
  margin-left: var(--op-sidebar-width);
  padding: 0 28px;
  gap: 16px;
  background: #fff;
}
body:not(.page-public) .topbar__brand {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 121;
  width: var(--op-sidebar-width);
  height: var(--op-header-height);
  padding: 10px 20px;
  background: #fff;
  border-right: 1px solid #e7edf5;
}
.workspace-brand { display: flex; align-items: center; gap: 11px; color: #0758e5; white-space: nowrap; }
.workspace-brand svg { width: 34px; height: 38px; flex: none; }
.workspace-brand strong { display: block; font: 700 25px/1.05 "Segoe UI", sans-serif; letter-spacing: -.7px; }
.workspace-brand small { display: block; margin-top: 4px; color: #6a87ba; font-size: 12px; font-weight: 500; letter-spacing: 1px; }
.workspace-breadcrumb { display: flex; align-items: center; gap: 12px; min-width: 0; color: #7c8da5; white-space: nowrap; font-size: 13px; }
.workspace-breadcrumb a { color: #7c8da5; font-size: 17px; }
.workspace-breadcrumb strong { color: #253247; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
body:not(.page-public) .topbar__utility { gap: 6px; }
body:not(.page-public) .topbar__action { min-height: 34px; border: 1px solid #dce4ef; background: #fff; color: #4c5d76; font-size: 12px; font-weight: 500; }
body:not(.page-public) .topbar__action:hover { color: #165dff; background: #f5f8fd; }
body:not(.page-public) .topbar__username { min-width: 0; padding: 6px 12px; border-radius: 18px; background: #eef3f9; color: #506c91; }
body:not(.page-public) .side-nav {
  top: var(--op-header-height);
  z-index: 120;
  display: block;
  padding: 0 12px 22px;
  background: #fff;
}
body:not(.page-public) .side-nav__switch { margin: 18px 6px 12px; padding: 0; border: 0; border-radius: 6px; background: #f0f3f8; }
body:not(.page-public) .side-nav__switch button { min-height: 34px; font-size: 13px; }
body:not(.page-public) .side-nav__switch button.is-active { border-radius: 6px; background: #165dff; color: #fff; }
body:not(.page-public) .side-nav__group { margin: 14px 0 24px; }
body:not(.page-public) .side-nav__label { padding: 0 12px 8px; color: #8390a5; font-size: 11px; font-weight: 500; letter-spacing: 0; }
body:not(.page-public) .side-nav__link { min-height: 42px; padding: 0 12px; color: #697e9c; font-size: 14px; font-weight: 500; }
body:not(.page-public) .side-nav__link:hover { background: #f5f8fd; color: #0758e5; }
body:not(.page-public) .side-nav__link.is-active { background: #e6efff; color: #0758e5; font-weight: 600; box-shadow: none; }
body:not(.page-public) .side-nav__link.is-active::before { display: none; }
body:not(.page-public) .side-nav__link.is-active i { color: #2b86f7; }
.side-nav__link.is-frequent-hidden, .side-nav__group.is-frequent-hidden { display: none !important; }
body:not(.page-public) .side-nav__foot { position: static; margin: 36px 12px 0; padding-top: 12px; font-size: 11px; }
.app-task-tabs {
  position: sticky;
  top: var(--op-header-height);
  z-index: 100;
  height: 48px;
  margin-left: var(--op-sidebar-width);
  display: flex;
  align-items: stretch;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid #e1e8f2;
}
.app-task-tabs__list { min-width: 0; flex: 1; display: flex; align-items: stretch; overflow-x: auto; }
.app-task-tab { position: relative; display: flex; align-items: center; color: #6e829d; }
.app-task-tab a { display: flex; align-items: center; height: 100%; padding: 0 20px; color: inherit; text-decoration: none; white-space: nowrap; }
.app-task-tab.is-active { background: #ecf3fd; color: #2377cb; font-weight: 600; }
.app-task-tab.is-active::after { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #165dff; content: ""; }
.app-task-tabs__actions { display: flex; align-items: center; padding-left: 10px; }
.app-task-tabs__refresh { width: 32px; height: 32px; border: 0; border-radius: 5px; background: transparent; color: #6e829d; cursor: pointer; }
.app-task-tabs__refresh:hover { background: #eef3fb; color: #165dff; }
body:not(.page-public) .main { max-width: none; padding: 26px 32px 38px; }
body:not(.page-public) .footer { margin-left: var(--op-sidebar-width); text-align: center; }
.page-greeting { color: #202b3e; font-size: 28px; font-weight: 650; }
.page-sub { color: #8390a5; }
.workspace-modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 28px 0 30px; }
.workspace-module { min-height: 150px; padding: 22px 20px; border: 1px solid #e5edf7; border-radius: 7px; background: #fff; color: #203a5a; text-decoration: none; }
.workspace-module:hover { border-color: #b9d0f5; box-shadow: 0 3px 10px #2d5f9e10; text-decoration: none; }
.workspace-module__title { display: flex; align-items: center; gap: 14px; }
.workspace-module__title i { width: 21px; color: #2868b7; font-size: 20px; text-align: center; }
.workspace-module__title strong { color: #1f3c61; font-size: 16px; font-weight: 650; }
.workspace-module p { min-height: 34px; margin: 18px 0 8px 35px; color: #8494ae; font-size: 12px; line-height: 1.5; }
.workspace-module > span { display: inline-block; margin-left: 35px; padding: 2px 7px; border-radius: 3px; background: #e6f5f2; color: #288675; font-size: 10px; }
.workspace-section-title { margin: 0 0 16px; color: #24344d; font-size: 20px; font-weight: 650; }
.card, .kpi { border: 1px solid #e5edf7; border-radius: 10px; box-shadow: 0 2px 7px #2d5f9e05; }
.card__head { background: #fff; }
.kpi { min-height: 126px; background: #fff; }
.kpi--live { background: #fff; }
.kpi__value, .kpi--live .kpi__value { color: #202b3e; }
.metric__addr { display: inline; }
.metric__num { color: #202b3e; }
.btn { background: #165dff; border-color: #165dff; }
.btn:hover { background: #0d51e8; border-color: #0d51e8; }
.btn--ghost { background: #fff; border-color: #dce4ef; color: #4c5d76; }
.btn--ghost:hover { background: #f5f8fd; border-color: #bfcce0; color: #165dff; }
.btn--danger { background: #fff; border-color: #eec9c4; color: var(--op-danger); }
.btn--danger:hover { background: #fff1ef; border-color: #ce837b; color: var(--op-danger); }
.btn--text { background: transparent; border-color: transparent; color: #165dff; }
.btn--text:hover { background: #eaf2ff; border-color: transparent; color: #0d51e8; }
a.btn:not(.btn--ghost):not(.btn--danger):not(.btn--text) { color: #fff; }
table.data-table th, table.data-table th:first-child { background: #f1f4f9; color: #34425a; }
table.data-table tbody tr:hover td { background: #f5f8fd; }
@media(max-width:1180px) {
  .workspace-breadcrumb > span { display: none; }
  body:not(.page-public) .topbar__password span { display: none; }
  .workspace-modules { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media(max-width:1000px) {
  body:not(.page-public) .topbar { width: 100%; margin-left: 0; padding: 0 16px; }
  body:not(.page-public) .topbar__brand { display: none; }
  body:not(.page-public) .side-nav { width: 240px; }
  .app-task-tabs { margin-left: 0; }
  body:not(.page-public) .main { margin-left: 0; }
  body:not(.page-public) .footer { margin-left: 0; }
  .workspace-modules { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media(max-width:620px) {
  body:not(.page-public) .topbar { gap: 10px; padding: 0 12px; }
  .workspace-breadcrumb { flex: 1; }
  .workspace-breadcrumb > a, .topbar__query, .topbar__password { display: none !important; }
  .workspace-breadcrumb strong { max-width: 110px; }
  body:not(.page-public) .topbar__action { padding: 0 9px; }
  body:not(.page-public) .topbar__username { max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
  body:not(.page-public) .main { padding: 18px 14px 30px; }
  .app-task-tabs { padding: 0 8px; }
  .workspace-modules { gap: 10px; margin: 20px 0 26px; }
  .workspace-module { min-height: 0; padding: 15px; }
  .workspace-module__title { gap: 8px; }
  .workspace-module__title i { width: 16px; font-size: 15px; }
  .workspace-module__title strong { font-size: 13px; }
  .workspace-module p { min-height: 0; margin: 8px 0 0 24px; font-size: 11px; }
  .workspace-module > span { display: none; }
}
@media print {
  .app-task-tabs { display: none !important; }
  body:not(.page-public) .main { margin: 0; padding: 0; }
}