/*
 * E-HAMKOR — asosiy platforma stillari (app-base.css)
 * 
 * 12 ta eski faylning birlashtirilgani: style, readability, product-v2, shell-polish,
 * account-management, professional-core, organizational-polish, design-system-2026,
 * dashboard-refinement, dashboard-executive, sidebar-navigation, secondary-pages.
 * Aynan avvalgi yuklanish tartibida - ko'rinish o'zgarmaydi. Bir xil (so'zma-so'z
 * takrorlangan) qoidalar olib tashlandi. Har bir bo'lim manba faylini ko'rsatadi.
 * 
 * base.html da bu fayl faqat poydevor sifatida birinchi yuklanadi.
 * Komponent, tema va sahifaga xos qoidalar undan keyin keladi.
 */


/* ===== style.css ===== */
:root {
  --blue: #1c5f8c;
  --gold: #a9863f;
  --ink: #16232f;
  --text: #3c4956;
  --muted: #69747f;
  --line: #e1e5ea;
  --soft: #f5f5f2;
  --white: #fff;
  --red: #9c3b3b;
  --amber: #a15d12;
  --green: #1f7a5c;
  --eh-green: #1f7a5c;
  --eh-blue: #1c5f8c;
  --eh-bg: #f5f5f2;
  --eh-text: #16232f;
  --eh-white: #fff;
  --eh-blue-600: #1c5f8c;
  --eh-teal-600: #1f7a5c;
  --eh-green-600: #1f7a5c;
  --eh-gold-500: #a9863f;
  --eh-red-600: #9c3b3b;
  --eh-amber-600: #a15d12;
  --eh-ink: #16232f;
  --eh-muted: #69747f;
  --eh-subtle: #8493a3;
  --eh-line: #e1e5ea;
  --eh-line-soft: #edf0f3;
  --eh-canvas: #f5f5f2;
  --eh-surface: #fff;
  --eh-radius: 10px;
  --eh-shadow: 0 8px 24px rgba(13, 39, 67, .07);
  --eh-font: Inter, "Segoe UI", system-ui, Arial, sans-serif
}

body {
  margin: 0;
  background: var(--soft);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif
}

button,
a {
  cursor: pointer
}

.brand-mark {
  width: 42px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #d2b06d;
  color: #e1c486;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  clip-path: polygon(50% 0, 95% 15%, 90% 72%, 50% 100%, 10% 72%, 5% 15%)
}

/* Login */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(400px, .75fr);
  background: #fff
}

.login-context {
  min-width: 0;
  background: var(--ui-navy-900);
  color: #fff;
  padding: 42px clamp(38px, 5vw, 78px) 34px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden
}

.login-context:after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -45%;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  border: 1px solid #fff1;
  box-shadow: 0 0 0 90px #fff08, 0 0 0 180px #fff04
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1
}

.login-brand strong {
  font-size: 20px;
  letter-spacing: 3px
}

.login-brand small {
  font-size: 9px;
  color: #9eb4c6;
  text-transform: uppercase;
  letter-spacing: .9px;
  margin-top: 5px
}

.login-hero {
  margin-top: auto;
  position: relative;
  z-index: 1
}

.eyebrow {
  display: block;
  color: #85b8da;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  margin-bottom: 14px
}

.login-hero h1 {
  font-family: Georgia, serif;
  font-size: clamp(36px, 3.5vw, 54px);
  font-weight: 400;
  line-height: 1.13;
  letter-spacing: -1px;
  margin: 0 0 20px
}

.login-hero p {
  max-width: 650px;
  color: #b6c7d4;
  font-size: 14px;
  line-height: 1.7;
  margin: 0
}

.login-flow {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr;
  align-items: center;
  margin: 48px 0 42px;
  position: relative;
  z-index: 1
}

.login-flow article {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0
}

.login-flow article>b {
  flex: 0 0 36px;
  height: 36px;
  border: 1px solid #668198;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #e0c481;
  font-size: 10px
}

.login-flow article span strong,
.login-flow article span small {
  display: block
}

.login-flow article span strong {
  font-size: 11px
}

.login-flow article span small {
  font-size: 9px;
  color: #8ea8bb;
  margin-top: 4px
}

.login-flow>i {
  height: 1px;
  background: #58738a;
  position: relative
}

.login-flow>i:after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  border-left: 5px solid #58738a;
  border-block: 3px solid transparent
}

.login-assurance {
  border-top: 1px solid #ffffff19;
  padding-top: 22px;
  display: flex;
  gap: 34px;
  position: relative;
  z-index: 1
}

.login-assurance span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #a9bdcb
}

.login-assurance b {
  width: 7px;
  height: 7px;
  border: 1px solid #d5b875;
  transform: rotate(45deg)
}

.login-panel {
  display: grid;
  place-items: center;
  padding: 50px clamp(35px, 5vw, 72px);
  background: #fff
}

.login-box {
  width: min(390px, 100%)
}

.login-box h2 {
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  margin: 0 0 9px
}

.login-lead {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 31px
}

.login-error {
  padding: 12px 14px;
  border-left: 3px solid var(--red);
  background: #fbefef;
  color: #923939;
  font-size: 11px;
  margin-bottom: 18px
}

.login-form>label {
  display: block;
  font-size: 11px;
  font-weight: 650;
  color: #344657;
  margin: 19px 0 8px
}

.field {
  height: 49px;
  display: flex;
  align-items: center;
  border: 1px solid #cfd8df;
  border-radius: 4px;
  background: #fff
}

.field:focus-within {
  border-color: #3b729b;
  box-shadow: 0 0 0 3px #1c5d8d12
}

.field input {
  height: 100%;
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  padding: 0 14px;
  background: transparent;
  font-size: 12px
}

.field>span {
  font-size: 9px;
  font-weight: 700;
  color: #8794a0;
  padding: 0 14px
}

.field button {
  border: 0;
  background: transparent;
  padding: 0 14px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 650
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 17px 0 23px;
  font-size: 10px
}

.login-options label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #667686
}

.login-options a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600
}

.login-submit {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 4px;
  padding: 0 17px;
  background: var(--ui-navy-800);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: left
}

.login-submit span {
  float: right;
  font-size: 17px;
  line-height: 12px
}

.login-submit:hover {
  background: #0b2f4c
}

.login-help {
  margin-top: 32px;
  padding: 15px;
  border: 1px solid var(--line);
  background: #f8fafb;
  text-align: center
}

.login-help strong,
.login-help span {
  display: block
}

.login-help strong {
  font-size: 10px
}

.login-help span {
  font-size: 9px;
  color: var(--muted);
  margin-top: 5px
}

.legal-note {
  display: block;
  color: #9aa4ad;
  text-align: center;
  font-size: 8px;
  line-height: 1.5;
  margin-top: 27px
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 250px;
  background: var(--ui-navy-900);
  color: #b9c7d2;
  padding: 0 15px 18px;
  z-index: 50;
  display: flex;
  flex-direction: column
}

.brand {
  height: 78px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 9px;
  text-decoration: none;
  border-bottom: 1px solid #ffffff14
}

.brand .brand-mark {
  width: 37px;
  height: 41px;
  font-size: 10px
}

.brand strong,
.brand small {
  display: block
}

.brand strong {
  color: #fff;
  font-size: 16px;
  letter-spacing: 2px
}

.brand small {
  font-size: 8px;
  color: #8098aa;
  margin-top: 4px
}

.workspace-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #668298;
  margin: 23px 13px 8px
}

.side-nav a {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 12px;
  border-radius: 3px;
  text-decoration: none;
  color: #aebfcb;
  font-size: 11px;
  margin: 2px 0
}

.side-nav a:hover,
.side-nav a.active {
  background: #ffffff0c;
  color: #fff
}

.side-nav a.active {
  box-shadow: inset 2px 0 var(--gold)
}

.nav-symbol {
  width: 20px;
  text-align: center;
  color: #93a9b9;
  font-size: 15px
}

.side-nav a.active .nav-symbol {
  color: #dfc383
}

.nav-count {
  margin-left: auto;
  background: #b58b44;
  color: #fff;
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 9px
}

.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid #ffffff14;
  padding: 18px 11px 3px;
  display: flex;
  gap: 9px;
  align-items: center
}

.security-dot {
  width: 8px;
  height: 8px;
  border: 2px solid #59a97e;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #59a97e20
}

.sidebar-footer strong {
  font-size: 9px;
  color: #d4dee5
}

.sidebar-footer small {
  font-size: 8px;
  color: #728da1;
  margin-top: 3px
}

.main-area {
  margin-left: 250px;
  min-width: 0
}

.topbar {
  height: 65px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 27px;
  position: sticky;
  top: 0;
  z-index: 40
}

.top-search {
  height: 37px;
  width: min(530px, 48vw);
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  background: #f8fafb;
  border-radius: 3px;
  padding: 0 11px
}

.top-search>span {
  font-size: 19px;
  color: #788894
}

.top-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: 0;
  padding: 0 9px;
  font-size: 10px
}

.top-search kbd {
  font: 8px "Segoe UI";
  color: #8c98a2;
  border: 1px solid #d7dee4;
  background: #fff;
  border-radius: 3px;
  padding: 3px 5px
}

.top-actions {
  margin-left: auto;
  display: flex;
  align-items: center
}

.notification {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  text-decoration: none;
  position: relative;
  color: #536576
}

.notification b {
  position: absolute;
  right: -4px;
  top: -5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #a74040;
  color: #fff;
  border: 2px solid #fff;
  font-size: 7px
}

.account-menu {
  position: relative;
  margin-left: 13px
}

.account-button {
  border: 0;
  background: transparent;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left
}

.avatar {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e5ebf0;
  color: var(--ui-navy-900);
  font-size: 9px;
  font-weight: 700
}

.account-copy strong {
  font-size: 10px
}

.account-copy small {
  font-size: 8px;
  color: #7e8c98;
  margin-top: 3px
}

.account-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 50px;
  width: 230px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 15px 35px #0b29421f;
  border-radius: 4px;
  overflow: hidden
}

.account-dropdown>div {
  padding: 15px;
  border-bottom: 1px solid var(--line)
}

.account-dropdown strong {
  font-size: 10px
}

.account-dropdown small {
  font-size: 8px;
  color: var(--muted);
  margin-top: 4px
}

.account-dropdown a,
.account-dropdown button {
  display: block;
  width: 100%;
  border: 0;
  background: #fff;
  padding: 11px 15px;
  text-align: left;
  text-decoration: none;
  font-size: 10px
}

.account-dropdown a:hover,
.account-dropdown button:hover {
  background: #f4f6f8
}

.account-dropdown form {
  border-top: 1px solid var(--line)
}

.account-dropdown form button {
  color: var(--red)
}

.content {
  padding: 26px clamp(18px, 2.4vw, 36px);
  max-width: 1700px;
  margin: auto
}

.message {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  margin-bottom: 18px;
  background: #eaf5ef;
  border-left: 3px solid var(--green);
  font-size: 10px
}

.message.error {
  background: #faeded;
  border-color: var(--red)
}

.message button {
  border: 0;
  background: transparent
}

/* Dashboard and registry */
.page-title,
.page-heading,
.editor-heading,
.document-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px
}

.breadcrumb,
.page-title div>p:first-child,
.page-heading p,
.editor-heading p,
.document-heading>div>p {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.3px;
  color: #8b6b31;
  margin: 0 0 8px
}

.page-title h1,
.page-heading h1,
.editor-heading h1,
.document-heading h1 {
  font: 400 27px Georgia, serif;
  margin: 0 0 6px
}

.page-title p,
.page-heading>div>span,
.editor-heading>div>span,
.document-heading>div>span {
  font-size: 10px;
  color: var(--muted);
  margin: 0
}

.primary-btn,
.button-primary,
.button-secondary,
.button-danger {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 3px;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid transparent
}

.primary-btn,
.button-primary {
  background: var(--ui-navy-800);
  color: #fff
}

.button-secondary {
  background: #fff;
  color: #354b5e;
  border-color: #cbd5dd
}

.button-danger {
  background: #fff3f3;
  color: var(--red);
  border-color: #e4bcbc
}

.full {
  width: 100%;
  margin-top: 8px
}

.work-queue {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--line);
  background: #fff;
  margin-bottom: 16px
}

.queue-card {
  min-width: 0;
  padding: 16px 17px;
  text-decoration: none;
  border-right: 1px solid var(--line);
  border-top: 3px solid transparent
}

.queue-card:last-child {
  border-right: 0
}

.queue-card:hover {
  background: #fafbfd
}

.queue-card>span,
.queue-card>strong,
.queue-card>small {
  display: block
}

.queue-card>span {
  font-size: 9px;
  color: #657583;
  font-weight: 650
}

.queue-card>strong {
  font: 400 25px Georgia, serif;
  margin: 7px 0 4px
}

.queue-card>small {
  font-size: 7.5px;
  color: #929ca5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.queue-card.urgent {
  border-top-color: var(--blue)
}

.queue-card.success {
  border-top-color: var(--green)
}

.queue-card.warning {
  border-top-color: var(--amber)
}

.queue-card.danger {
  border-top-color: var(--red)
}

.queue-card.danger strong {
  color: var(--red)
}

.registry-card,
.content-card,
.side-card {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 4px #0b294207
}

.registry-header,
.card-header {
  min-height: 70px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line)
}

.registry-header h2,
.card-header h2 {
  font-size: 13px;
  margin: 0 0 5px
}

.registry-header p,
.card-header p {
  font-size: 8px;
  color: var(--muted);
  margin: 0
}

.registry-tools {
  display: flex;
  gap: 8px
}

.registry-tools select,
.registry-tools button {
  height: 34px;
  border: 1px solid #cfd7de;
  background: #fff;
  padding: 0 10px;
  font-size: 9px;
  color: #526473
}

.registry-tabs {
  height: 45px;
  display: flex;
  align-items: end;
  gap: 24px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line)
}

.registry-tabs a {
  height: 45px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 9px;
  color: #667684;
  border-bottom: 2px solid transparent
}

.registry-tabs a.active {
  color: var(--ui-navy-900);
  font-weight: 700;
  border-color: var(--ui-navy-900)
}

.registry-tabs b {
  font-size: 7px;
  background: #e8edf1;
  padding: 2px 5px;
  border-radius: 8px
}

.table-wrap {
  overflow: auto
}

.registry-table,
.document-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1050px
}

.registry-table th,
.document-table th {
  text-align: left;
  background: #f7f9fa;
  color: #71808d;
  font-size: 7px;
  letter-spacing: .65px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line)
}

.registry-table td,
.document-table td {
  padding: 13px;
  border-bottom: 1px solid #e9edf0;
  font-size: 9px;
  color: #455767;
  vertical-align: middle
}

.registry-table tbody tr:hover,
.document-table tbody tr:hover {
  background: #fafbfc
}

.registry-table td strong,
.registry-table td small,
.document-table td b,
.document-table td span {
  display: block
}

.registry-table td strong {
  font-size: 9px
}

.registry-table td small {
  font-size: 7.5px;
  color: #89959f;
  margin-top: 4px
}

.doc-number {
  display: block;
  color: var(--blue);
  font-weight: 750;
  text-decoration: none;
  font-size: 10px
}

.doc-subject {
  display: block;
  max-width: 360px;
  color: #24394b;
  font-weight: 650;
  text-decoration: none;
  line-height: 1.35
}

.status-tag,
.workflow-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  padding: 5px 8px;
  font-size: 7.5px;
  font-style: normal;
  font-weight: 700;
  background: #edf1f4;
  color: #536676;
  white-space: nowrap
}

.status-tag i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor
}

.s-draft,
.s-returned_leader,
.s-returned_prosecutor,
.s-response_returned {
  background: #f7efe2;
  color: #88621d
}

.s-leader_review,
.s-prosecutor_review,
.s-response_review {
  background: #e7eff6;
  color: #285d85
}

.s-sent_foreign,
.s-received_foreign,
.s-response_draft {
  background: #e7f2f6;
  color: #246a86
}

.s-response_delivered,
.s-closed {
  background: #e7f3ec;
  color: #286e51
}

.s-rejected {
  background: #f7e8e8;
  color: #9b3d3d
}

.deadline-red {
  color: var(--red) 
}

.deadline-amber {
  color: var(--amber) 
}

.deadline-green {
  color: var(--green) 
}

.muted {
  font-size: 8px;
  color: #929da6
}

.row-action {
  display: grid;
  place-items: center;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 1px
}

.registry-footer {
  height: 43px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #88959f;
  font-size: 8px
}

.empty-state {
  text-align: center ;
  padding: 40px 
}

.empty-state strong,
.empty-state span {
  display: block
}

.empty-state span {
  margin-top: 5px;
  color: var(--muted)
}

/* Document detail */
.document-heading a,
.editor-heading a {
  display: block;
  color: var(--blue);
  font-size: 9px;
  text-decoration: none;
  margin-bottom: 13px
}

.document-heading-actions {
  display: flex;
  align-items: center;
  gap: 10px
}

.export-menu {
  display: flex;
  border: 1px solid var(--line)
}

.export-menu a {
  margin: 0;
  padding: 8px 10px;
  border-left: 1px solid var(--line);
  font-weight: 700
}

.export-menu a:first-child {
  border: 0
}

.workflow-track {
  background: #fff;
  border: 1px solid var(--line);
  padding: 15px 22px;
  display: flex;
  align-items: flex-start;
  margin-bottom: 17px
}

.workflow-track>div {
  text-align: center;
  width: 78px
}

.workflow-track>div i {
  width: 25px;
  height: 25px;
  border: 1px solid #cbd4dc;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: auto;
  font-style: normal;
  font-size: 8px;
  background: #fff
}

.workflow-track>div span {
  display: block;
  font-size: 7px;
  color: #7c8a96;
  margin-top: 6px
}

.workflow-track>div.completed i {
  background: var(--ui-navy-800);
  border-color: var(--ui-navy-800);
  color: #fff
}

.workflow-track>div.completed span {
  font-weight: 700;
  color: #34495b
}

.workflow-track>b {
  height: 1px;
  background: #d7dee4;
  flex: 1;
  margin-top: 12px
}

.document-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 17px
}

.paper-card {
  background: #fff;
  border: 1px solid #d2d9df;
  box-shadow: 0 4px 14px #0b294209;
  padding: 48px 58px;
  margin-bottom: 17px;
  min-height: 650px
}

.paper-recipient {
  width: 45%;
  margin-left: auto;
  text-align: right;
  min-height: 60px
}

.paper-recipient small,
.paper-recipient b,
.paper-recipient span {
  display: block
}

.paper-recipient small {
  font-size: 7px;
  letter-spacing: .7px;
  color: #82909b;
  margin-bottom: 7px
}

.paper-recipient b {
  font-size: 11px
}

.paper-recipient span {
  font-size: 9px;
  color: var(--muted);
  margin-top: 4px
}

.paper-meta {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #c8d0d7;
  margin-top: 25px;
  padding-top: 10px;
  font-size: 9px
}

.paper-card>h2 {
  text-align: center;
  text-transform: uppercase;
  font: 600 14px/1.5 Georgia, serif;
  margin: 37px 0 25px
}

.paper-body {
  font: 12px/1.8 Georgia, serif;
  text-align: justify;
  min-height: 230px
}

.paper-basis {
  border-top: 1px solid #dce2e7;
  margin-top: 25px;
  padding-top: 15px
}

.paper-basis b {
  font-size: 9px
}

.paper-basis p {
  font: 10px/1.6 Georgia, serif;
  color: #566879
}

.paper-signature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 48px;
  font-size: 10px
}

.paper-signature b:last-child {
  text-align: right
}

.paper-label {
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--gold);
  font-weight: 700
}

.response-paper {
  border-top: 3px solid var(--gold)
}

.document-side {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.side-card {
  padding: 16px
}

.side-card h3 {
  font-size: 10px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line)
}

.side-card p,
.side-card li {
  font-size: 8.5px;
  line-height: 1.55;
  color: #657687
}

.action-card details {
  margin-top: 9px;
  border-top: 1px solid var(--line);
  padding-top: 9px
}

.action-card summary {
  font-size: 8px;
  color: #765a2d
}

.action-card textarea,
.action-card input,
.action-card select {
  width: 100%;
  border: 1px solid var(--line);
  padding: 8px;
  font-size: 8px;
  margin-top: 8px
}

.info-card dl {
  margin: 0
}

.info-card dl div {
  padding: 8px 0;
  border-bottom: 1px solid #e9edf0
}

.info-card dt {
  font-size: 7px;
  color: #89959f
}

.info-card dd {
  font-size: 8.5px;
  font-weight: 650;
  margin: 3px 0 0
}

.version-list a {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e9edf0;
  text-decoration: none
}

.version-list>a>span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #edf1f4;
  font-size: 8px;
  font-weight: 700
}

.version-list b,
.version-list small,
.audit-mini b,
.audit-mini span {
  display: block
}

.version-list b,
.audit-mini b {
  font-size: 8px
}

.version-list small,
.audit-mini span {
  font-size: 7px;
  color: #89959f;
  margin-top: 3px
}

.audit-mini article {
  display: flex;
  gap: 8px;
  padding: 8px 0
}

.audit-mini article>i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  margin-top: 3px
}

.comment-form {
  padding: 15px;
  display: flex;
  gap: 10px
}

.comment-form textarea {
  flex: 1;
  border: 1px solid var(--line);
  padding: 9px;
  font-size: 9px
}

.comment-list {
  padding: 0 15px 15px
}

.comment-list article {
  display: flex;
  gap: 10px;
  padding: 13px 0;
  border-top: 1px solid #e9edf0
}

.comment-list article>span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e7edf1;
  font-size: 8px;
  font-weight: 700
}

.comment-list article>div {
  flex: 1
}

.comment-list b {
  font-size: 8.5px
}

.comment-list small {
  float: right;
  font-size: 7px;
  color: #89959f
}

.comment-list p {
  font-size: 9px;
  color: #526576
}

.empty-mini {
  font-size: 8px;
  color: #8d98a3;
  padding: 10px 0
}

/* Forms and simple pages */
.editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 17px
}

.editor-form {
  padding: 22px
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px
}

.form-grid label {
  display: block;
  font-size: 8px;
  font-weight: 700;
  color: #526272;
  margin-bottom: 7px
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  border: 1px solid #d2dae1;
  padding: 10px;
  font-size: 10px;
  outline: none
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: #4c7c9e;
  box-shadow: 0 0 0 3px #1c5d8d10
}

.span-2 {
  grid-column: span 2
}

.document-editor {
  min-height: 280px;
  font: 12px/1.7 Georgia, serif
}

.editor-toolbar {
  height: 36px;
  border: 1px solid #d2dae1;
  border-bottom: 0;
  background: #f5f7f8;
  display: flex;
  align-items: center;
  padding: 0 7px
}

.editor-toolbar button {
  height: 25px;
  min-width: 28px;
  border: 0;
  border-right: 1px solid #d9e0e5;
  background: transparent
}

.editor-toolbar>span {
  margin-left: auto;
  font-size: 7px;
  color: #8c98a4
}

.editor-toolbar+textarea {
  border-top: 0
}

.editor-side {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.editor-side ul {
  padding-left: 18px
}

.source-summary {
  background: #f5f7f8;
  border-left: 3px solid var(--gold);
  padding: 14px
}

.source-summary small,
.source-summary b {
  display: block
}

.source-summary small {
  font-size: 7px;
  color: #89959f
}

.source-summary b {
  font-size: 10px;
  margin-top: 5px
}

.source-summary p {
  font-size: 8px;
  color: #657687
}

.version-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.simple-page {
  max-width: 900px;
  margin: auto
}

.simple-page>a {
  font-size: 9px;
  color: var(--blue);
  text-decoration: none
}

.simple-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 25px;
  margin-top: 15px
}

.profile-hero {
  display: flex;
  gap: 15px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line)
}

.profile-hero>span {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e5ebf0
}

.profile-hero h1 {
  font: 400 21px Georgia, serif;
  margin: 0
}

.profile-hero p {
  font-size: 9px;
  color: var(--muted)
}

.simple-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.simple-card dl div {
  padding: 12px;
  background: #f6f8f9
}

.simple-card dt {
  font-size: 7px;
  color: #89959f
}

.simple-card dd {
  font-size: 9px;
  font-weight: 650;
  margin: 4px 0 0
}

.simple-title {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 15px
}

.news-list article {
  padding: 15px 0;
  border-bottom: 1px solid var(--line)
}

.news-list h3 {
  font-size: 10px
}

.news-list p {
  font-size: 8px;
  color: #637484
}

.news-list small {
  font-size: 7px;
  color: #8e99a4
}

@media(max-width:1180px) {
  .work-queue {
    grid-template-columns: repeat(3, 1fr)
  }

  .queue-card:nth-child(3) {
    border-right: 0
  }

  .queue-card:nth-child(-n+3) {
    border-bottom: 1px solid var(--line)
  }

  .login-page {
    grid-template-columns: 1.2fr minmax(390px, .8fr)
  }

  .login-flow {
    grid-template-columns: 1fr 16px 1fr
  }

  .login-flow article:nth-of-type(n+3),
  .login-flow i:nth-of-type(n+2) {
    display: none
  }
}

@media(max-width:900px) {
  .sidebar {
    width: 72px;
    padding-inline: 8px
  }

  .brand {
    justify-content: center
  }

  .brand>span:last-child,
  .workspace-label,
  .side-nav a>span:not(.nav-symbol),
  .side-nav .nav-count,
  .sidebar-footer>div {
    display: none
  }

  .side-nav a {
    justify-content: center
  }

  .sidebar-footer {
    justify-content: center
  }

  .main-area {
    margin-left: 72px
  }

  .document-layout {
    grid-template-columns: 1fr
  }

  .document-side {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .login-context {
    display: none
  }

  .login-page {
    display: block
  }

  .login-panel {
    min-height: 100vh
  }

  .mobile-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 55px
  }

  .mobile-brand strong {
    letter-spacing: 2px
  }
}

@media(max-width:650px) {
  .sidebar {
    display: none
  }

  .main-area {
    margin-left: 0
  }

  .topbar {
    padding: 0 13px
  }

  .menu-toggle {
    display: block;
    border: 0;
    background: transparent;
    margin-right: 8px
  }

  .top-search {
    width: auto;
    flex: 1
  }

  .top-search kbd,
  .account-copy,
  .account-button>span:last-child {
    display: none
  }

  .content {
    padding: 19px 12px
  }

  .page-title,
  .page-heading,
  .editor-heading,
  .document-heading {
    align-items: flex-start;
    flex-direction: column
  }

  .work-queue {
    grid-template-columns: 1fr 1fr
  }

  .queue-card:nth-child(3) {
    border-right: 1px solid var(--line)
  }

  .queue-card:nth-child(even) {
    border-right: 0
  }

  .queue-card:nth-child(-n+4) {
    border-bottom: 1px solid var(--line)
  }

  .registry-tabs {
    overflow: auto
  }

  .registry-tools button {
    display: none
  }

  .document-side {
    display: block
  }

  .document-side .side-card {
    margin-top: 10px
  }

  .paper-card {
    padding: 30px 22px
  }

  .paper-recipient {
    width: 75%
  }

  .workflow-track {
    overflow: auto
  }

  .workflow-track>div {
    min-width: 60px
  }

  .editor-layout {
    display: block
  }

  .editor-side {
    margin-top: 12px
  }

  .form-grid {
    grid-template-columns: 1fr
  }

  .span-2 {
    grid-column: auto
  }

  .version-compare,
  .simple-card dl {
    grid-template-columns: 1fr
  }

  .login-panel {
    padding: 28px 22px
  }

  .mobile-brand {
    margin-bottom: 40px
  }
}

@media print {

  .sidebar,
  .topbar,
  .document-heading,
  .workflow-track,
  .document-side,
  .comments-card {
    display: none 
  }

  .main-area {
    margin: 0
  }

  .content {
    padding: 0
  }

  .document-layout {
    display: block
  }

  .paper-card {
    border: 0;
    box-shadow: none;
    padding: 15mm 18mm
  }

  .response-paper {
    page-break-before: always
  }
}

@media(max-width:650px) {
  .sidebar {
    display: flex;
    transform: translateX(-100%);
    transition: transform .2s;
    box-shadow: 12px 0 30px #0b294230
  }

  .sidebar.mobile-open {
    transform: translateX(0)
  }
}

/* E-HAMKOR 2.0 workbench */
.command-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 19px
}

.command-heading h1 {
  font: 400 27px Georgia, serif;
  margin: 0 0 6px
}

.command-heading p {
  font-size: 10px;
  color: var(--muted);
  margin: 0
}

.command-strip {
  height: 61px;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 13px
}

.command-strip a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 17px;
  border-right: 1px solid var(--line);
  text-decoration: none
}

.command-strip a:last-child {
  border: 0
}

.command-strip a:hover,
.command-strip a.active {
  background: #f8fafb
}

.command-strip a.active {
  box-shadow: inset 0 2px var(--ui-navy-900)
}

.command-strip span {
  font-size: 8px;
  color: #6b7985;
  font-weight: 650
}

.command-strip strong {
  font: 400 20px Georgia, serif
}

.amber-text {
  color: var(--amber)
}

.red-text {
  color: var(--red)
}

.edms-workbench {
  height: calc(100vh - 225px);
  min-height: 610px;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 205px minmax(390px, 1fr) minmax(310px, .8fr);
  overflow: hidden
}

.folder-pane {
  border-right: 1px solid var(--line);
  background: #f8fafb
}

.folder-pane>header {
  height: 53px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  font-size: 9px;
  letter-spacing: .7px
}

.folder-pane>header button {
  width: 27px;
  height: 27px;
  border: 1px solid var(--line);
  background: #fff
}

.folder-pane nav {
  padding: 10px 8px
}

.folder-pane nav>div {
  font-size: 7px;
  font-weight: 750;
  letter-spacing: 1px;
  color: #94a0aa;
  padding: 18px 10px 7px
}

.folder-pane nav a {
  height: 35px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  text-decoration: none;
  color: #586a78;
  font-size: 9px;
  border-radius: 3px
}

.folder-pane nav a:hover,
.folder-pane nav a.active {
  background: #e8eef2;
  color: #183b56
}

.folder-pane nav a span {
  width: 16px;
  text-align: center;
  font-size: 12px
}

.folder-pane nav a b {
  font-weight: 600;
  flex: 1
}

.folder-pane nav a em {
  font-style: normal;
  font-size: 7px;
  background: #dfe6eb;
  padding: 2px 5px;
  border-radius: 8px
}

.folder-pane nav .danger-link {
  color: #943e3e
}

.mail-pane {
  min-width: 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column
}

.mail-toolbar {
  height: 53px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line)
}

.mail-toolbar>div strong,
.mail-toolbar>div span {
  display: block
}

.mail-toolbar>div strong {
  font-size: 11px
}

.mail-toolbar>div span {
  font-size: 7px;
  color: #8b97a1;
  margin-top: 3px
}

.mail-toolbar form {
  display: flex;
  gap: 5px
}

.mail-toolbar select,
.mail-toolbar button {
  height: 29px;
  border: 1px solid var(--line);
  background: #fff;
  color: #657581;
  font-size: 8px
}

.mail-toolbar select {
  max-width: 145px;
  padding: 0 7px
}

.mail-toolbar button {
  width: 29px
}

.mail-columns {
  height: 32px;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 1fr 105px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #f7f9fa;
  color: #82909b;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .55px
}

.mail-list {
  overflow: auto;
  flex: 1
}

.mail-item {
  min-height: 112px;
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) 42px;
  gap: 11px;
  padding: 13px 13px 13px 0;
  border-bottom: 1px solid #e8edf0;
  text-decoration: none;
  background: #fff
}

.mail-item:hover,
.mail-item.selected {
  background: #f6f9fb
}

.mail-item.selected {
  box-shadow: inset 3px 0 var(--blue)
}

.priority-marker {
  width: 3px;
  background: transparent
}

.priority-marker.p-urgent {
  background: var(--amber)
}

.priority-marker.p-immediate {
  background: var(--red)
}

.mail-main {
  min-width: 0
}

.mail-main header {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.mail-main header strong {
  font-size: 8px;
  color: var(--blue)
}

.mail-main time {
  font-size: 7px;
  color: #8c98a2
}

.mail-main h3 {
  font-size: 10px;
  line-height: 1.35;
  margin: 7px 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.mail-main p {
  font-size: 7.5px;
  color: #7d8b96;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.mail-main footer {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 9px
}

.classification {
  font-size: 6.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #765d2e;
  border: 1px solid #ddcda9;
  padding: 3px 5px
}

.mail-deadline {
  align-self: center;
  text-align: center;
  border-left: 1px solid #e5eaed;
  padding-left: 10px
}

.mail-deadline strong,
.mail-deadline small {
  display: block
}

.mail-deadline strong {
  font: 400 17px Georgia, serif
}

.mail-deadline small {
  font-size: 6.5px;
  color: #8a96a0;
  margin-top: 2px
}

.mail-empty {
  padding: 50px 20px;
  text-align: center
}

.mail-empty strong,
.mail-empty span {
  display: block
}

.mail-empty strong {
  font-size: 10px
}

.mail-empty span {
  font-size: 8px;
  color: var(--muted);
  margin-top: 5px
}

.preview-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff
}

.preview-header {
  height: 53px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line)
}

.preview-header a {
  font-size: 8px;
  color: var(--blue);
  text-decoration: none
}

.preview-body {
  padding: 20px;
  overflow: auto;
  flex: 1
}

.preview-number {
  font-size: 8px;
  color: var(--blue);
  font-weight: 700
}

.preview-number span {
  float: right;
  font-size: 6.5px;
  color: #725a2d;
  border: 1px solid #dbcba7;
  padding: 3px 5px;
  text-transform: uppercase
}

.preview-body h2 {
  font: 400 20px/1.3 Georgia, serif;
  margin: 14px 0 8px
}

.preview-route {
  font-size: 8px;
  color: #71818e;
  margin: 0 0 19px
}

.preview-body dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-block: 1px solid var(--line);
  margin: 0;
  padding: 4px 0
}

.preview-body dl div {
  padding: 9px 5px
}

.preview-body dt {
  font-size: 6.5px;
  color: #89969f;
  text-transform: uppercase;
  letter-spacing: .4px
}

.preview-body dd {
  font-size: 8px;
  font-weight: 650;
  margin: 4px 0 0
}

.preview-paper {
  padding: 16px 0;
  border-bottom: 1px solid var(--line)
}

.preview-paper small,
.preview-timeline>small {
  display: block;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .7px;
  color: #7f8c97;
  margin-bottom: 10px
}

.preview-paper p {
  font: 10px/1.65 Georgia, serif;
  color: #445766;
  margin: 0;
  max-height: 150px;
  overflow: hidden
}

.preview-timeline {
  padding: 16px 0
}

.preview-timeline article {
  display: flex;
  gap: 9px;
  padding: 6px 0
}

.preview-timeline article>i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  margin-top: 3px
}

.preview-timeline article strong,
.preview-timeline article span {
  display: block
}

.preview-timeline article strong {
  font-size: 8px
}

.preview-timeline article span {
  font-size: 7px;
  color: #8b97a1;
  margin-top: 3px
}

.preview-actions {
  height: 55px;
  padding: 8px 15px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 7px
}

.preview-empty {
  margin: auto;
  text-align: center;
  color: #7f8d98
}

.preview-empty span,
.preview-empty strong {
  display: block
}

.preview-empty span {
  font-size: 28px;
  margin-bottom: 10px
}

.preview-empty strong {
  font-size: 9px
}

@media(max-width:1200px) {
  .edms-workbench {
    grid-template-columns: 180px minmax(360px, 1fr) 320px
  }

  .command-strip {
    grid-template-columns: repeat(3, 1fr);
    height: 106px
  }

  .command-strip a:nth-child(-n+3) {
    border-bottom: 1px solid var(--line)
  }
}

@media(max-width:980px) {
  .edms-workbench {
    grid-template-columns: 180px 1fr
  }

  .preview-pane {
    display: none
  }

  .command-strip {
    grid-template-columns: repeat(6, 1fr);
    height: 61px
  }

  .command-strip a:nth-child(-n+3) {
    border-bottom: 0
  }

  .command-strip span {
    display: none
  }
}

@media(max-width:650px) {
  .command-heading {
    align-items: flex-start;
    gap: 12px
  }

  .command-strip {
    grid-template-columns: repeat(3, 1fr);
    height: 106px
  }

  .command-strip a:nth-child(-n+3) {
    border-bottom: 1px solid var(--line)
  }

  .command-strip span {
    display: block
  }

  .edms-workbench {
    height: auto;
    min-height: 620px;
    display: block
  }

  .folder-pane {
    display: none
  }

  .mail-pane {
    height: 620px;
    border-right: 0
  }

  .mail-item {
    min-height: 105px
  }
}

/* A4 document composer */
.composer-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px
}

.composer-header>div:first-child>a {
  display: block;
  color: var(--blue);
  text-decoration: none;
  font-size: 8px;
  margin-bottom: 10px
}

.composer-header>div:first-child>span {
  display: block;
  color: #8a6b34;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: 1.2px;
  margin-bottom: 7px
}

.composer-header h1 {
  font: 400 24px Georgia, serif;
  margin: 0
}

.composer-header>div:last-child {
  display: flex;
  align-items: center;
  gap: 8px
}

.save-state {
  font-size: 8px;
  color: #667783;
  margin-right: 8px
}

.save-state i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green)
}

.composer-workspace {
  display: grid;
  grid-template-columns: 245px minmax(540px, 1fr) 235px;
  gap: 12px;
  align-items: start
}

.document-properties,
.composer-inspector>section {
  background: #fff;
  border: 1px solid var(--line)
}

.document-properties {
  position: sticky;
  top: 81px
}

.document-properties>header,
.composer-inspector section>header {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 13px;
  border-bottom: 1px solid var(--line);
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .8px;
  color: #61717e
}

.property-fields {
  padding: 13px
}

.property-fields>label,
.property-row label,
.composer-inspector label {
  display: block;
  font-size: 7px;
  font-weight: 700;
  color: #5d6e7b;
  margin-bottom: 12px
}

.property-fields select,
.property-fields input,
.composer-inspector input {
  width: 100%;
  height: 34px;
  border: 1px solid #d4dce2;
  background: #fff;
  padding: 0 8px;
  font-size: 8px;
  margin-top: 6px
}

.property-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.property-info {
  padding: 8px 0;
  border-top: 1px solid #edf0f2
}

.property-info span,
.property-info strong {
  display: block
}

.property-info span {
  font-size: 6.5px;
  color: #87949e
}

.property-info strong {
  font-size: 8px;
  margin-top: 3px
}

.document-properties>footer {
  padding: 12px 13px;
  background: #f7f9fa;
  border-top: 1px solid var(--line)
}

.document-properties>footer b,
.document-properties>footer span {
  display: block
}

.document-properties>footer b {
  font-size: 7.5px;
  color: #366a51
}

.document-properties>footer span {
  font-size: 7px;
  color: #7d8b95;
  line-height: 1.45;
  margin-top: 4px
}

.document-canvas {
  min-width: 0
}

.editor-ruler {
  height: 23px;
  background: #e9edf0;
  border: 1px solid #d7dee3;
  border-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 33px;
  color: #85919b;
  font-size: 6px
}

.editor-ruler i {
  height: 5px;
  border-left: 1px solid #aab4bc
}

.format-toolbar {
  height: 40px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 8px;
  position: sticky;
  top: 65px;
  z-index: 8
}

.format-toolbar button {
  height: 27px;
  min-width: 29px;
  border: 0;
  border-right: 1px solid #dde3e7;
  background: #fff;
  font-size: 8px
}

.format-toolbar>span {
  width: 8px
}

.format-toolbar em {
  margin-left: auto;
  font-style: normal;
  color: #87939d;
  font-size: 7px
}

.editable-paper {
  width: min(100%, 794px);
  min-height: 1030px;
  margin: 12px auto 30px;
  background: #fff;
  border: 1px solid #cfd6dc;
  box-shadow: 0 8px 26px #0b294212;
  padding: 55px 68px;
  position: relative
}

.paper-classification {
  position: absolute;
  top: 25px;
  right: 35px;
  font-size: 6px;
  letter-spacing: .7px;
  border: 1px solid #d7c49c;
  color: #725b2f;
  padding: 4px 7px
}

.editable-recipient {
  width: 46%;
  min-height: 66px;
  margin-left: auto;
  text-align: right
}

.editable-recipient small,
.editable-recipient strong,
.editable-recipient span {
  display: block
}

.editable-recipient small {
  font-size: 6px;
  letter-spacing: .7px;
  color: #87939d;
  margin-bottom: 8px
}

.editable-recipient strong {
  font-size: 10px
}

.editable-recipient span {
  font-size: 8px;
  color: #72818d;
  margin-top: 4px
}

.editable-meta {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #bfc9d0;
  margin-top: 24px;
  padding-top: 9px;
  font-size: 8px
}

.editable-subject {
  display: block;
  margin: 36px 0 23px
}

.editable-subject input {
  width: 100%;
  border: 0;
  border-bottom: 1px dashed transparent;
  outline: 0;
  text-align: center;
  text-transform: uppercase;
  font: 600 14px/1.45 Georgia, serif;
  padding: 7px
}

.editable-subject input:focus {
  border-color: #8fa7b8;
  background: #f9fbfc
}

.editable-body textarea {
  width: 100%;
  min-height: 430px;
  border: 1px dashed transparent;
  outline: 0;
  resize: none;
  padding: 8px;
  font: 12px/1.8 Georgia, serif;
  text-align: justify
}

.editable-body textarea:focus,
.editable-basis textarea:focus {
  border-color: #9db0be;
  background: #fbfcfd
}

.editable-basis {
  border-top: 1px solid #dbe1e5;
  padding-top: 13px
}

.editable-basis>span {
  display: block;
  font-size: 8px;
  font-weight: 700;
  margin-bottom: 6px
}

.editable-basis textarea {
  width: 100%;
  min-height: 75px;
  border: 1px dashed transparent;
  outline: 0;
  resize: none;
  padding: 7px;
  font: 9px/1.6 Georgia, serif;
  color: #526472
}

.editable-signature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 32px
}

.editable-signature input {
  width: 100%;
  border: 0;
  border-bottom: 1px dashed #d7dde2;
  outline: 0;
  padding: 7px 0;
  font-size: 9px;
  font-weight: 650
}

.editable-signature label:last-child input {
  text-align: right
}

.composer-inspector {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 81px
}

.composer-inspector section ul {
  list-style: none;
  margin: 0;
  padding: 7px 12px
}

.composer-inspector section li {
  display: flex;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid #edf0f2
}

.composer-inspector section li>i {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid #ced7de;
  font-style: normal;
  font-size: 7px;
  color: #7d8b96
}

.composer-inspector section li.ok>i {
  background: #e8f3ed;
  border-color: #b9d9c8;
  color: var(--green)
}

.composer-inspector section li b,
.composer-inspector section li small {
  display: block
}

.composer-inspector section li b {
  font-size: 7.5px
}

.composer-inspector section li small {
  font-size: 6.5px;
  color: #87939d;
  margin-top: 3px
}

.composer-inspector section>label {
  padding: 12px
}

.composer-inspector section>label input {
  margin-top: 7px
}

.editor-guidance p {
  font-size: 7.5px;
  line-height: 1.6;
  color: #687986;
  padding: 0 12px 12px
}

.composer .errorlist {
  font-size: 8px;
  color: var(--red)
}

@media(max-width:1250px) {
  .composer-workspace {
    grid-template-columns: 220px minmax(500px, 1fr)
  }

  .composer-inspector {
    display: none
  }
}

@media(max-width:900px) {
  .composer-workspace {
    display: block
  }

  .document-properties {
    position: static;
    margin-bottom: 10px
  }

  .property-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 10px
  }

  .document-properties>footer {
    display: none
  }

  .editable-paper {
    min-height: 900px
  }

  .composer-header>div:last-child .save-state {
    display: none
  }
}

@media(max-width:650px) {
  .composer-header {
    align-items: flex-start;
    gap: 12px
  }

  .composer-header>div:last-child {
    flex-wrap: wrap
  }

  .property-fields {
    display: block
  }

  .editor-ruler {
    display: none
  }

  .editable-paper {
    margin-top: 10px;
    padding: 42px 22px;
    min-height: 800px
  }

  .editable-recipient {
    width: 70%
  }

  .format-toolbar {
    top: 65px
  }

  .editable-body textarea {
    min-height: 330px
  }
}

.resolution-form {
  margin-top: 12px 
}

.resolution-form p {
  margin: 8px 0
}

.resolution-form label {
  display: block;
  font-size: 7px;
  font-weight: 700;
  color: #637481;
  margin-bottom: 4px
}

.resolution-form select,
.resolution-form textarea,
.resolution-form input {
  width: 100%;
  border: 1px solid #d4dce2;
  padding: 8px;
  font-size: 8px
}

.resolution-list article {
  padding: 9px 0;
  border-bottom: 1px solid #e9edf0
}

.resolution-list header,
.resolution-list footer {
  display: flex;
  justify-content: space-between;
  gap: 8px
}

.resolution-list header b {
  font-size: 8px
}

.resolution-list header span,
.resolution-list footer span,
.resolution-list footer em {
  font-size: 7px;
  color: #87949e
}

.resolution-list p {
  font-size: 8px;
  color: #445766;
  margin: 7px 0
}

.resolution-list footer em {
  font-style: normal;
  color: #876421
}

@media(max-width:1400px) {
  .composer-workspace {
    grid-template-columns: 220px minmax(0, 1fr)
  }

  .composer-inspector {
    display: none
  }

  .editable-paper {
    width: min(100%, 794px)
  }
}

.s-response_leader_review {
  background: #e7eff6 ;
  color: #285d85 
}

/* Full-screen professional editor and readable scale */
.modern-composer {
  position: fixed ;
  inset: 0 ;
  z-index: 100 ;
  margin: 0 ;
  width: 100vw ;
  height: 100vh ;
  min-height: 0 ;
  background: #e8edf1 ;
  overflow: hidden
}

.modern-commandbar {
  top: 0 ;
  height: 82px ;
  padding: 0 28px 
}

.composer-steps {
  height: 50px 
}

.modern-workspace {
  height: calc(100vh - 132px) ;
  grid-template-columns: 280px minmax(620px, 1fr) 300px 
}

.properties-panel>header,
.review-panel>header {
  height: 62px 
}

.properties-panel>header strong {
  font-size: 15px 
}

.properties-panel>header span {
  font-size: 11px 
}

.properties-content {
  padding: 20px 
}

.properties-content>label,
.two-fields label {
  font-size: 13px ;
  margin-bottom: 18px 
}

.properties-content select,
.properties-content input {
  height: 46px ;
  font-size: 13px 
}

.system-fields span {
  font-size: 11px 
}

.system-fields b {
  font-size: 13px 
}

.route-summary>span {
  font-size: 10px 
}

.route-summary b {
  font-size: 13px 
}

.route-summary p {
  font-size: 11px 
}

.writing-area {
  grid-template-rows: 58px minmax(0, 1fr) 38px 
}

.writing-toolbar {
  padding: 0 16px 
}

.tool-group button {
  height: 36px ;
  min-width: 36px ;
  font-size: 14px 
}

.tool-group select {
  height: 36px ;
  font-size: 12px 
}

.zoom-control button {
  height: 34px ;
  width: 34px 
}

.zoom-control span {
  font-size: 11px 
}

.paper-stage {
  padding: 30px 42px 65px 
}

.modern-paper {
  width: min(100%, 794px) ;
  min-height: 1123px ;
  padding: 62px 72px 
}

.official-letter .editable-subject input {
  font-size: 19px 
}

.official-letter .editable-body textarea {
  font-size: 16px ;
  line-height: 1.8 ;
  min-height: 430px 
}

.official-letter .editable-basis textarea {
  font-size: 14px 
}

.official-letter .editable-signature input {
  font-size: 14px 
}

.reference-letterhead>strong,
.reference-letterhead>b {
  font-size: 18px 
}

.reference-letterhead>span {
  font-size: 14px 
}

.reference-document-row {
  font-size: 16px 
}

.letter-recipient b,
.letter-recipient strong {
  font-size: 16px 
}

.letter-recipient span {
  font-size: 14px 
}

.editor-statusbar {
  font-size: 11px ;
  padding: 0 18px 
}

.review-panel>header button {
  font-size: 12px 
}

.readiness-score small {
  font-size: 10px 
}

.checklist b {
  font-size: 13px 
}

.checklist span {
  font-size: 11px 
}

.review-help b {
  font-size: 12px 
}

.review-help p {
  font-size: 11px 
}

.command-identity h1 {
  font-size: 21px 
}

.command-identity span {
  font-size: 11px 
}

.command-actions>a,
.command-actions>button {
  font-size: 13px ;
  height: 44px 
}

.command-status b {
  font-size: 13px 
}

.command-status small {
  font-size: 11px 
}

@media(max-width:1350px) {
  .modern-workspace {
    grid-template-columns: 270px minmax(620px, 1fr) 
  }

  .review-panel {
    display: none 
  }

  .modern-commandbar {
    grid-template-columns: 1fr auto 
  }

  .command-status {
    display: none 
  }
}

@media(max-width:950px) {
  .modern-workspace {
    display: block ;
    height: calc(100vh - 132px) ;
    overflow: auto
  }

  .properties-panel {
    position: relative 
  }

  .properties-content {
    display: grid ;
    grid-template-columns: 1fr 1fr ;
    gap: 0 14px
  }

  .writing-area {
    height: 900px
  }

  .modern-commandbar {
    height: 76px 
  }

  .composer-steps {
    margin-top: 0
  }

  .command-actions>a,
  .command-actions>button:not(.command-primary) {
    display: none 
  }
}

.response-upload {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px
}

.response-upload p {
  margin: 9px 0
}

.response-upload label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 5px
}

.response-upload input {
  width: 100%;
  font-size: 10px
}

.file-versions a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none
}

.file-versions b,
.file-versions span {
  display: block
}

.file-versions b {
  font-size: 10px;
  color: var(--blue)
}

.file-versions span {
  font-size: 8px;
  color: var(--muted);
  margin-top: 4px
}

.verification-card code {
  font-size: 9px;
  word-break: break-all
}

.verify-page {
  min-height: 100vh;
  background: #eef2f5;
  display: grid;
  place-items: center;
  padding: 30px
}

.verify-page>section {
  width: min(620px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  padding: 40px;
  box-shadow: 0 15px 45px #102a4315
}

.verify-brand {
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--ui-navy-900)
}

.verify-ok {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e5f3eb;
  color: var(--green);
  font-size: 30px;
  margin: 28px 0 16px
}

.verify-page h1 {
  font: 400 30px Georgia, serif
}

.verify-page p {
  color: var(--muted)
}

.verify-page dl div {
  display: grid;
  grid-template-columns: 150px 1fr;
  padding: 11px 0;
  border-bottom: 1px solid var(--line)
}

.verify-page dt {
  font-size: 11px;
  color: var(--muted)
}

.verify-page dd {
  font-size: 12px;
  font-weight: 700;
  margin: 0
}

.verify-page .hash {
  font-family: monospace;
  word-break: break-all;
  font-size: 10px
}

.executive-total {
  background: var(--ui-navy-900);
  color: #fff;
  padding: 24px;
  margin-bottom: 15px
}

.executive-total span,
.executive-total strong {
  display: block
}

.executive-total span {
  font-size: 10px;
  letter-spacing: 1px;
  color: #9fb3c2
}

.executive-total strong {
  font: 400 42px Georgia, serif;
  margin-top: 8px
}

.analytics-grid,
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px
}

.bar-list {
  padding: 18px
}

.bar-list>div {
  display: grid;
  grid-template-columns: 180px 1fr 35px;
  gap: 10px;
  align-items: center;
  margin: 13px 0
}

.bar-list span {
  font-size: 11px
}

.bar-list i {
  height: 9px;
  background: linear-gradient(90deg, var(--blue) calc(min(var(--value), 10)*10%), #e6ebef 0)
}

.bar-list b {
  font-size: 12px
}

.template-form form {
  padding: 18px
}

.template-form label {
  display: block;
  font-size: 11px;
  font-weight: 700
}

.template-form input,
.template-form select,
.template-form textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  padding: 10px;
  margin-top: 5px
}

.template-list {
  padding: 12px 18px
}

.template-list article {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--line)
}

.template-list b,
.template-list span {
  display: block
}

.template-list b {
  font-size: 12px
}

.template-list span {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px
}

.template-list em {
  font-size: 9px;
  color: var(--green);
  font-style: normal
}

.composer-steps {
  height: 46px;
  background: #f8fafb;
  border-bottom: 1px solid #ccd5dc;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px
}

.composer-steps span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: #82909a
}

.composer-steps span b {
  width: 23px;
  height: 23px;
  border: 1px solid #cbd5dc;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 8px
}

.composer-steps span.active {
  color: #193f5b;
  font-weight: 700
}

.composer-steps span.active b {
  background: #174b70;
  border-color: #174b70;
  color: #fff
}

.composer-steps i {
  width: 48px;
  height: 1px;
  background: #cdd6dc
}

.modern-workspace {
  height: calc(100vh - 189px) 
}

.focus-toggle {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border: 0;
  background: #fff;
  font-size: 15px
}

.zoom-control {
  margin-left: 0 
}

.status-secure {
  margin-left: auto;
  color: #2d7759
}

.modern-composer.focus-mode .properties-panel,
.modern-composer.focus-mode .review-panel,
.modern-composer.focus-mode .composer-steps {
  display: none
}

.modern-composer.focus-mode .modern-workspace {
  grid-template-columns: 1fr ;
  height: calc(100vh - 143px) 
}

.modern-composer.focus-mode .modern-paper {
  width: 794px
}

.command-status.saving>i {
  background: #3478a3;
  animation: savePulse 1s infinite
}

.command-status.saved>i {
  background: #2d7b5a
}

.command-status.error>i {
  background: #a64242
}

@keyframes savePulse {
  50% {
    opacity: .3
  }
}

.modern-composer {
  margin: -26px clamp(-36px, -2.4vw, -18px);
  background: #e9edf1;
  min-height: calc(100vh - 65px)
}

.modern-commandbar {
  height: 78px;
  background: #fff;
  border-bottom: 1px solid #ccd5dc;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 28px;
  padding: 0 24px;
  position: sticky;
  top: 65px;
  z-index: 25
}

.command-identity {
  display: flex;
  align-items: center;
  gap: 14px
}

.command-identity>a {
  width: 36px;
  height: 36px;
  border: 1px solid #d2d9df;
  display: grid;
  place-items: center;
  text-decoration: none;
  border-radius: 6px;
  color: #2c5f83;
  font-size: 17px
}

.command-identity span {
  display: block;
  font-size: 10px;
  font-weight: 750;
  color: #71818e;
  letter-spacing: .7px
}

.command-identity h1 {
  font: 600 18px/1.3 "Segoe UI", Arial, sans-serif;
  margin: 3px 0 0
}

.command-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 20px;
  border-right: 1px solid #e0e5e9
}

.command-status>i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d29228;
  box-shadow: 0 0 0 4px #d2922814
}

.command-status b,
.command-status small {
  display: block
}

.command-status b {
  font-size: 11px
}

.command-status small {
  font-size: 9px;
  color: #84919b;
  margin-top: 2px
}

.command-actions {
  display: flex;
  gap: 8px
}

.command-actions>a,
.command-actions>button {
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border: 1px solid #ccd5dc;
  background: #fff;
  border-radius: 5px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 650;
  color: #3e5263
}

.command-actions>button.command-primary {
  background: #15466a;
  border-color: #15466a;
  color: #fff
}

.modern-workspace {
  height: calc(100vh - 143px);
  min-height: 650px;
  display: grid;
  grid-template-columns: 270px minmax(600px, 1fr) 300px;
  overflow: hidden
}

.properties-panel,
.review-panel {
  background: #fff;
  overflow: auto
}

.properties-panel {
  border-right: 1px solid #ccd5dc
}

.properties-panel>header,
.review-panel>header {
  height: 58px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dbe1e5
}

.properties-panel>header strong,
.properties-panel>header span {
  display: block
}

.properties-panel>header strong {
  font-size: 13px
}

.properties-panel>header span {
  font-size: 10px;
  color: #7b8994;
  margin-top: 3px
}

.properties-panel>header button {
  border: 0;
  background: transparent
}

.properties-content {
  padding: 17px
}

.properties-content>label,
.two-fields label {
  display: block;
  font-size: 11px;
  font-weight: 650;
  color: #526574;
  margin-bottom: 16px
}

.properties-content select,
.properties-content input {
  width: 100%;
  height: 43px;
  border: 1px solid #cbd5dc;
  border-radius: 4px;
  background: #fff;
  padding: 0 10px;
  font-size: 12px;
  margin-top: 7px;
  outline: 0
}

.properties-content select:focus,
.properties-content input:focus {
  border-color: #36749f;
  box-shadow: 0 0 0 3px #36749f12
}

.two-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.system-fields {
  border-top: 1px solid #e4e8eb;
  margin-top: 5px;
  padding-top: 7px
}

.system-fields div {
  padding: 9px 0
}

.system-fields span,
.system-fields b {
  display: block
}

.system-fields span {
  font-size: 9px;
  color: #89959e
}

.system-fields b {
  font-size: 11px;
  margin-top: 4px
}

.route-summary {
  margin: 10px 16px 20px;
  padding: 14px;
  background: #eef4f8;
  border-left: 3px solid #306c96
}

.route-summary>span {
  font-size: 8px;
  font-weight: 750;
  color: #70818e;
  letter-spacing: .7px
}

.route-summary>div {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 7px
}

.route-summary i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #174b70;
  color: #fff;
  font-style: normal;
  font-size: 9px
}

.route-summary b {
  font-size: 11px
}

.route-summary p {
  font-size: 9px;
  line-height: 1.5;
  color: #687a87;
  margin: 0
}

.writing-area {
  min-width: 0;
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr) 31px;
  background: #dfe5ea
}

.writing-toolbar {
  background: #fff;
  border-bottom: 1px solid #cbd4db;
  display: flex;
  align-items: center;
  padding: 0 13px;
  gap: 8px;
  position: relative;
  z-index: 5
}

.tool-group {
  display: flex;
  align-items: center;
  border-right: 1px solid #dce2e6;
  padding-right: 8px
}

.tool-group button {
  height: 32px;
  min-width: 32px;
  border: 0;
  background: #fff;
  border-radius: 4px;
  font-size: 12px
}

.tool-group button:hover {
  background: #edf2f5
}

.tool-group select {
  height: 32px;
  border: 1px solid #d3dbe1;
  background: #fff;
  padding: 0 7px;
  font-size: 10px;
  margin-right: 5px
}

.zoom-control {
  margin-left: auto;
  display: flex;
  align-items: center;
  border: 1px solid #d3dbe1;
  border-radius: 4px;
  overflow: hidden
}

.zoom-control button {
  width: 28px;
  height: 28px;
  border: 0;
  background: #fff
}

.zoom-control span {
  min-width: 45px;
  text-align: center;
  font-size: 9px
}

.paper-stage {
  overflow: auto;
  padding: 25px 36px 55px;
  scrollbar-color: #aeb9c1 #dfe5ea
}

.modern-paper {
  margin: 0 auto ;
  transform-origin: top center;
  transition: transform .15s;
  box-shadow: 0 7px 24px #20384b24 
}

.editor-statusbar {
  background: #fff;
  border-top: 1px solid #cbd4db;
  display: flex;
  align-items: center;
  gap: 23px;
  padding: 0 15px;
  font-size: 9px;
  color: #6e7e8a
}

.review-panel {
  border-left: 1px solid #ccd5dc
}

.review-panel>header {
  justify-content: flex-start;
  gap: 4px;
  padding: 0 11px
}

.review-panel>header button {
  height: 58px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: #fff;
  padding: 0 10px;
  font-size: 10px;
  color: #71808b
}

.review-panel>header button.active {
  border-color: #1d5a83;
  color: #173d59;
  font-weight: 700
}

.readiness-score {
  padding: 18px 16px;
  border-bottom: 1px solid #e0e5e9
}

.readiness-score>span {
  display: flex;
  align-items: end;
  justify-content: space-between
}

.readiness-score b {
  font: 500 25px Georgia, serif
}

.readiness-score small {
  font-size: 8px;
  color: #798994;
  letter-spacing: .7px
}

.readiness-score>div {
  height: 5px;
  background: #e4e9ed;
  border-radius: 4px;
  margin-top: 10px;
  overflow: hidden
}

.readiness-score i {
  display: block;
  width: 25%;
  height: 100%;
  background: #2d7b5a;
  transition: width .2s
}

.checklist {
  padding: 8px 14px
}

.checklist article {
  display: flex;
  gap: 10px;
  padding: 13px 3px;
  border-bottom: 1px solid #e6eaed
}

.checklist article>i {
  width: 25px;
  height: 25px;
  border: 1px solid #cbd5dc;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 9px;
  color: #71818d
}

.checklist article.complete>i {
  background: #e6f3ec;
  border-color: #b9d9c8;
  color: #277354
}

.checklist b,
.checklist span {
  display: block
}

.checklist b {
  font-size: 11px
}

.checklist span {
  font-size: 9px;
  color: #87949e;
  margin-top: 4px
}

.version-note {
  padding: 13px
}

.version-note label {
  display: block;
  font-size: 10px;
  font-weight: 650
}

.version-note input {
  width: 100%;
  height: 40px;
  border: 1px solid #ccd5dc;
  padding: 0 9px;
  margin-top: 7px
}

.review-help {
  margin: 12px 16px;
  padding: 13px;
  background: #f6f8f9;
  border: 1px solid #e0e5e9
}

.review-help b {
  font-size: 10px
}

.review-help p {
  font-size: 9px;
  line-height: 1.55;
  color: #6b7c88;
  margin: 6px 0 0
}

.letter-recipient small,
.letter-recipient b,
.letter-recipient strong,
.letter-recipient span {
  display: block 
}

.letter-recipient small {
  margin-bottom: 7px
}

.letter-recipient span {
  margin-top: 4px
}

@media(max-width:1500px) {
  .modern-workspace {
    grid-template-columns: 250px minmax(0, 1fr)
  }

  .review-panel {
    display: none
  }

  .modern-commandbar {
    grid-template-columns: 1fr auto
  }

  .command-status {
    display: none
  }

  .modern-paper {
    width: min(100%, 794px)
  }
}

@media(max-width:1250px) {
  .modern-workspace {
    grid-template-columns: 250px minmax(560px, 1fr)
  }

  .review-panel {
    display: none
  }

  .modern-commandbar {
    grid-template-columns: 1fr auto
  }

  .command-status {
    display: none
  }
}

@media(max-width:900px) {
  .modern-composer {
    margin: -19px -12px
  }

  .modern-workspace {
    display: block;
    height: auto
  }

  .properties-panel {
    border: 0
  }

  .properties-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px
  }

  .route-summary {
    display: none
  }

  .writing-area {
    height: 850px
  }

  .modern-commandbar {
    top: 65px;
    padding: 0 12px
  }

  .command-actions>a,
  .command-actions>button:not(.command-primary) {
    display: none
  }

  .command-identity h1 {
    font-size: 15px
  }
}

@media(max-width:650px) {
  .modern-commandbar {
    height: 68px
  }

  .properties-content {
    display: block
  }

  .writing-area {
    height: 760px
  }

  .paper-stage {
    padding: 18px 10px
  }

  .modern-paper {
    min-width: 680px
  }

  .writing-toolbar .tool-group:nth-of-type(2),
  .writing-toolbar .tool-group:nth-of-type(4) {
    display: none
  }
}

.reference-letterhead {
  display: block ;
  text-align: center ;
  padding: 0 0 10px 
}

.official-emblem {
  width: 136px;
  height: 126px;
  overflow: hidden;
  position: relative;
  margin: 0 auto 10px
}

.official-emblem img {
  position: absolute;
  width: 817px;
  height: 279px;
  max-width: none;
  left: -348px;
  top: -8px
}

.reference-letterhead>strong,
.reference-letterhead>b,
.reference-letterhead>span {
  display: block
}

.reference-letterhead>strong,
.reference-letterhead>b {
  font-size: 17px;
  line-height: 1.28;
  text-transform: uppercase
}

.reference-letterhead>b {
  margin-top: 2px
}

.reference-letterhead>span {
  font-size: 14px;
  margin-top: 6px
}

.reference-rule {
  height: 6px;
  margin-top: 0
}

.reference-rule b {
  height: 3px;
  background: #173c9b
}

.reference-rule i {
  height: 1px;
  background: #173c9b;
  margin-top: 2px
}

.reference-document-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 28px 0;
  font: 15px "Times New Roman", serif
}

.letter-reference {
  text-align: right;
  font-size: 12px;
  margin-top: 15px
}

.reference-letterhead+.reference-rule+.reference-document-row+.letter-recipient {
  margin-top: 25px
}

/* Readable presentation typography */
.side-nav a {
  height: 46px;
  font-size: 13px
}

.workspace-label {
  font-size: 10px
}

.brand small {
  font-size: 10px
}

.breadcrumb {
  font-size: 10px
}

.command-heading h1 {
  font-size: 32px
}

.command-heading p {
  font-size: 13px
}

.command-strip span {
  font-size: 11px
}

.command-strip strong {
  font-size: 24px
}

.folder-pane>header {
  font-size: 11px
}

.folder-pane nav>div {
  font-size: 9px
}

.folder-pane nav a {
  height: 41px;
  font-size: 12px
}

.mail-toolbar>div strong {
  font-size: 14px
}

.mail-toolbar>div span {
  font-size: 10px
}

.mail-toolbar select {
  font-size: 11px
}

.mail-columns {
  font-size: 9px
}

.mail-item {
  min-height: 128px
}

.mail-main header strong {
  font-size: 11px
}

.mail-main time {
  font-size: 10px
}

.mail-main h3 {
  font-size: 14px;
  margin-top: 9px
}

.mail-main p {
  font-size: 11px
}

.status-tag,
.workflow-status {
  font-size: 10px;
  padding: 6px 9px
}

.classification {
  font-size: 8px
}

.mail-deadline small {
  font-size: 9px
}

.preview-header a {
  font-size: 11px
}

.preview-number {
  font-size: 11px
}

.preview-body h2 {
  font-size: 25px
}

.preview-route {
  font-size: 11px
}

.preview-body dt {
  font-size: 9px
}

.preview-body dd {
  font-size: 11px
}

.preview-paper small,
.preview-timeline>small {
  font-size: 9px
}

.preview-paper p {
  font-size: 13px
}

.preview-timeline article strong {
  font-size: 11px
}

.preview-timeline article span {
  font-size: 9px
}

.button-primary,
.button-secondary,
.button-danger,
.primary-btn {
  font-size: 12px;
  min-height: 42px
}

.document-heading h1 {
  font-size: 30px
}

.document-heading>div>span {
  font-size: 12px
}

.workflow-track>div {
  width: 95px
}

.workflow-track>div i {
  width: 30px;
  height: 30px;
  font-size: 10px
}

.workflow-track>div span {
  font-size: 10px;
  line-height: 1.25
}

.workflow-track>b {
  margin-top: 15px
}

.side-card h3 {
  font-size: 13px
}

.side-card p,
.side-card li {
  font-size: 11px
}

.info-card dt {
  font-size: 9px
}

.info-card dd {
  font-size: 11px
}

.version-list b,
.audit-mini b {
  font-size: 10px
}

.version-list small,
.audit-mini span {
  font-size: 9px
}

.comment-form textarea,
.comment-list p {
  font-size: 12px
}

.composer-header h1 {
  font-size: 29px
}

.composer-header>div:first-child>a {
  font-size: 11px
}

.composer-header>div:first-child>span {
  font-size: 9px
}

.document-properties>header,
.composer-inspector section>header {
  font-size: 10px
}

.property-fields>label,
.property-row label,
.composer-inspector label {
  font-size: 10px
}

.property-fields select,
.property-fields input,
.composer-inspector input {
  font-size: 11px;
  height: 39px
}

.property-info span {
  font-size: 9px
}

.property-info strong {
  font-size: 11px
}

.format-toolbar button {
  font-size: 11px
}

.format-toolbar em {
  font-size: 9px
}

/* Official document blank */
.official-letter {
  font-family: "Times New Roman", Georgia, serif
}

.letterhead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  text-align: center;
  padding: 0 70px 13px
}

.letterhead-seal {
  width: 58px;
  height: 64px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border: 2px solid #173c5a;
  color: #173c5a;
  font: 700 14px "Segoe UI";
  clip-path: polygon(50% 0, 94% 16%, 89% 73%, 50% 100%, 11% 73%, 6% 16%)
}

.letterhead strong {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: .3px
}

.letterhead span {
  display: block;
  font-size: 11px;
  margin-top: 5px
}

.letterhead-rule {
  height: 4px;
  position: relative;
  margin-top: 3px
}

.letterhead-rule b,
.letterhead-rule i {
  display: block
}

.letterhead-rule b {
  height: 2px;
  background: #173c5a
}

.letterhead-rule i {
  height: 1px;
  background: #b18a45;
  margin-top: 2px
}

.letter-contact {
  display: flex;
  justify-content: space-between;
  padding-top: 7px;
  font-size: 9px;
  color: #536574
}

.letter-recipient {
  width: 48%;
  margin: 34px 0 0 auto;
  text-align: left 
}

.letter-recipient small {
  font: 700 9px "Segoe UI";
  letter-spacing: .8px;
  color: #72808c
}

.letter-recipient b,
.letter-recipient strong {
  font-size: 14px;
  line-height: 1.4
}

.letter-recipient span {
  font-size: 12px
}

.official-letter .paper-meta,
.official-letter .editable-meta {
  margin-top: 35px;
  font-size: 12px
}

.official-letter>h2,
.official-letter .editable-subject input {
  font-size: 17px;
  line-height: 1.45
}

.official-letter .paper-body,
.official-letter .editable-body textarea {
  font-size: 15px;
  line-height: 1.75
}

.official-letter .paper-basis p,
.official-letter .editable-basis textarea {
  font-size: 12px;
  line-height: 1.6
}

.official-letter .paper-signature,
.official-letter .editable-signature input {
  font-size: 13px
}

.letter-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-top: 1px solid #d7dde2;
  margin-top: 48px;
  padding-top: 12px
}

.letter-footer span {
  display: block;
  font: 10px/1.5 "Segoe UI", Arial, sans-serif;
  color: #687986
}

.document-qr {
  width: 46px;
  height: 46px;
  border: 4px double #173c5a;
  display: grid;
  place-items: center;
  font: 700 9px "Segoe UI";
  color: #173c5a;
  background: repeating-linear-gradient(45deg, #173c5a0e 0 3px, transparent 3px 6px)
}


/* ===== readability.css ===== */
/* Portal-wide readability and role-aware navigation refinement. */
body {
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility
}

.sidebar {
  width: 276px;
  padding-inline: 17px
}

.main-area {
  margin-left: 276px
}

.brand {
  height: 84px
}

.brand strong {
  font-size: 17px
}

.brand small {
  font-size: 11px;
  line-height: 1.35
}

.workspace-label {
  font-size: 10px;
  letter-spacing: 1.15px;
  margin: 22px 13px 9px;
  color: #8da5b6
}

.side-nav a {
  min-height: 48px;
  height: auto;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.3;
  border-radius: 6px
}

.nav-symbol {
  font-size: 17px;
  flex: 0 0 22px
}

.nav-count {
  font-size: 10px;
  min-width: 22px;
  text-align: center
}

.sidebar-footer small {
  font-size: 10px;
  line-height: 1.35
}

.topbar {
  height: 72px;
  padding-inline: 30px
}

.top-search {
  height: 42px
}

.top-search kbd {
  font-size: 10px
}

.notification {
  width: 40px;
  height: 40px
}

.avatar {
  width: 38px;
  height: 38px;
  font-size: 11px
}

.account-copy strong {
  font-size: 13px
}

.account-dropdown {
  top: 56px;
  width: 250px
}

.account-dropdown strong {
  font-size: 13px
}

.account-dropdown small {
  font-size: 11px
}

.account-dropdown a,
.account-dropdown button {
  font-size: 13px;
  padding: 13px 16px
}

.content {
  padding-top: 30px
}

.message {
  font-size: 13px
}

.command-heading p,
.page-title p,
.page-heading>div>span,
.document-heading>div>span {
  font-size: 13px
}

.breadcrumb,
.page-heading p,
.editor-heading p,
.document-heading>div>p {
  font-size: 11px
}

.command-strip span {
  font-size: 12px
}

.folder-pane>header {
  font-size: 12px
}

.folder-pane nav>div {
  font-size: 10px
}

.folder-pane nav a {
  min-height: 44px;
  height: auto;
  font-size: 13px;
  padding-block: 9px
}

.mail-toolbar>div strong {
  font-size: 15px
}

.mail-toolbar>div span,
.mail-toolbar select {
  font-size: 12px
}

.mail-columns {
  font-size: 10px
}

.mail-main header strong,
.mail-main time {
  font-size: 12px
}

.mail-main h3 {
  font-size: 16px;
  line-height: 1.4
}

.mail-main p {
  font-size: 13px
}

.status-tag,
.workflow-status {
  font-size: 11px
}

.mail-deadline small {
  font-size: 10px
}

.preview-header a,
.preview-number,
.preview-route {
  font-size: 12px
}

.preview-body dt {
  font-size: 11px
}

.preview-body dd {
  font-size: 13px
}

.preview-paper small,
.preview-timeline>small {
  font-size: 10px
}

.preview-paper p {
  font-size: 14px;
  line-height: 1.65
}

.preview-timeline article strong {
  font-size: 12px
}

.preview-timeline article span {
  font-size: 11px
}

.side-card p,
.side-card li {
  font-size: 13px;
  line-height: 1.6
}

.response-upload label,
.response-upload input {
  font-size: 13px
}

.file-versions b {
  font-size: 13px
}

.file-versions span {
  font-size: 11px
}

.verify-page dt {
  font-size: 13px
}

.verify-page dd {
  font-size: 14px
}

.bar-list span {
  font-size: 13px
}

.bar-list b {
  font-size: 14px
}

@media(max-width:1050px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .2s
  }

  .sidebar.mobile-open {
    transform: translateX(0)
  }

  .main-area {
    margin-left: 0
  }

  .menu-toggle {
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    font-size: 22px;
    margin-right: 12px
  }
}

/* International case-management workspace */
.workspace-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 26px
}

.workspace-head h1 {
  font: 600 clamp(28px, 2.3vw, 38px)/1.18 "Segoe UI", Arial, sans-serif;
  letter-spacing: -.6px;
  margin: 4px 0 8px;
  color: #102c43
}

.workspace-head>div>p:last-child {
  margin: 0;
  color: #627483;
  font-size: 14px
}

.workspace-head .primary-btn {
  font-size: 14px;
  min-height: 46px;
  padding-inline: 19px;
  border-radius: 6px;
  box-shadow: 0 4px 12px #0b294218
}

.task-overview {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px
}

.metric-card {
  position: relative;
  display: flex;
  min-height: 142px;
  flex-direction: column;
  padding: 19px 18px;
  background: #fff;
  border: 1px solid #d5dee5;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 2px 8px #12324d08;
  overflow: hidden
}

.metric-card:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #9aabb8
}

.metric-card:hover {
  border-color: #9bb1c1;
  box-shadow: 0 7px 20px #12324d12;
  transform: translateY(-1px)
}

.metric-card>span {
  font-size: 13px;
  font-weight: 650;
  color: #506473
}

.metric-card>strong {
  font: 650 32px/1.1 "Segoe UI", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #102e46;
  margin: 9px 0 7px
}

.metric-card>small {
  font-size: 11px;
  line-height: 1.4;
  color: #82919d
}

.metric-primary:before {
  background: #23658f
}

.metric-success:before {
  background: #2c7958
}

.metric-warning:before {
  background: #b47a20
}

.metric-danger:before {
  background: #ad3f3f
}

.metric-warning>strong {
  color: #986415
}

.metric-danger>strong {
  color: #a23838
}

.registry-pro {
  background: #fff;
  border: 1px solid #d4dde4;
  border-radius: 9px;
  box-shadow: 0 3px 14px #102d440a;
  overflow: hidden
}

.registry-pro-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  padding: 21px 23px;
  border-bottom: 1px solid #dce3e8
}

.registry-pro-head h2 {
  font-size: 20px;
  line-height: 1.25;
  margin: 0;
  color: #15344c
}

.registry-pro-head p {
  font-size: 12px;
  color: #758692;
  margin: 5px 0 0
}

.registry-filters {
  display: flex;
  align-items: end;
  gap: 10px
}

.registry-filters label {
  display: block
}

.registry-filters label>span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #536777;
  margin-bottom: 5px
}

.registry-filters input,
.registry-filters select {
  height: 40px;
  border: 1px solid #cbd6de;
  border-radius: 5px;
  background: #fff;
  padding: 0 11px;
  font-size: 13px;
  color: #263c4d;
  outline: none
}

.registry-filters input {
  width: 245px
}

.registry-filters select {
  width: 190px
}

.registry-filters input:focus,
.registry-filters select:focus {
  border-color: #2c6d98;
  box-shadow: 0 0 0 3px #2c6d9817
}

.registry-filters .button-secondary {
  height: 40px;
  min-height: 40px
}

.filter-reset {
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  font-size: 12px;
  color: #32698f
}

.registry-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1050px
}

.registry-table th {
  height: 43px;
  padding: 0 16px;
  background: #f4f7f9;
  border-bottom: 1px solid #d9e1e7;
  color: #657887;
  text-align: left;
  font-size: 10px;
  letter-spacing: .55px;
  text-transform: uppercase
}

.registry-table td {
  padding: 15px 16px;
  border-bottom: 1px solid #e3e8ec;
  vertical-align: middle;
  color: #354a5a;
  font-size: 13px
}

.registry-table td strong,
.registry-table td span,
.registry-table td small,
.registry-table time {
  display: block
}

.document-cell>strong {
  color: #1d628e;
  font-size: 12px;
  letter-spacing: .2px
}

.document-cell>span {
  max-width: 360px;
  margin: 5px 0;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 650;
  color: #173248
}

.document-cell>small,
.registry-table td>span,
.registry-table time small {
  font-size: 11px;
  color: #7b8b97;
  margin-top: 3px
}

.registry-table td:nth-child(2)>strong,
.registry-table td:nth-child(3)>strong {
  font-size: 12px;
  color: #304757
}

.status-pill {
  display: inline-flex ;
  align-items: center;
  gap: 7px;
  max-width: 200px;
  padding: 7px 9px;
  border-radius: 4px;
  background: #edf3f6;
  color: #34556b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25
}

.status-pill i {
  display: block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #547d97
}

.status-pill.s-closed {
  background: #e8f3ed;
  color: #276846
}

.status-pill.s-closed i {
  background: #2e7956
}

.status-pill.s-returned_leader,
.status-pill.s-returned_prosecutor,
.status-pill.s-response_returned {
  background: #f8ecec;
  color: #933b3b
}

.status-pill.s-returned_leader i,
.status-pill.s-returned_prosecutor i,
.status-pill.s-response_returned i {
  background: #ac4141
}

.due {
  font-size: 12px ;
  color: #536676 
}

.due strong {
  display: inline ;
  font-size: 18px;
  color: #18384f
}

.due-danger strong {
  color: #a43c3c
}

.due-warning strong {
  color: #9a6717
}

.row-open {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #cdd8df;
  border-radius: 5px;
  text-decoration: none;
  color: #27648d;
  font-size: 17px
}

.row-open:hover {
  background: #174c70;
  color: #fff;
  border-color: #174c70
}

.registry-empty {
  text-align: center;
  padding: 50px
}

.registry-empty strong,
.registry-empty span {
  display: block
}

.registry-empty strong {
  font-size: 17px
}

.registry-empty span {
  font-size: 13px;
  color: #778894;
  margin-top: 6px
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 16px 22px;
  border-top: 1px solid #dde4e9
}

.pagination a {
  padding: 8px 11px;
  border: 1px solid #cbd6de;
  border-radius: 5px;
  text-decoration: none;
  font-size: 12px;
  color: #285f85
}

.pagination span {
  font-size: 12px;
  color: #667886
}

.visually-hidden {
  position: absolute ;
  width: 1px ;
  height: 1px ;
  padding: 0 ;
  margin: -1px ;
  overflow: hidden ;
  clip: rect(0, 0, 0, 0) ;
  white-space: nowrap ;
  border: 0 
}

@media(max-width:1450px) {
  .task-overview {
    grid-template-columns: repeat(3, 1fr)
  }

  .metric-card {
    min-height: 125px
  }

  .registry-pro-head {
    align-items: flex-start;
    flex-direction: column
  }

  .registry-filters {
    width: 100%
  }

  .registry-filters label:first-child {
    flex: 1
  }

  .registry-filters input {
    width: 100%
  }
}

@media(max-width:760px) {
  .workspace-head {
    align-items: flex-start;
    flex-direction: column
  }

  .workspace-head h1 {
    font-size: 28px
  }

  .task-overview {
    grid-template-columns: 1fr 1fr
  }

  .metric-card {
    min-height: 132px
  }

  .registry-filters {
    align-items: stretch;
    flex-direction: column
  }

  .registry-filters select {
    width: 100%
  }

  .content {
    padding-inline: 14px
  }

  .top-search {
    display: none
  }
}

.main-area {
  width: calc(100% - 276px);
  min-width: 0;
  overflow: hidden
}

html,
body {
  max-width: 100%;
  overflow-x: hidden
}

@media(max-width:1050px) {
  .main-area {
    width: 100%
  }
}

.language-switcher,
.login-languages {
  display: flex;
  align-items: center;
  border: 1px solid #cbd7df;
  border-radius: 6px;
  background: #fff;
  padding: 3px
}

.language-switcher a,
.login-languages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  border-radius: 4px;
  color: #607583;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .35px
}

.language-switcher a.active,
.login-languages a.active {
  background: #153f5d;
  color: #fff
}

.login-languages {
  width: max-content;
  margin: 0 0 30px auto
}

.login-languages a {
  min-width: auto;
  padding-inline: 12px;
  font-size: 12px
}

.login-hero h1 {
  max-width: 780px;
  line-height: 1.12
}

.login-hero p {
  font-size: 16px;
  line-height: 1.65
}

.login-form label {
  font-size: 13px
}

.login-form input {
  font-size: 15px
}

.login-submit {
  font-size: 15px
}

.login-box h2 {
  font-size: 34px
}

.login-lead {
  font-size: 15px
}

@media(max-width:760px) {
  .language-switcher {
    display: none
  }

  .login-languages {
    margin: 0 0 22px
  }

  .login-languages a {
    padding-inline: 9px
  }
}

/* Reference-inspired institutional document workspace */
.module-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px
}

.module-heading p {
  margin: 0 0 6px;
  color: #a17225;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px
}

.module-heading h1 {
  margin: 0;
  color: #102e46;
  font: 650 34px/1.15 "Segoe UI", Arial, sans-serif;
  letter-spacing: -.5px
}

.module-heading span {
  display: block;
  margin-top: 8px;
  color: #647684;
  font-size: 14px
}

.control-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px
}

.control-summary a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
  padding: 18px 20px;
  border: 1px solid #d4dee5;
  border-radius: 7px;
  background: #fff;
  text-decoration: none;
  color: #395162;
  box-shadow: 0 2px 8px #12324d08
}

.control-summary a:before {
  content: "";
  position: absolute;
  left: -1px;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #537a94
}

.control-summary a.active {
  border-color: #6d91a8;
  box-shadow: 0 0 0 2px #2c6d9813
}

.control-summary span {
  font-size: 14px;
  font-weight: 650
}

.control-summary b {
  font: 650 28px/1 "Segoe UI", Arial, sans-serif;
  color: #183b54
}

.control-summary .warning:before {
  background: #b17a24
}

.control-summary .danger:before {
  background: #aa4040
}

.control-summary .success:before {
  background: #2b7655
}

.register-module,
.file-browser {
  background: #fff;
  border: 1px solid #d4dde4;
  border-radius: 8px;
  box-shadow: 0 3px 15px #102d4409;
  overflow: hidden
}

.register-module>header,
.file-browser>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid #dbe3e8
}

.register-module h2,
.file-browser h2 {
  font-size: 18px;
  margin: 0;
  color: #15344c
}

.register-module header span {
  font-size: 12px;
  color: #788995
}

.register-module input,
.file-browser input {
  width: 280px;
  height: 40px;
  border: 1px solid #cbd6de;
  border-radius: 5px;
  padding: 0 12px;
  font-size: 13px
}

.office-register {
  width: 100%;
  min-width: 1020px;
  border-collapse: collapse
}

.office-register th {
  height: 44px;
  padding: 0 15px;
  background: #f2f5f7;
  border-bottom: 1px solid #d8e1e6;
  color: #607482;
  text-align: left;
  font-size: 10px;
  letter-spacing: .55px;
  text-transform: uppercase
}

.office-register td {
  padding: 14px 15px;
  border-bottom: 1px solid #e2e8ec;
  color: #344a59;
  font-size: 13px;
  vertical-align: middle
}

.office-register tbody tr:hover {
  background: #f8fafb
}

.office-register a {
  text-decoration: none;
  color: #24628c
}

.office-register td>a b,
.office-register td>a span,
.office-register td>small {
  display: block
}

.office-register td>a span,
.office-register td>small {
  margin-top: 4px;
  color: #71838f;
  font-size: 11px
}

.office-register .status-pill {
  display: inline-flex 
}

.deadline-value {
  font-size: 13px
}

.deadline-value.due-red {
  color: #a13939
}

.deadline-value.due-amber {
  color: #9a6717
}

.empty-register {
  text-align: center ;
  padding: 48px ;
  color: #748590 
}

.registry-export {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 13px;
  border: 1px solid #cbd6de;
  border-radius: 5px;
  color: #285f85;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700
}

.file-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 320px));
  gap: 12px;
  margin-bottom: 18px
}

.file-stat {
  padding: 20px;
  background: #fff;
  border: 1px solid #d5dee5;
  border-radius: 7px
}

.file-stat span,
.file-stat small {
  display: block
}

.file-stat span {
  font-size: 13px;
  color: #5a6d7b;
  font-weight: 650
}

.file-stat b {
  display: block;
  margin: 8px 0 6px;
  font-size: 30px;
  color: #173b54
}

.file-stat small {
  font-size: 11px;
  color: #82919c
}

.file-type {
  display: inline-grid ;
  place-items: center;
  width: 42px;
  height: 25px;
  margin-right: 9px;
  border-radius: 4px;
  background: #e8f0f5;
  color: #28658c ;
  font-size: 9px ;
  font-weight: 800;
  float: left
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

.guide-grid article {
  position: relative;
  min-height: 210px;
  padding: 25px 24px;
  background: #fff;
  border: 1px solid #d5dee5;
  border-radius: 8px;
  box-shadow: 0 2px 9px #102d4408
}

.guide-grid article>b {
  display: block;
  color: #a6782c;
  font-size: 12px;
  letter-spacing: 1px
}

.guide-grid h2 {
  font-size: 18px;
  margin: 25px 0 10px;
  color: #15364e
}

.guide-grid p {
  font-size: 14px;
  line-height: 1.65;
  color: #5f7180;
  margin: 0
}

.dossier-tabs {
  position: sticky;
  top: 72px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 14px;
  padding: 0 13px;
  background: #fff;
  border: 1px solid #d5dee5;
  border-radius: 7px
}

.dossier-tabs a {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 50px;
  padding: 0 14px;
  border-bottom: 2px solid transparent;
  color: #536a79;
  text-decoration: none;
  font-size: 13px;
  font-weight: 650
}

.dossier-tabs a.active,
.dossier-tabs a:hover {
  color: #195b86;
  border-bottom-color: #216b99
}

.dossier-tabs b {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #e8eff4;
  font-size: 10px
}

.dossier-tabs>span {
  flex: 1
}

.dossier-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) minmax(180px, .65fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 17px 20px;
  background: #f8fafb;
  border: 1px solid #d5dee5;
  border-radius: 7px
}

.dossier-summary div>span,
.dossier-summary div>b,
.dossier-summary div>small {
  display: block
}

.dossier-summary div>span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .65px;
  color: #7b8d99
}

.dossier-summary div>b {
  margin-top: 5px;
  font-size: 12px;
  color: #203e53
}

.dossier-summary>i {
  text-align: center;
  color: #8296a4;
  font-style: normal
}

.dossier-deadline {
  padding-left: 18px;
  border-left: 1px solid #d5dee5
}

.dossier-deadline small {
  margin-top: 4px;
  color: #a06a18;
  font-size: 10px
}

@media(max-width:1100px) {

  .control-summary,
  .guide-grid {
    grid-template-columns: 1fr 1fr
  }

  .dossier-summary {
    grid-template-columns: 1fr 24px 1fr
  }

  .dossier-summary .dossier-deadline {
    grid-column: 1/-1;
    border-left: 0;
    border-top: 1px solid #d5dee5;
    padding: 12px 0 0
  }

  .dossier-tabs {
    overflow: auto
  }

  .dossier-tabs a {
    white-space: nowrap
  }
}

@media(max-width:700px) {

  .control-summary,
  .guide-grid,
  .file-dashboard {
    grid-template-columns: 1fr
  }

  .module-heading {
    align-items: flex-start;
    flex-direction: column
  }

  .register-module>header,
  .file-browser>header {
    align-items: flex-start;
    flex-direction: column
  }

  .register-module input,
  .file-browser input {
    width: 100%
  }

  .dossier-summary {
    grid-template-columns: 1fr
  }

  .dossier-summary>i {
    transform: rotate(90deg)
  }

  .dossier-tabs {
    top: 72px
  }
}

.brand-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  filter: drop-shadow(0 3px 7px #071e2f38)
}

.login-logo {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  filter: drop-shadow(0 5px 12px #06192745)
}

.login-brand {
  align-items: center
}

.login-brand strong {
  font-size: 21px;
  letter-spacing: 1.7px
}

.login-brand small {
  max-width: 330px;
  line-height: 1.35
}

.mobile-brand .login-logo {
  width: 42px;
  height: 42px;
  flex-basis: 42px
}

.workspace-head button.primary-btn {
  border: 0;
  cursor: pointer
}

.registry-boxes {
  display: flex;
  gap: 3px;
  padding: 0 20px;
  border-bottom: 1px solid #d8e1e7;
  background: #f8fafb;
  overflow: auto
}

.registry-boxes a {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 2px solid transparent;
  color: #5b7180;
  text-decoration: none;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700
}

.registry-boxes a:hover,
.registry-boxes a.active {
  color: #1b608d;
  border-bottom-color: #236b99;
  background: #fff
}

.create-document-dialog {
  width: min(760px, calc(100vw - 30px));
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 25px 80px #061c2c55
}

.create-document-dialog::backdrop {
  background: #081c2a99;
  backdrop-filter: blur(3px)
}

.create-document-dialog>header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 25px 27px;
  border-bottom: 1px solid #dbe3e8
}

.create-document-dialog header span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #a17225
}

.create-document-dialog h2 {
  font-size: 24px;
  margin: 5px 0;
  color: #14344c
}

.create-document-dialog p {
  margin: 0;
  color: #6c7e8a;
  font-size: 13px
}

.create-document-dialog header>button {
  width: 36px;
  height: 36px;
  border: 1px solid #d1dce3;
  border-radius: 5px;
  background: #fff;
  font-size: 22px;
  color: #637784;
  cursor: pointer
}

.document-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 24px 27px 28px
}

.document-type-grid a {
  position: relative;
  min-height: 138px;
  padding: 20px;
  border: 1px solid #d3dde4;
  border-radius: 7px;
  color: #16364e;
  text-decoration: none;
  transition: .15s
}

.document-type-grid a:hover {
  border-color: #3b789f;
  box-shadow: 0 7px 18px #14344c16;
  transform: translateY(-1px)
}

.document-type-grid i {
  display: block;
  color: #a67a32;
  font-size: 10px;
  font-style: normal;
  font-weight: 800
}

.document-type-grid b,
.document-type-grid span {
  display: block
}

.document-type-grid b {
  font-size: 16px;
  margin: 18px 0 7px
}

.document-type-grid span {
  font-size: 12px;
  line-height: 1.5;
  color: #687b88
}

@media(max-width:600px) {
  .document-type-grid {
    grid-template-columns: 1fr
  }

  .create-document-dialog>header,
  .document-type-grid {
    padding-inline: 18px
  }
}


/* ===== product-v2.css ===== */
.login-box h2 {
  font-family: "Segoe UI", Arial, sans-serif 
}

.login-page {
  grid-template-columns: 520px minmax(520px, 1fr) 
}

.login-panel {
  order: 1 ;
  border-right: 1px solid #e0e4e8
}

.login-context {
  order: 2 
}

.login-panel .login-box {
  max-width: 370px
}

.login-panel .login-language-menu {
  margin-bottom: 64px
}

.login-context {
  padding-left: 8%;
  padding-right: 8%
}

.login-context .login-brand {
  justify-content: flex-end;
  text-align: right
}

.login-context .login-hero {
  margin: auto 0;
  text-align: right
}

.login-context .login-hero p {
  margin-left: auto
}

.login-context .login-assurance {
  margin-left: auto
}

.login-form .field {
  background: #f9fafb
}

.login-form .field:focus-within {
  background: #fff
}

.login-submit {
  background: #0d3553
}

.login-submit:hover {
  background: #092b45
}

html,
body {
  max-width: 100%;
  margin: 0;
  overflow-x: hidden
}

body {
  background: var(--eh-bg);
  color: var(--eh-text);
  font: 15px/1.5 "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased
}

/* Authentication */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(520px, 1fr) 520px;
  background: #fff
}

.login-context {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 54px 6.5%;
  overflow: hidden;
  background: var(--ui-navy-900);
  color: #fff
}

.login-context:after {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  right: -290px;
  bottom: -440px;
  border: 1px solid #ffffff0e;
  border-radius: 50%;
  box-shadow: 0 0 0 100px #ffffff08, 0 0 0 200px #ffffff05
}

.login-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 15px
}

.login-logo {
  width: 62px;
  height: 62px;
  filter: drop-shadow(0 5px 12px #0005)
}

.login-brand strong,
.login-brand small {
  display: block
}

.login-brand strong {
  font-size: 20px;
  letter-spacing: 2px
}

.login-brand small {
  max-width: 380px;
  margin-top: 5px;
  color: #9caec1;
  font-size: 10px;
  letter-spacing: .7px;
  text-transform: uppercase
}

.login-hero {
  position: relative;
  z-index: 1;
  margin: auto 0 0
}

.login-hero .eyebrow {
  display: block;
  margin-bottom: 18px;
  color: #88aec8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px
}

.login-hero h1 {
  margin: 0;
  font-size: 58px;
  font-weight: 300;
  letter-spacing: 3px
}

.login-hero p {
  max-width: 560px;
  margin: 14px 0 0;
  color: #bdc9d5;
  font-size: 18px
}

.login-assurance {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 28px;
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid #ffffff19
}

.login-assurance span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a9b8c7;
  font-size: 11px
}

.login-assurance b {
  width: 7px;
  height: 7px;
  border: 1px solid var(--eh-green);
  transform: rotate(45deg)
}

.login-panel {
  display: grid;
  place-items: center;
  padding: 48px 64px;
  background: #fff
}

.login-box {
  width: 100%;
  max-width: 390px
}

.login-language-menu {
  position: relative;
  width: 92px;
  margin: 0 0 46px auto
}

.login-language-menu summary,
.language-menu summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #d8dee3;
  border-radius: 5px;
  background: #fff;
  color: #35485a;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer
}

.login-language-menu summary::-webkit-details-marker,
.language-menu summary::-webkit-details-marker {
  display: none
}

.login-language-menu nav,
.language-menu nav {
  position: absolute;
  z-index: 80;
  top: 44px;
  right: 0;
  min-width: 170px;
  padding: 6px;
  border: 1px solid #d8dee3;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 30px #0b1e2e24
}

.login-language-menu nav a,
.language-menu nav a {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 4px;
  color: #415565;
  text-decoration: none;
  font-size: 12px
}

.login-language-menu nav a:hover,
.login-language-menu nav a.active,
.language-menu nav a:hover,
.language-menu nav a.active {
  background: #edf7f2;
  color: #14754f
}

.login-box>.eyebrow {
  display: block;
  margin-bottom: 10px;
  color: #7192a9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.25px
}

.login-box h2 {
  margin: 0;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -.5px
}

.login-lead {
  margin: 9px 0 32px;
  color: #74808b;
  font-size: 14px
}

.login-error {
  margin-bottom: 17px;
  padding: 12px 14px;
  border-left: 3px solid #b94545;
  background: #faeeee;
  color: #913a3a;
  font-size: 12px
}

.login-form>label {
  display: block;
  margin: 18px 0 7px;
  color: #334759;
  font-size: 12px;
  font-weight: 700
}

.field {
  height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid #ccd5dc;
  border-radius: 5px;
  background: #fff
}

.field:focus-within {
  border-color: #3679a4;
  box-shadow: 0 0 0 3px #3679a414
}

.field input {
  height: 100%;
  min-width: 0;
  flex: 1;
  padding: 0 14px;
  border: 0;
  background: transparent;
  outline: 0;
  font-size: 14px
}

.field>span,
.field button {
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: #667987;
  font-size: 11px
}

.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 17px 0 24px;
  font-size: 11px
}

.login-options label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #667684
}

.login-options a {
  color: #1c6e9f;
  text-decoration: none;
  font-weight: 700
}

.login-submit {
  width: 100%;
  height: 50px;
  padding: 0 17px;
  border: 0;
  border-radius: 5px;
  background: #123e5f;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer
}

.login-submit span {
  float: right;
  font-size: 18px
}

/* Main shell */
.shell {
  min-height: 100vh
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: 224px;
  display: flex;
  flex-direction: column;
  padding: 0 18px 18px;
  background: var(--ui-navy-900);
  color: #adb7ca
}

.brand {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  color: #fff;
  text-decoration: none
}

.brand-logo {
  width: 43px;
  height: 43px
}

.brand strong {
  display: block;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1px
}

.brand small {
  display: none
}

.workspace-label {
  margin: 18px 11px 7px;
  color: #596581;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.1px
}

.side-nav a {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  padding: 8px 11px;
  border-radius: 8px;
  color: #aeb7cb;
  text-decoration: none;
  font-size: 13px
}

.side-nav a:hover {
  background: #18233f;
  color: #fff
}

.side-nav a.active {
  background: #263249;
  color: #fff
}

.side-nav a.active .nav-symbol {
  color: var(--eh-green)
}

.nav-symbol {
  width: 21px;
  text-align: center
}

.nav-count {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 10px;
  background: #1887d1;
  color: #fff;
  font-size: 9px
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 17px 10px 2px;
  border-top: 1px solid #28334c
}

.security-dot {
  width: 8px;
  height: 8px;
  border: 2px solid var(--eh-green);
  border-radius: 50%
}

.sidebar-footer strong,
.sidebar-footer small {
  display: block
}

.sidebar-footer strong {
  font-size: 10px;
  color: #d5dce5
}

.sidebar-footer small {
  margin-top: 3px;
  color: #73819a;
  font-size: 8px
}

.main-area {
  width: calc(100% - 224px);
  min-width: 0;
  margin-left: 224px
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid #e0e4e8;
  background: #fff;
  box-shadow: 0 2px 7px #15233a0d
}

.menu-toggle {
  display: none
}

.top-search {
  width: min(470px, 38vw);
  height: 39px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #dde2e6;
  border-radius: 5px;
  background: #f7f8f9
}

.top-search>span {
  font-size: 18px;
  color: #7a8994
}

.top-search input {
  min-width: 0;
  flex: 1;
  padding: 0 8px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12px
}

.top-search kbd {
  padding: 3px 5px;
  border: 1px solid #d8dde1;
  border-radius: 3px;
  background: #fff;
  color: #8a959d;
  font-size: 8px
}

.top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px
}

.top-create {
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 5px;
  background: var(--eh-green);
  box-shadow: 0 7px 16px #35b77e29;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700
}

.language-menu {
  position: relative
}

.language-menu summary {
  min-width: 68px
}

.notification {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #dce1e5;
  border-radius: 5px;
  background: #fff;
  color: #236d99;
  text-decoration: none
}

.notification b {
  position: absolute;
  right: -4px;
  top: -5px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #b34040;
  color: #fff;
  font-size: 7px
}

.account-menu {
  position: relative;
  margin-left: 4px
}

.account-button {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 7px;
  border: 0;
  background: transparent;
  text-align: left
}

.avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e7ebef;
  color: #1c3549;
  font-size: 10px;
  font-weight: 800
}

.account-copy strong,
.account-copy small {
  display: block
}

.account-copy strong {
  font-size: 11px
}

.account-copy small {
  margin-top: 2px;
  color: #7b8994;
  font-size: 9px
}

.account-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 51px;
  width: 230px;
  overflow: hidden;
  border: 1px solid var(--eh-line);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 15px 35px #0b29421f
}

.account-dropdown.open {
  display: block
}

.account-dropdown>div {
  padding: 14px;
  border-bottom: 1px solid var(--eh-line)
}

.account-dropdown strong,
.account-dropdown small {
  display: block
}

.account-dropdown small {
  color: #7c8994;
  font-size: 9px
}

.account-dropdown a,
.account-dropdown button {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  background: #fff;
  color: #32485a;
  text-align: left;
  text-decoration: none;
  font-size: 11px
}

.content {
  max-width: none;
  margin: 0;
  padding: 18px 16px 35px
}

.message {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 12px 14px;
  border-left: 3px solid var(--eh-green);
  background: #eaf5ef;
  font-size: 12px
}

/* Registry */
.workspace-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  padding: 0 3px
}

.workspace-head h1 {
  margin: 3px 0 6px;
  font-size: 26px;
  font-weight: 650
}

.workspace-head p {
  margin: 0;
  color: #6f7e89;
  font-size: 12px
}

.breadcrumb {
  color: #9a732f ;
  font-size: 9px ;
  font-weight: 800;
  letter-spacing: 1px
}

.primary-btn {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 15px;
  border: 0;
  border-radius: 5px;
  background: var(--eh-green);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer
}

.task-overview {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
  margin-bottom: 14px
}

.metric-card {
  min-height: 108px;
  display: flex;
  flex-direction: column;
  padding: 15px;
  border: 1px solid #d7dde2;
  border-radius: 7px;
  background: #fff;
  color: #405565;
  text-decoration: none
}

.metric-card>span {
  font-size: 11px;
  font-weight: 700
}

.metric-card>strong {
  margin: 5px 0;
  font-size: 27px;
  color: #19374e
}

.metric-card>small {
  color: #84919a;
  font-size: 9px
}

.registry-pro {
  overflow: hidden;
  border: 1px solid #d6dce1;
  border-radius: 7px;
  background: #fff
}

.registry-boxes {
  display: flex;
  overflow: auto;
  border-bottom: 1px solid #dce1e5;
  background: #f3f4f6
}

.registry-boxes a {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 130px;
  padding: 0 13px;
  border-bottom: 2px solid transparent;
  color: #536778;
  text-decoration: none;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700
}

.registry-boxes a.active {
  border-bottom-color: var(--eh-green);
  background: #fff;
  color: #14754f
}

.registry-pro-head {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #dce1e5
}

.registry-pro-head h2 {
  margin: 0;
  font-size: 17px
}

.registry-pro-head p {
  margin: 3px 0 0;
  color: #7b8993;
  font-size: 10px
}

.registry-export {
  margin-left: auto;
  height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #d2d9df;
  border-radius: 4px;
  color: #296386;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700
}

.registry-filters {
  display: flex;
  align-items: flex-end;
  gap: 7px
}

.registry-filters label>span {
  display: block;
  margin-bottom: 4px;
  color: #637582;
  font-size: 9px;
  font-weight: 700
}

.registry-filters input,
.registry-filters select {
  height: 38px;
  padding: 0 9px;
  border: 1px solid #d2d9df;
  border-radius: 4px;
  background: #fff;
  font-size: 11px
}

.registry-filters input {
  width: 210px
}

.registry-filters select {
  width: 160px
}

.registry-filters button {
  height: 38px
}

.filter-reset {
  padding: 10px 4px;
  color: #2b688e;
  font-size: 10px
}

.registry-table-wrap {
  overflow: auto
}

.registry-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse
}

.registry-table th {
  height: 47px;
  padding: 0 13px;
  border-bottom: 1px solid #d9dee3;
  background: #f0f1f4;
  color: #2f3b55;
  text-align: left;
  font-size: 10px
}

.column-filters th {
  height: 47px;
  padding: 6px
}

.column-filters input,
.column-filters select {
  width: 100%;
  height: 33px;
  padding: 0 7px;
  border: 1px solid #d2d8de;
  border-radius: 4px;
  background: #fff;
  font-size: 9px
}

.registry-table td {
  padding: 13px;
  border-bottom: 1px solid #e2e6e9;
  color: #354b5b;
  font-size: 11px;
  vertical-align: middle
}

.registry-table tbody tr:hover {
  background: #f8fafb
}

.document-cell {
  text-decoration: none
}

.document-cell strong,
.document-cell span,
.document-cell small,
.registry-table td>strong,
.registry-table td>span,
.registry-table time {
  display: block
}

.document-cell strong {
  color: #1d6a9b;
  font-size: 10px
}

.document-cell span {
  max-width: 330px;
  margin: 4px 0;
  color: #243b4e;
  font-size: 12px;
  font-weight: 650
}

.document-cell small,
.registry-table td>span,
.registry-table time small {
  color: #7e8d98;
  font-size: 9px
}

.status-pill {
  display: inline-flex ;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 4px;
  background: #edf2f5;
  color: #38596e;
  font-size: 9px;
  font-weight: 700
}

.status-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4f7892
}

.due strong {
  display: inline ;
  font-size: 15px
}

.row-open {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: #eef3f6;
  color: #216b98;
  cursor: pointer
}

.registry-empty {
  padding: 45px;
  text-align: center
}

.pagination {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 14px 18px
}

.pagination a {
  color: #28648a;
  text-decoration: none;
  font-size: 10px
}

.pagination span {
  font-size: 10px
}

.cabinet-identity {
  display: block;
  margin-top: 8px;
  color: #84929c;
  font-size: 10px
}

.system-assigned-note {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #cfe2da;
  border-radius: 6px;
  background: #f5faf8;
  color: #436457;
  font-size: 11px
}

.system-assigned-note strong {
  color: #146b4c;
  white-space: nowrap
}

.essential-fields-compact {
  grid-template-columns: 1fr 1.5fr
}

.essential-fields-compact .wide {
  grid-column: 1/-1
}

.task-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.deadline-pending,
.deadline-complete {
  display: inline-block ;
  font-size: 9px;
  font-weight: 650
}

.deadline-pending {
  color: #768690
}

.deadline-complete {
  color: #22805d
}

.draft-housekeeping {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 16px;
  border-bottom: 1px solid #ead9b8;
  background: #fffaf0
}

.draft-housekeeping div {
  display: flex;
  flex-direction: column;
  gap: 3px
}

.draft-housekeeping strong {
  color: #6a4c17;
  font-size: 11px
}

.draft-housekeeping span {
  color: #806d4d;
  font-size: 10px
}

.draft-housekeeping button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d6a94f;
  border-radius: 4px;
  background: #fff;
  color: #76520d;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer
}

/* Drawer */
.document-drawer {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent
}

.document-drawer::backdrop {
  background: transparent
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: #050b19a8;
  backdrop-filter: blur(2px)
}

.document-drawer>section {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(920px, 76vw);
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -15px 0 45px #07112633
}

.document-drawer>section>header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 28px 14px
}

.document-drawer h2 {
  margin: 4px 0 0;
  font-size: 20px
}

.document-drawer header button {
  width: 38px;
  height: 38px;
  border: 2px solid #365ebd;
  border-radius: 5px;
  background: #fff;
  font-size: 19px
}

.document-drawer nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 28px;
  background: #f2f3f6
}

.document-drawer nav button {
  height: 44px;
  border: 0;
  background: transparent;
  font-size: 11px
}

.document-drawer nav button.active {
  background: #fff;
  box-shadow: 0 1px 5px #14203815
}

.drawer-content {
  flex: 1;
  overflow: auto;
  padding: 26px 28px
}

.drawer-content dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 55px
}

.drawer-content dl>div:nth-child(even) {
  text-align: right
}

.drawer-content dt {
  color: #9aa2b7;
  font-size: 10px
}

.drawer-content dd {
  margin: 5px 0 0;
  font-size: 12px;
  font-weight: 700
}

.drawer-wide {
  grid-column: 1/-1;
  text-align: left 
}

.drawer-file {
  width: 55%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding: 12px;
  border: 1px solid #dfe4e7;
  border-radius: 7px
}

.drawer-file>span {
  width: 44px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #e8f4ee;
  color: #258a62;
  font-size: 10px;
  font-weight: 800
}

.drawer-file b,
.drawer-file small {
  display: block
}

.drawer-file small {
  color: #8b98a1;
  font-size: 9px
}

.document-drawer footer {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding: 14px 28px;
  border-top: 1px solid #e1e5e8
}

.document-drawer footer a {
  height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid #d4dbe0;
  border-radius: 4px;
  color: #286489;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700
}

.document-drawer footer .drawer-primary {
  border-color: var(--eh-green);
  background: var(--eh-green);
  color: #fff
}

.hierarchy-tree {
  max-width: 720px
}

.hierarchy-tree article {
  position: relative;
  display: flex;
  gap: 13px;
  padding-bottom: 24px
}

.hierarchy-tree article:not(:last-child):before {
  content: "";
  position: absolute;
  left: 14px;
  top: 29px;
  bottom: 0;
  width: 2px;
  background: #d8e0e5
}

.hierarchy-tree i {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  border: 2px solid #b9c7d0;
  border-radius: 50%;
  background: #fff;
  font-style: normal;
  font-size: 10px
}

.hierarchy-tree .complete i {
  border-color: var(--eh-green);
  background: var(--eh-green);
  color: #fff
}

.hierarchy-tree b,
.hierarchy-tree span {
  display: block
}

.hierarchy-tree b {
  font-size: 12px
}

.hierarchy-tree span {
  color: #89969f;
  font-size: 10px
}

.drawer-timeline article {
  display: flex;
  gap: 11px;
  padding: 13px 0;
  border-bottom: 1px solid #e2e6e9
}

.drawer-timeline i {
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border: 2px solid var(--eh-green);
  border-radius: 50%
}

.drawer-discussion {
  padding: 22px;
  border: 1px solid #dfe4e7;
  border-radius: 6px;
  color: #657784;
  font-size: 12px
}

/* Professional editor */
.sample-composer {
  min-height: calc(100vh - 64px);
  margin: -18px -16px -35px;
  background: #eef0f2
}

.sample-editor-head {
  position: sticky;
  top: 64px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  border-bottom: 1px solid #dfe3e7;
  background: #fff
}

.sample-editor-head>div:first-child {
  display: flex;
  align-items: center;
  gap: 12px
}

.sample-editor-head h1 {
  margin: 0;
  font-size: 20px
}

.sample-editor-head>div:first-child>a {
  color: var(--eh-green);
  font-size: 30px;
  text-decoration: none
}

.editor-head-actions {
  display: flex;
  align-items: center;
  gap: 7px
}

.editor-head-actions>span {
  display: flex;
  gap: 6px;
  margin-right: 6px;
  color: #778690;
  font-size: 10px
}

.editor-head-actions a,
.editor-head-actions button {
  height: 39px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid #d5dce1;
  border-radius: 4px;
  background: #fff;
  color: #286286;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700
}

.editor-head-actions .draft-action {
  border-color: #f0aa3d;
  background: #f0aa3d;
  color: #443313
}

.editor-head-actions .send-action {
  border-color: var(--eh-green);
  background: var(--eh-green);
  color: #fff
}

.sample-metadata {
  margin: 15px;
  border: 1px solid #d9dfe4;
  border-radius: 6px;
  background: #fff
}

.sample-metadata>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 17px;
  border-bottom: 1px solid #e1e5e8
}

.sample-metadata h2 {
  margin: 0;
  font-size: 14px
}

.sample-metadata header button {
  border: 0;
  background: transparent;
  color: #47748f;
  font-size: 10px
}

.metadata-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  padding: 14px 17px 17px
}

.metadata-grid label>span {
  display: block;
  margin-bottom: 5px;
  color: #445969;
  font-size: 9px;
  font-weight: 700
}

.metadata-grid input,
.metadata-grid select {
  width: 100%;
  height: 37px;
  padding: 0 8px;
  border: 1px solid #d2dae0;
  border-radius: 4px;
  background: #fff;
  font-size: 10px
}

.metadata-wide {
  grid-column: 1/-1
}

.office-editor {
  margin: 0 15px 24px;
  overflow: hidden;
  border: 1px solid #d7dde2;
  border-radius: 6px;
  background: #fff
}

.office-titlebar {
  height: 37px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 0 13px;
  background: #f5f6f7;
  color: #61707a;
  font-size: 9px
}

.office-titlebar span {
  text-align: center
}

.office-titlebar div {
  text-align: right;
  color: #27875f
}

.ribbon-tabs {
  height: 37px;
  display: flex;
  align-items: center;
  padding: 0 11px;
  border-bottom: 1px solid #dfe4e7
}

.ribbon-tabs button {
  height: 37px;
  padding: 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #35485a;
  font-size: 10px
}

.ribbon-tabs button.active {
  border-bottom-color: #2f6f9e;
  color: #1d5f8b
}

.office-ribbon {
  min-height: 88px;
  display: flex;
  align-items: stretch;
  padding: 7px 9px;
  border-bottom: 1px solid #d7dde1;
  background: #fafafa;
  overflow: auto
}

.ribbon-group {
  position: relative;
  min-width: max-content;
  display: flex;
  align-items: flex-start;
  gap: 3px;
  padding: 4px 10px 19px;
  border-right: 1px solid #dce1e5
}

.ribbon-group button,
.ribbon-group select {
  height: 31px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #2d4050;
  font-size: 10px
}

.ribbon-group button:hover {
  background: #e8edf1
}

.ribbon-group select {
  border-color: #d4dbe0;
  background: #fff
}

.ribbon-group>small {
  position: absolute;
  inset: auto 0 0;
  text-align: center;
  color: #8b969e;
  font-size: 7px
}

.font-tools {
  display: grid;
  grid-template-columns: 125px 50px repeat(3, 30px)
}

.ribbon-zoom {
  margin-left: auto
}

.document-ruler {
  width: 780px;
  display: flex;
  justify-content: space-between;
  margin: 8px auto 0;
  padding: 1px 8px;
  border-bottom: 1px solid #aeb6bc;
  color: #8c969d;
  font-size: 7px
}

.office-stage {
  position: relative;
  min-height: 930px;
  display: flex;
  padding: 0 48px 42px 56px;
  overflow: auto;
  background: #e7e9eb
}

.office-stage>aside {
  position: absolute;
  left: 9px;
  top: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.office-stage>aside button {
  width: 31px;
  height: 31px;
  border: 0;
  background: transparent;
  color: #53626d
}

.office-stage .modern-paper {
  width: 794px ;
  min-width: 794px ;
  min-height: 1123px ;
  margin: 15px auto ;
  padding: 58px 70px ;
  background: #fff ;
  box-shadow: 0 2px 7px #15293b24 
}

.office-stage .editable-body textarea {
  min-height: 420px ;
  font: 16px/1.65 "Times New Roman", serif 
}

.office-status {
  height: 33px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 13px;
  border-top: 1px solid #dce1e4;
  background: #fff;
  color: #6f7d87;
  font-size: 8px
}

.office-status span:last-child {
  margin-left: auto;
  color: #27875f
}

/* Secondary modules */
.module-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px
}

.module-heading p {
  margin: 0;
  color: #977028;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px
}

.module-heading h1 {
  margin: 4px 0;
  font-size: 27px
}

.module-heading span {
  color: #71808b;
  font-size: 12px
}

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

.control-summary a,
.file-stat {
  padding: 16px;
  border: 1px solid #d7dde2;
  border-radius: 6px;
  background: #fff;
  color: #3d5262;
  text-decoration: none
}

.control-summary b,
.file-stat b {
  float: right;
  color: #183a52;
  font-size: 23px
}

.register-module,
.file-browser,
.official-calendar {
  overflow: hidden;
  border: 1px solid #d7dde2;
  border-radius: 6px;
  background: #fff
}

.register-scroll {
  overflow: auto
}

.office-register {
  width: 100%;
  min-width: 1000px;
  border-collapse: collapse
}

.office-register th,
.office-register td {
  padding: 12px;
  border-bottom: 1px solid #e1e5e8;
  text-align: left;
  font-size: 10px
}

.office-register th {
  background: #f1f3f5
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px
}

.guide-grid article {
  padding: 21px;
  border: 1px solid #d7dde2;
  border-radius: 6px;
  background: #fff
}

.guide-grid h2 {
  font-size: 16px
}

.guide-grid p {
  color: #697984;
  font-size: 12px
}

.calendar-nav {
  display: flex
}

.calendar-nav a {
  padding: 9px;
  border: 1px solid #d5dce1;
  color: #28668d;
  text-decoration: none
}

.calendar-weekdays b {
  padding: 10px;
  background: #f1f3f5;
  text-align: center;
  font-size: 9px
}

.calendar-week article {
  min-height: 120px;
  padding: 8px;
  border: 1px solid #e1e5e8
}

.cal-doc {
  display: block;
  margin-top: 5px;
  padding: 6px;
  border-left: 3px solid var(--eh-green);
  background: #edf5f1;
  color: #385161;
  text-decoration: none;
  font-size: 9px
}

@media(max-width:1250px) {
  .task-overview {
    grid-template-columns: repeat(3, 1fr)
  }

  .metadata-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .registry-pro-head {
    align-items: flex-start;
    flex-wrap: wrap
  }

  .registry-filters {
    width: 100%
  }

  .editor-head-actions>span {
    display: none
  }
}

@media(max-width:1050px) {
  .sidebar {
    transform: translateX(-100%);
    transition: .2s
  }

  .sidebar.mobile-open {
    transform: none
  }

  .main-area {
    width: 100%;
    margin-left: 0
  }

  .menu-toggle {
    display: block;
    margin-right: 10px;
    border: 0;
    background: transparent
  }

  .document-drawer>section {
    width: 92vw
  }
}

@media(max-width:760px) {
  .login-page {
    display: block
  }

  .login-context {
    display: none
  }

  .login-panel {
    min-height: 100vh;
    padding: 28px 22px
  }

  .mobile-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 46px
  }

  .top-search {
    display: none
  }

  .account-copy {
    display: none
  }

  .content {
    padding-inline: 12px
  }

  .task-overview {
    grid-template-columns: 1fr 1fr
  }

  .registry-filters {
    display: grid;
    grid-template-columns: 1fr
  }

  .registry-filters input,
  .registry-filters select {
    width: 100%
  }

  .document-drawer>section {
    width: 100vw
  }

  .drawer-content dl {
    grid-template-columns: 1fr
  }

  .drawer-content dl>div:nth-child(even) {
    text-align: left
  }

  .drawer-file {
    width: 100%
  }

  .sample-editor-head {
    align-items: flex-start;
    flex-direction: column
  }

  .editor-head-actions {
    width: 100%;
    overflow: auto
  }

  .metadata-grid {
    grid-template-columns: 1fr 1fr
  }

  .sample-composer {
    margin-inline: -12px
  }

  .control-summary,
  .file-dashboard,
  .guide-grid {
    grid-template-columns: 1fr
  }

  .top-create {
    display: none
  }
}

/* Security, version comparison and profile workspace */
.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
  gap: 22px;
  margin: 20px 0
}

.profile-grid>.simple-card,
.security-stack>.simple-card {
  margin-top: 0
}

.security-stack {
  display: grid;
  align-content: start;
  gap: 22px
}

.security-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px
}

.security-card-head>span {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 9px;
  background: #e8f7f1;
  color: #159467;
  font-size: 11px;
  box-shadow: inset 0 0 0 1px #c6eadb
}

.security-card-head h2 {
  margin: 0 0 5px;
  color: #0b2743;
  font-size: 21px
}

.security-card-head p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.5
}

.settings-form {
  display: grid;
  gap: 12px;
  margin-top: 24px
}

.settings-form label {
  display: grid;
  gap: 8px;
  font-weight: 700
}

.settings-form input,
.settings-form select {
  min-height: 48px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 0 14px;
  font: inherit;
  background: #fff
}

.password-settings-form .errorlist {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #fecaca;
  border-radius: 7px;
  background: #fff1f2;
  color: #9f1239;
  font-size: 13px;
  line-height: 1.45;
  list-style-position: inside
}

.password-guidance {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #d8e4ea;
  border-radius: 7px;
  background: #f7fafb
}

.password-guidance b {
  color: #29485e;
  font-size: 13px
}

.password-guidance span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45
}

.password-panel .button-primary {
  width: 100%;
  min-height: 46px
}

.settings-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px
}

.settings-section-head span {
  color: #9a6b18;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em
}

.settings-section-head h2 {
  margin: 5px 0 4px
}

.settings-section-head p {
  margin: 0;
  color: #64748b
}

.settings-section-head>b {
  padding: 7px 10px;
  border: 1px solid #b9e4d2;
  border-radius: 999px;
  background: #effaf6;
  color: #087454;
  font-size: 12px;
  white-space: nowrap
}

.letterhead-name-preview {
  display: grid;
  gap: 4px;
  margin: 22px 0 2px;
  padding: 18px;
  border: 1px solid #d9e2ea;
  border-left: 4px solid #b88a2a;
  border-radius: 8px;
  background: #f8fafc
}

.letterhead-name-preview small {
  color: #748396;
  font-size: 10px;
  font-weight: 800
}

.letterhead-name-preview strong,
.letterhead-name-preview span {
  color: #0b2743
}

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

.letterhead-contact-form label:first-of-type,
.letterhead-contact-form label:last-of-type,
.letterhead-contact-form>div {
  grid-column: 1 / -1
}

.letterhead-language-settings {
  grid-column: 1 / -1;
  border: 1px solid #d9e2ea;
  border-radius: 8px;
  background: #f8fafc
}

.letterhead-language-settings summary {
  padding: 14px 16px;
  color: #15547d;
  font-weight: 800;
  cursor: pointer
}

.letterhead-language-settings>div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 4px 16px 16px
}

@media (max-width: 720px) {
  .letterhead-language-settings>div {
    grid-template-columns: 1fr
  }
}

.security-panel h2,
.simple-card>h2 {
  font-size: 21px;
  margin: 0 0 8px
}

.security-ok {
  padding: 12px 14px;
  border-left: 4px solid #159467;
  background: #effaf6;
  color: #075f45
}

.totp-secret {
  display: block;
  padding: 14px;
  margin: 16px 0;
  background: #0b1734;
  color: #fff;
  border-radius: 7px;
  font-size: 17px;
  letter-spacing: 2px;
  overflow-wrap: anywhere
}

.session-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-top: 1px solid #e2e8f0
}

.session-list article div {
  display: grid;
  gap: 5px
}

.session-list span {
  color: #64748b;
  font-size: 14px
}

.diff-card {
  margin: 20px 0
}

.diff-scroll {
  overflow: auto;
  padding: 18px
}

.diff-scroll table.diff {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 14px
}

.diff-scroll td,
.diff-scroll th {
  padding: 7px;
  border: 1px solid #dbe3ec
}

.diff_add {
  background: #dcfce7
}

.diff_sub {
  background: #fee2e2
}

.diff_chg {
  background: #fef3c7
}

@media(max-width:900px) {
  .profile-grid {
    grid-template-columns: 1fr
  }

  .session-list article {
    align-items: flex-start;
    flex-direction: column
  }
}

.focused-create {
  width: min(100%, 1380px);
  max-width: none;
  margin: 0 auto;
  padding: 18px clamp(8px, 1vw, 18px) 50px
}

.focused-create>header {
  margin-bottom: 24px
}

.focused-create>header a {
  text-decoration: none;
  color: #176995
}

.focused-create>header p {
  margin: 22px 0 5px;
  color: #9a6b18;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em
}

.focused-create>header h1 {
  margin: 0 0 7px;
  font-size: 34px;
  color: #0a1c3a
}

.focused-create>header span {
  color: #63758a
}

.focused-create-card {
  padding: 32px 34px;
  border: 1px solid #d8e0e8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(15, 35, 60, .05)
}

.essential-fields,
.advanced-fields>div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.focused-create .essential-fields-compact {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
}

.focused-create label {
  display: grid;
  gap: 8px;
  color: #26394d;
  font-size: 14px;
  font-weight: 700
}

.focused-create label.wide {
  grid-column: 1/-1
}

.focused-create input,
.focused-create select,
.focused-create textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid #cbd6e0;
  border-radius: 6px;
  background: #fff;
  font: 15px inherit
}

.focused-create label small {
  color: #7a8794;
  font-weight: 400
}

.advanced-fields {
  margin-top: 26px;
  border-top: 1px solid #e2e8ef
}

.advanced-fields summary {
  padding: 20px 0;
  color: #176995;
  font-weight: 750;
  cursor: pointer
}

.advanced-fields summary small {
  color: #7d8995;
  font-weight: 400
}

.focused-create-card footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid #e2e8ef
}

@media(max-width:800px) {

  .essential-fields,
  .focused-create .essential-fields-compact,
  .advanced-fields>div {
    grid-template-columns: 1fr
  }

  .focused-create label.wide {
    grid-column: auto
  }

  .focused-create-card {
    padding: 20px
  }

  .focused-create {
    padding-inline: 0
  }
}

.button-primary:disabled,
.office-action:disabled {
  cursor: not-allowed ;
  opacity: .48;
  filter: grayscale(.2);
  box-shadow: none 
}


/* ===== shell-polish.css ===== */
.sidebar {
  width: 248px ;
  padding-inline: 18px 
}

.main-area {
  width: calc(100% - 248px) ;
  margin-left: 248px 
}

.brand {
  height: 76px ;
  gap: 12px ;
  padding-inline: 5px ;
  overflow: hidden
}

.brand-logo {
  width: 44px ;
  height: 44px ;
  flex: 0 0 44px
}

.brand>span {
  min-width: 0;
  display: block
}

.brand strong {
  white-space: nowrap ;
  font-size: 18px ;
  line-height: 1 ;
  letter-spacing: .7px 
}

.brand small {
  display: none 
}

.side-nav a {
  min-height: 43px ;
  font-size: 13px 
}

.workspace-label {
  margin-top: 19px ;
  font-size: 9px 
}

@media(max-width:1050px) {
  .sidebar {
    width: 248px 
  }

  .main-area {
    width: 100% ;
    margin-left: 0 
  }
}

/* Calm, information-first shell */
.side-nav a {
  min-height: 46px;
  font-size: 15px
}

.workspace-label {
  margin-top: 22px;
  font-size: 11px;
  letter-spacing: .11em
}

.topbar {
  min-height: 72px
}

.top-search input {
  font-size: 15px
}

.content {
  line-height: 1.5
}

.page-title h1,
.document-heading h1 {
  letter-spacing: -.025em
}

.button-primary,
.button-secondary,
.button-danger,
.primary-btn {
  font-weight: 700;
  letter-spacing: 0
}

.account-dropdown a,
.account-dropdown button {
  min-height: 42px;
  font-size: 14px
}


/* ===== account-management.css ===== */
.management-page {
  max-width: 1500px;
  margin: 0 auto;
  padding: 8px 4px 40px;
  color: #102a43
}

.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px
}

.page-heading h1 {
  margin: 5px 0 6px;
  font-size: 32px;
  letter-spacing: -.5px
}

.page-heading p,
.panel p {
  margin: 0;
  color: #687b8c
}

.eyebrow {
  color: #9a6b12;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px
}

.management-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(330px, .7fr);
  gap: 20px
}

.panel {
  padding: 24px;
  border: 1px solid #d8e0e7;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 8px #102a4308
}

.panel h2 {
  margin: 0 0 5px;
  font-size: 19px
}

.panel-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid #e4e9ee
}

.account-list article {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 17px 0;
  border-bottom: 1px solid #e8edf1
}

.account-list article:last-child {
  border: 0
}

.account-list strong,
.account-list small {
  display: block
}

.account-list small {
  margin: 4px 0;
  color: #6c7d8b
}

.status {
  display: inline-block;
  color: #147a52;
  font-size: 11px;
  font-weight: 700
}

.status.off {
  color: #9b3941
}

.form-panel form,
.two-forms form,
.password-gate form {
  display: grid;
  gap: 14px;
  margin-top: 20px
}

.form-panel form>div,
.two-forms form>div,
.password-gate form>div,
.form-panel label,
.two-forms label {
  display: grid;
  gap: 6px;
  color: #344b5f;
  font-size: 13px;
  font-weight: 650
}

.form-panel input,
.form-panel select,
.two-forms input,
.two-forms select,
.password-gate input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #cbd6df;
  border-radius: 5px;
  background: #fff;
  font: inherit;
  box-sizing: border-box
}

.form-panel .helptext,
.two-forms .helptext,
.password-gate .helptext,
.password-gate ul {
  color: #758695;
  font-size: 11px;
  font-weight: 400
}

.errorlist {
  margin: 0;
  padding-left: 18px;
  color: #a8323b
}

.primary-button,
.secondary-button,
.link-button {
  border: 0;
  border-radius: 5px;
  padding: 12px 18px;
  font-weight: 750;
  cursor: pointer
}

.primary-button {
  background: #19865e;
  color: #fff
}

.secondary-button {
  border: 1px solid #ccd7df;
  background: #fff;
  color: #27475d
}

.credential-alert {
  margin-bottom: 20px;
  padding: 18px 22px;
  border: 1px solid #a8d7c5;
  border-left: 4px solid #19865e;
  border-radius: 7px;
  background: #f2fbf7
}

.credential-alert p {
  margin: 8px 0
}

.credential-alert code {
  padding: 3px 7px;
  background: #fff;
  border: 1px solid #cfe3da;
  border-radius: 4px;
  font-size: 14px
}

.credential-alert small {
  color: #547164
}

.create-drawer {
  margin-bottom: 20px
}

.create-drawer summary {
  cursor: pointer;
  color: #176a4d;
  font-weight: 750
}

.two-forms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 24px
}

.registry-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 16px
}

.company-card {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid #dfe6eb;
  border-radius: 7px;
  background: #fbfcfd
}

.company-card h2 {
  margin: 5px 0;
  font-size: 18px
}

.country {
  color: #9a6b12;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px
}

.company-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 13px 0;
  border-block: 1px solid #e5eaee
}

.company-card dt {
  color: #788997;
  font-size: 10px;
  text-transform: uppercase
}

.company-card dd {
  margin: 4px 0 0;
  font-weight: 700
}

.representatives {
  display: grid;
  gap: 7px
}

.representatives span {
  font-size: 13px
}

.muted,
.empty-state {
  color: #81909c
}

.password-gate {
  display: grid;
  min-height: 100vh;
  place-items: center;
  background: #f1f4f6
}

.password-gate>section {
  width: min(480px, calc(100% - 32px));
  padding: 38px;
  background: #fff;
  border: 1px solid #d7e0e7;
  border-radius: 10px;
  box-shadow: 0 18px 45px #102a4314
}

.password-gate h1 {
  margin: 7px 0;
  font-size: 30px
}

.password-gate p {
  color: #617485;
  line-height: 1.6
}

.password-gate .link-button {
  background: transparent;
  color: #536b7c
}

.password-gate form+form {
  margin-top: 5px
}

@media(max-width:1050px) {

  .management-grid,
  .two-forms {
    grid-template-columns: 1fr
  }

  .registry-cards {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:680px) {
  .registry-cards {
    grid-template-columns: 1fr
  }

  .panel {
    padding: 18px
  }

  .account-list article {
    grid-template-columns: 42px 1fr
  }

  .account-list form {
    grid-column: 2
  }

  .page-heading h1 {
    font-size: 26px
  }
}


/* ===== professional-core.css ===== */
.health-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px
}

.health-item {
  display: flex;
  gap: 14px;
  padding: 20px;
  border: 1px solid #d9e2e8;
  border-radius: 8px;
  background: #fff
}

.health-item i {
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border-radius: 50%;
  background: #24a06b
}

.health-item.down i {
  background: #c64c55
}

.health-item div {
  display: grid;
  gap: 4px
}

.health-item span {
  color: #3e5a6d;
  font-size: 13px
}

.health-item small {
  color: #7a8a96
}

.storage-panel {
  margin-top: 10px
}

.send-confirmation {
  padding: 12px;
  border: 1px solid #cddbe3;
  border-radius: 6px;
  background: #f8fbfc
}

.send-confirmation summary {
  cursor: pointer;
  color: #155f82;
  font-weight: 750
}

.send-confirmation form {
  display: grid;
  gap: 10px;
  margin-top: 12px
}

.send-confirmation label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px
}

.advanced-search {
  position: relative
}

.advanced-search summary {
  height: 40px;
  padding: 11px;
  border: 1px solid #d6dfe5;
  border-radius: 5px;
  cursor: pointer;
  box-sizing: border-box
}

.advanced-search>div {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 45px;
  display: grid;
  gap: 10px;
  width: 280px;
  padding: 15px;
  border: 1px solid #d6dfe5;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 28px #102a4320
}

.advanced-search label {
  display: grid 
}

.advanced-search input {
  width: 100%;
  box-sizing: border-box
}

@media(max-width:900px) {
  .health-grid {
    grid-template-columns: 1fr
  }
}


/* ===== organizational-polish.css ===== */
.saved-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border-bottom: 1px solid #e1e7eb;
  background: #fbfcfd;
  color: #607486;
  font-size: 12px
}

.saved-filter-bar>a {
  padding: 6px 10px;
  border: 1px solid #d6e0e6;
  border-radius: 14px;
  background: #fff;
  color: #1d5f83;
  text-decoration: none
}

.saved-filter-bar form {
  display: inline-flex;
  gap: 6px
}

.saved-filter-bar form button {
  border: 0;
  background: transparent;
  color: #8796a0;
  cursor: pointer
}

.saved-filter-bar details {
  position: relative;
  margin-left: auto
}

.saved-filter-bar summary {
  cursor: pointer;
  color: #17694e;
  font-weight: 700
}

.saved-filter-bar details form {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 28px;
  padding: 12px;
  border: 1px solid #d7e0e6;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 24px #102a431a
}

.saved-filter-bar input,
.account-list details select,
.account-list details textarea {
  padding: 8px;
  border: 1px solid #ccd8e0;
  border-radius: 4px
}

.account-list details {
  margin-top: 8px
}

.account-list details summary {
  cursor: pointer;
  color: #2a678a;
  font-size: 11px
}

.account-list details form {
  display: grid;
  gap: 7px;
  margin-top: 8px
}

.workflow-track {
  grid-template-columns: auto 1fr auto 1fr auto 
}

.workflow-track>div span {
  font-size: 13px 
}

@media(max-width:760px) {
  .saved-filter-bar {
    align-items: flex-start;
    flex-wrap: wrap
  }

  .saved-filter-bar details {
    margin-left: 0
  }

  .workflow-track {
    overflow: auto
  }

  .workflow-track>div {
    min-width: 145px
  }
}


/* ===== design-system-2026.css ===== */
/* E-HAMKOR unified interface layer — intentionally loaded last. */
* {
  box-sizing: border-box
}

html {
  font-size: 16px
}

body {
  margin: 0;
  background: var(--eh-canvas);
  color: var(--eh-ink);
  font-family: var(--eh-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased
}

button,
input,
select,
textarea {
  font: inherit
}

a {
  color: inherit
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(23, 103, 154, .28);
  outline-offset: 2px
}

/* Application shell */
.shell {
  min-height: 100vh;
  background: var(--eh-canvas)
}

.sidebar {
  width: 272px;
  background: var(--ui-navy-950);
  border-right: 0;
  padding: 0 18px;
  color: #d6e2ef
}

.brand {
  min-height: 84px;
  padding: 18px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  gap: 12px
}

.brand-logo {
  width: 45px;
  height: 45px
}

.brand span {
  min-width: 0
}

.brand strong {
  font-size: 20px;
  letter-spacing: .04em;
  color: #fff
}

.brand small {
  display: block;
  overflow: hidden;
  max-width: 165px;
  margin-top: 2px;
  color: #8fa4bd;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis
}

.workspace-label {
  margin: 24px 12px 8px;
  color: #6f88a6;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase
}

.side-nav a {
  position: relative;
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #c6d5e5;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none
}

.side-nav a:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff
}

.side-nav a.active {
  border-color: rgba(255, 255, 255, .08);
  background: #173250;
  color: #fff;
  box-shadow: inset 3px 0 0 var(--eh-gold-500)
}

.nav-symbol {
  width: 22px;
  color: #85bfe4;
  font-family: Arial;
  text-align: center
}

.side-nav a.active .nav-symbol {
  color: #d6af63
}

.nav-count {
  margin-left: auto;
  min-width: 21px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #c43d4a;
  color: #fff;
  font-size: 11px;
  text-align: center
}

.sidebar-footer {
  left: 18px;
  right: 18px;
  bottom: 16px;
  padding: 14px 10px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: var(--ui-navy-950)
}

.sidebar-footer strong {
  font-size: 12px
}

.sidebar-footer small {
  color: #7890ab;
  font-size: 10px
}

.security-dot {
  background: #35c692;
  box-shadow: 0 0 0 4px rgba(53, 198, 146, .12)
}

.main-area {
  margin-left: 272px
}

.topbar {
  height: 72px;
  padding: 0 28px;
  border-bottom: 1px solid var(--eh-line);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 2px 8px rgba(15, 34, 56, .04)
}

.top-search {
  width: min(520px, 42vw);
  height: 42px;
  border: 1px solid var(--eh-line);
  border-radius: 8px;
  background: #f7f9fb
}

.top-search input {
  font-size: 14px
}

.top-search kbd {
  border: 1px solid #dbe2e9;
  background: #fff;
  color: #728397;
  font-size: 10px
}

.top-actions {
  gap: 9px
}

.top-create,
.primary-btn {
  height: 42px;
  border-radius: 7px;
  background: var(--eh-green-600);
  box-shadow: none;
  font-size: 14px;
  font-weight: 700
}

.top-create:hover,
.primary-btn:hover {
  background: #0e6e50;
  transform: none
}

.language-menu summary,
.notification {
  height: 42px;
  border-radius: 7px
}

.notification {
  min-width: 42px;
  color: var(--eh-blue-600)
}

.account-button {
  min-height: 48px;
  padding: 4px 7px;
  border-radius: 8px
}

.account-button:hover {
  background: #f3f6f8
}

.avatar {
  width: 38px;
  height: 38px;
  background: #e7edf3;
  color: #183b5d;
  font-size: 12px
}

.account-copy strong {
  max-width: 160px;
  font-size: 13px
}

.account-copy small {
  font-size: 11px
}

.account-dropdown {
  top: 56px;
  border-color: var(--eh-line);
  border-radius: 10px;
  box-shadow: var(--eh-shadow)
}

.content {
  max-width: 1680px;
  margin: 0 auto;
  padding: 28px 30px 48px
}

/* Page headers and executive metrics */
.workspace-head {
  align-items: flex-end;
  margin: 0 0 24px;
  padding: 0
}

.workspace-head .breadcrumb {
  margin: 0 0 7px;
  color: #946b24;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em
}

.workspace-head h1 {
  margin: 0;
  color: var(--ui-navy-950);
  font-family: var(--eh-font);
  font-size: 30px;
  font-weight: 720;
  letter-spacing: -.025em
}

.workspace-head>div>p:not(.breadcrumb) {
  max-width: 720px;
  margin: 7px 0 0;
  color: var(--eh-muted);
  font-size: 14px
}

.cabinet-identity {
  display: block;
  margin-top: 8px;
  color: #7d8da0;
  font-size: 12px
}

.task-overview {
  display: grid;
  grid-template-columns: repeat(6, minmax(145px, 1fr));
  gap: 12px;
  margin-bottom: 20px
}

.metric-card {
  min-height: 116px;
  padding: 18px;
  border: 1px solid var(--eh-line);
  border-left: 3px solid #9babb9;
  border-radius: var(--eh-radius);
  background: #fff;
  box-shadow: 0 2px 7px rgba(16, 39, 65, .035);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s
}

.metric-card:hover {
  border-color: #9fb4c6;
  box-shadow: var(--eh-shadow);
  transform: none
}

.metric-card span {
  color: #50657a;
  font-size: 12px;
  font-weight: 700
}

.metric-card strong {
  display: block;
  margin: 7px 0 2px;
  color: var(--ui-navy-950);
  font-size: 28px;
  line-height: 1
}

.metric-card small {
  color: #8a99a8;
  font-size: 11px
}

.metric-green {
  border-left-color: var(--eh-green-600)
}

.metric-amber {
  border-left-color: var(--eh-amber-600)
}

.metric-red {
  border-left-color: var(--eh-red-600)
}

.metric-blue {
  border-left-color: var(--eh-blue-600)
}

/* Registry */
/* Executive dashboard identity: distinction without decorative clutter. */
.cabinet-hero {
  position: relative;
  isolation: isolate;
  min-height: 214px;
  align-items: flex-end;
  overflow: hidden;
  margin: -4px 0 0;
  padding: 30px 34px 34px;
  border: 1px solid #183b61;
  border-radius: 14px;
  background: linear-gradient(112deg, #081b35 0%, #0c2b4d 66%, #124266 100%);
  box-shadow: 0 14px 34px rgba(8, 29, 54, .14);
  color: #fff
}

.cabinet-hero:before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -90px;
  bottom: -180px;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(203, 222, 237, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 58px rgba(255, 255, 255, .018), 0 0 0 116px rgba(255, 255, 255, .012)
}

.cabinet-hero:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, transparent 0 68%, rgba(255, 255, 255, .025) 68% 68.1%, transparent 68.1%)
}

.cabinet-hero .breadcrumb {
  margin-top: 22px;
  color: #d7b467
}

.cabinet-hero h1 {
  color: #fff;
  font-size: 34px;
  letter-spacing: -.03em
}

.cabinet-hero>div>p:not(.breadcrumb) {
  color: #b8c9da
}

.cabinet-hero .cabinet-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  color: #91a9c0
}

.cabinet-identity i {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d0a853
}

.cabinet-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8fa8c0;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase
}

.cabinet-role-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid rgba(214, 180, 99, .4);
  border-radius: 4px;
  background: rgba(190, 142, 51, .1);
  color: #e0c47f;
  letter-spacing: .04em
}

.cabinet-hero .primary-btn {
  position: relative;
  z-index: 2;
  min-width: 150px;
  height: 46px;
  background: #fff;
  color: #0a3a5e;
  box-shadow: 0 5px 14px rgba(3, 18, 34, .2)
}

.cabinet-hero .primary-btn:hover {
  background: #eef5f8
}

.cabinet-hero-mark {
  position: absolute;
  right: 36px;
  top: 28px;
  display: grid;
  justify-items: end;
  color: rgba(255, 255, 255, .12);
  pointer-events: none
}

.cabinet-hero-mark span {
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em
}

.cabinet-hero-mark small {
  margin-top: 4px;
  color: rgba(255, 255, 255, .25);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .19em
}

.cabinet-hero .primary-btn~.cabinet-hero-mark {
  right: 210px
}

.executive-metrics {
  position: relative;
  z-index: 2;
  margin: -18px 18px 22px
}

.executive-metrics .metric-card {
  min-height: 120px;
  padding: 20px 18px;
  border-top: 3px solid #a9b6c2;
  border-left: 1px solid var(--eh-line);
  box-shadow: 0 9px 22px rgba(12, 35, 60, .09)
}

.executive-metrics .metric-card:before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  margin-bottom: 12px;
  background: #a9b6c2
}

.executive-metrics .metric-card span {
  font-size: 11px;
  letter-spacing: .025em;
  text-transform: uppercase
}

.executive-metrics .metric-card strong {
  font-size: 31px;
  font-variant-numeric: tabular-nums
}

.executive-metrics .metric-green {
  border-top-color: var(--eh-green-600)
}

.executive-metrics .metric-green:before {
  background: var(--eh-green-600)
}

.executive-metrics .metric-amber {
  border-top-color: var(--eh-amber-600)
}

.executive-metrics .metric-amber:before {
  background: var(--eh-amber-600)
}

.executive-metrics .metric-red {
  border-top-color: var(--eh-red-600)
}

.executive-metrics .metric-red:before {
  background: var(--eh-red-600)
}

.executive-metrics .metric-blue {
  border-top-color: var(--eh-blue-600)
}

.executive-metrics .metric-blue:before {
  background: var(--eh-blue-600)
}

.registry-pro {
  overflow: visible;
  border: 1px solid var(--eh-line);
  border-radius: var(--eh-radius);
  background: #fff;
  box-shadow: 0 3px 12px rgba(15, 36, 61, .04)
}

.registry-boxes {
  display: flex;
  gap: 0;
  overflow: auto;
  padding: 0 18px;
  border-bottom: 1px solid var(--eh-line);
  background: #fff;
  border-radius: var(--eh-radius) var(--eh-radius) 0 0
}

.registry-boxes a {
  min-width: auto;
  padding: 17px 20px 14px;
  border-bottom: 3px solid transparent;
  color: #63768a;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap
}

.registry-boxes a.active {
  border-color: var(--eh-blue-600);
  background: transparent;
  color: var(--ui-navy-900)
}

.saved-filter-bar {
  margin: 12px 18px 0;
  padding: 0;
  border: 1px solid var(--eh-line-soft);
  border-radius: 7px;
  background: #f8fafc
}

.saved-filter-bar>summary {
  padding: 9px 12px;
  color: #52677c;
  font-size: 12px;
  cursor: pointer
}

.saved-filter-bar>summary b {
  display: inline-grid;
  min-width: 19px;
  height: 19px;
  place-items: center;
  margin-left: 5px;
  border-radius: 10px;
  background: #e6edf3;
  color: #35526d
}

.saved-filter-bar>div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 12px 10px
}

.saved-filter-bar>div>span {
  display: flex;
  align-items: center;
  border: 1px solid var(--eh-line);
  border-radius: 6px;
  background: #fff
}

.saved-filter-bar a {
  padding: 5px 8px;
  color: #315c7c;
  font-size: 12px;
  text-decoration: none
}

.saved-filter-bar form {
  display: inline
}

.saved-filter-bar button {
  border: 0;
  background: transparent;
  color: #8796a5;
  cursor: pointer
}

.registry-pro-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: end;
  gap: 14px;
  padding: 20px 18px 16px
}

.registry-pro-head h2 {
  margin: 0;
  color: var(--ui-navy-950);
  font-size: 20px
}

.registry-pro-head p {
  margin: 3px 0 0;
  color: #7e8e9e;
  font-size: 12px
}

.registry-filters {
  display: flex;
  align-items: end;
  gap: 8px
}

.registry-filters label>span {
  display: block;
  margin: 0 0 5px;
  color: #627589;
  font-size: 11px;
  font-weight: 650
}

.registry-filters input,
.registry-filters select,
.advanced-search summary {
  height: 40px;
  border: 1px solid var(--eh-line);
  border-radius: 7px;
  background: #fff;
  font-size: 13px
}

.registry-filters input {
  min-width: 250px;
  padding: 0 11px
}

.registry-filters select {
  min-width: 170px;
  padding: 0 32px 0 11px
}

.advanced-search summary {
  padding: 10px 12px;
  color: #415a71
}

.button-secondary,
.registry-export {
  height: 40px;
  padding: 0 14px;
  border: 1px solid #b9c9d6;
  border-radius: 7px;
  background: #fff;
  color: #194e76;
  font-size: 12px;
  font-weight: 700
}

.registry-export {
  display: inline-flex;
  align-items: center;
  text-decoration: none
}

.registry-table-wrap {
  border-top: 1px solid var(--eh-line);
  overflow: auto
}

.registry-table {
  min-width: 980px
}

.registry-table th {
  padding: 12px 16px;
  background: #f6f8fa;
  color: #607286;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em
}

.registry-table td {
  padding: 15px 16px;
  border-top: 1px solid var(--eh-line-soft);
  font-size: 13px;
  vertical-align: middle
}

.registry-table tbody tr:hover {
  background: #f8fbfd
}

.document-cell strong {
  color: #1a6898;
  font-size: 11px
}

.document-cell span {
  margin-top: 3px;
  color: var(--eh-ink);
  font-size: 14px;
  font-weight: 650
}

.document-cell small {
  color: #8493a1;
  font-size: 11px
}

.status-pill {
  padding: 6px 9px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700
}

.row-open {
  width: 34px;
  height: 34px;
  border: 1px solid var(--eh-line);
  border-radius: 7px;
  background: #f6f9fb;
  color: #17618e
}

.row-open:hover {
  background: var(--eh-blue-600);
  color: #fff
}

.pagination {
  padding: 14px 18px;
  border-top: 1px solid var(--eh-line-soft)
}

/* Forms and document surfaces */
.message {
  border-radius: 8px;
  font-size: 13px
}

.detail-layout,
.editor-layout {
  gap: 18px
}

.panel,
.detail-card,
.action-card,
.metadata-card {
  border: 1px solid var(--eh-line);
  border-radius: var(--eh-radius);
  background: #fff;
  box-shadow: 0 3px 12px rgba(15, 36, 61, .035)
}

input,
select,
textarea {
  border-color: var(--eh-line) ;
  border-radius: 7px ;
  color: var(--eh-ink)
}

input:focus,
select:focus,
textarea:focus {
  border-color: #6b9fbe ;
  box-shadow: 0 0 0 3px rgba(23, 103, 154, .1) ;
  outline: 0
}

.document-heading h1 {
  color: var(--ui-navy-950);
  font-family: var(--eh-font);
  font-size: 32px;
  line-height: 1.22;
  letter-spacing: -.025em
}

.document-heading>div>span {
  color: var(--eh-muted);
  font-size: 13px
}

.document-heading>div>p {
  font-size: 11px
}

.dossier-tabs a {
  min-height: 48px;
  font-size: 13px
}

.workflow-track>div span {
  font-size: 12px;
  line-height: 1.35
}

.side-card h3 {
  font-size: 15px
}

.side-card p,
.side-card li {
  font-size: 13px;
  line-height: 1.55
}

.info-card dt {
  font-size: 11px
}

.info-card dd {
  font-size: 13px
}

.version-list b,
.audit-mini b {
  font-size: 12px
}

.version-list small,
.audit-mini span {
  font-size: 11px
}

.comment-form textarea,
.comment-list p {
  font-size: 14px
}

.readiness-summary header b {
  font-size: 13px
}

.readiness-summary div span {
  font-size: 12px
}

.readiness-summary div small {
  font-size: 11px
}

.workflow-status,
.status-tag {
  font-size: 11px
}

.classification {
  font-size: 10px
}

.letter-footer span {
  font-size: 11px
}

.page-heading h1 {
  color: var(--ui-navy-950);
  font-size: 30px
}

.page-heading p,
.panel p {
  font-size: 14px
}

.panel h2 {
  font-size: 20px
}

.account-list small,
.representatives span {
  font-size: 13px
}

.company-card h2 {
  font-size: 19px
}

.company-card dt {
  font-size: 11px
}

.management-page .eyebrow {
  font-size: 10px
}

.primary-button,
.secondary-button,
.link-button {
  min-height: 42px;
  border-radius: 7px
}

.sample-composer {
  margin: -28px -30px -48px;
  background: #eef2f5
}

.sample-editor-head {
  top: 72px;
  padding: 13px 24px
}

.sample-editor-head h1 {
  font-size: 23px
}

.sample-metadata {
  margin: 18px 22px;
  border-radius: 10px
}

.sample-metadata h2 {
  font-size: 16px
}

.metadata-grid label>span {
  font-size: 12px
}

.metadata-grid input,
.metadata-grid select {
  height: 42px;
  font-size: 13px
}

.office-editor {
  margin: 0 22px 30px;
  border-radius: 10px
}

.office-titlebar,
.ribbon-tabs,
.ribbon-group button,
.ribbon-group select {
  font-size: 12px
}

.office-stage {
  background: #e3e7eb
}

.office-stage .modern-paper {
  box-shadow: 0 4px 18px rgba(18, 38, 58, .15)
}

/* Login — restrained institutional identity */
.login-page {
  display: grid;
  grid-template-columns: minmax(520px, 58%) minmax(420px, 42%);
  min-height: 100vh;
  background: #fff
}

.login-context {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 7%;
  overflow: hidden;
  background: linear-gradient(145deg, #07172f 0%, #0d2a4b 72%, #11385b 100%);
  color: #fff
}

.login-context:before {
  content: "";
  position: absolute;
  inset: auto -10% -30% 22%;
  height: 70%;
  border: 1px solid rgba(111, 181, 218, .18);
  border-radius: 50%;
  transform: rotate(-11deg);
  box-shadow: 0 0 0 70px rgba(89, 160, 201, .035), 0 0 0 150px rgba(89, 160, 201, .025)
}

.login-brand,
.login-hero,
.login-assurance {
  position: relative;
  z-index: 1
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 14px
}

.login-logo {
  width: 54px;
  height: 54px
}

.login-brand strong {
  display: block;
  font-size: 22px;
  letter-spacing: .06em
}

.login-brand small {
  display: block;
  max-width: 330px;
  margin-top: 3px;
  color: #9eb3c9;
  font-size: 12px
}

.login-hero {
  max-width: 620px
}

.login-hero .eyebrow,
.login-box>.eyebrow {
  color: #d0a853;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em
}

.login-hero h1 {
  margin: 15px 0 14px;
  font-size: 52px;
  font-weight: 740;
  letter-spacing: .03em
}

.login-hero p {
  margin: 0;
  color: #c8d6e5;
  font-size: 19px;
  line-height: 1.55
}

.login-assurance {
  display: flex;
  gap: 26px;
  color: #aabed2;
  font-size: 12px
}

.login-assurance span {
  display: flex;
  align-items: center;
  gap: 8px
}

.login-assurance b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #37c68e
}

.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: #fff
}

.login-box {
  position: relative;
  width: 100%;
  max-width: 430px
}

.login-box h2 {
  margin: 13px 0 8px;
  color: var(--ui-navy-950);
  font-size: 32px;
  font-weight: 720;
  letter-spacing: -.025em
}

.login-lead {
  margin: 0 0 28px;
  color: var(--eh-muted);
  font-size: 14px
}

.login-language-menu {
  position: absolute;
  right: 0;
  top: -6px;
  width: 88px;
  margin: 0
}

.login-form>label {
  display: block;
  margin: 17px 0 7px;
  color: #344b61;
  font-size: 13px;
  font-weight: 650
}

.login-form .field {
  height: 48px;
  border: 1px solid var(--eh-line);
  border-radius: 8px;
  background: #fff
}

.login-form .field:focus-within {
  border-color: #6b9fbe;
  box-shadow: 0 0 0 3px rgba(23, 103, 154, .1)
}

.login-form .field input {
  height: 46px;
  border: 0 ;
  box-shadow: none ;
  font-size: 14px
}

.login-form .field>span {
  color: #8798a9;
  font-size: 11px
}

.login-form .field button {
  color: #31617f;
  font-size: 12px;
  font-weight: 650
}

.login-options {
  margin: 16px 0 24px;
  color: #52697e;
  font-size: 12px
}

.login-options a {
  color: #17618e
}

.login-submit {
  height: 48px;
  border-radius: 8px;
  background: var(--ui-navy-900);
  box-shadow: none;
  font-size: 14px;
  font-weight: 700
}

.login-submit:hover {
  background: #12345b;
  transform: none
}

.login-error {
  border: 1px solid #efd0d3;
  border-radius: 8px;
  background: #fff5f5;
  color: #9e3540
}

.mobile-brand {
  display: none
}

/* Drawers/dialogs */
.document-drawer>section,
.create-document-dialog {
  border: 1px solid var(--eh-line);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(4, 18, 35, .25)
}

.document-drawer header h2,
.create-document-dialog h2 {
  font-family: var(--eh-font);
  color: var(--ui-navy-950)
}

@media(max-width:1280px) {
  .task-overview {
    grid-template-columns: repeat(3, 1fr)
  }

  .registry-pro-head {
    grid-template-columns: 1fr
  }

  .registry-filters {
    flex-wrap: wrap
  }

  .main-area {
    margin-left: 244px
  }

  .sidebar {
    width: 244px
  }

  .content {
    padding-inline: 22px
  }

  .sample-composer {
    margin-inline: -22px
  }
}

@media(max-width:920px) {
  .sidebar {
    width: 272px;
    transform: translateX(-100%)
  }

  .sidebar.open {
    transform: translateX(0)
  }

  .main-area {
    margin-left: 0
  }

  .topbar {
    padding: 0 18px
  }

  .top-search {
    width: min(430px, 55vw)
  }

  .account-copy {
    display: none
  }

  .login-page {
    grid-template-columns: 1fr
  }

  .login-context {
    display: none
  }

  .login-panel {
    min-height: 100vh
  }

  .mobile-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    color: var(--ui-navy-950)
  }

  .mobile-brand .login-logo {
    width: 42px;
    height: 42px
  }

  .mobile-brand strong {
    font-size: 19px
  }

  .login-language-menu {
    top: 4px
  }
}

@media(max-width:680px) {
  html {
    font-size: 15px
  }

  .content {
    padding: 20px 14px 36px
  }

  .workspace-head {
    align-items: flex-start;
    gap: 16px
  }

  .workspace-head h1 {
    font-size: 25px
  }

  .task-overview {
    grid-template-columns: repeat(2, 1fr)
  }

  .metric-card {
    min-height: 104px;
    padding: 14px
  }

  .top-search {
    display: none
  }

  .top-actions {
    margin-left: auto
  }

  .top-create {
    display: none
  }

  .registry-pro-head {
    padding: 16px
  }

  .registry-filters {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .registry-filters label:first-child {
    grid-column: 1/-1
  }

  .registry-filters input,
  .registry-filters select {
    width: 100%;
    min-width: 0
  }

  .registry-boxes {
    padding: 0 8px
  }

  .registry-boxes a {
    padding-inline: 13px
  }

  .login-panel {
    padding: 28px 22px
  }

  .login-box h2 {
    font-size: 28px
  }

  .sample-composer {
    margin: -20px -14px -36px
  }

  .sample-editor-head {
    position: relative;
    top: 0
  }

  .task-overview {
    gap: 8px
  }
}

@media(max-width:680px) {
  .cabinet-hero {
    min-height: 230px;
    padding: 24px 22px
  }

  .cabinet-hero-mark {
    display: none
  }

  .executive-metrics {
    margin: -14px 8px 18px
  }

  .cabinet-hero-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px
  }
}

/* Semantic tone aliases used by the dashboard data model. */
.executive-metrics .metric-success {
  border-top-color: var(--eh-green-600)
}

.executive-metrics .metric-success:before {
  background: var(--eh-green-600)
}

.executive-metrics .metric-danger {
  border-top-color: var(--eh-red-600)
}

.executive-metrics .metric-danger:before {
  background: var(--eh-red-600)
}

.executive-metrics .metric-primary {
  border-top-color: var(--eh-blue-600)
}

.executive-metrics .metric-primary:before {
  background: var(--eh-blue-600)
}

.registry-pro-head {
  grid-template-columns: minmax(180px, 1fr) auto auto auto
}

.task-overview {
  grid-template-columns: repeat(4, minmax(170px, 1fr))
}

@media(max-width:1280px) {
  .task-overview {
    grid-template-columns: repeat(2, minmax(170px, 1fr))
  }
}

@media(max-width:560px) {
  .task-overview {
    grid-template-columns: 1fr 1fr
  }

  .executive-metrics .metric-card {
    min-height: 112px
  }

  .executive-metrics .metric-card small {
    display: none
  }
}

.professional-empty {
  display: flex ;
  min-height: 290px ;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 24px ;
  text-align: center
}

.empty-document-mark {
  display: grid;
  width: 58px;
  height: 66px;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid #b8c9d7;
  border-radius: 7px 7px 12px 12px;
  background: linear-gradient(145deg, #f9fbfc, #edf3f7);
  box-shadow: inset 0 -3px 0 #bd8b32;
  color: #184b70
}

.empty-document-mark span {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .08em
}

.professional-empty>strong {
  color: var(--ui-navy-950);
  font-size: 17px
}

.professional-empty>span {
  max-width: 630px;
  margin-top: 7px;
  color: #718295;
  font-size: 13px;
  line-height: 1.6
}

.professional-empty>a {
  margin-top: 18px;
  color: #17658f;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none
}

.professional-empty .empty-primary {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 0 18px;
  border-radius: 7px;
  background: var(--eh-green-600);
  color: #fff
}

.empty-workflow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
  color: #4c6378
}

.empty-workflow i {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #9fb5c7;
  border-radius: 50%;
  background: #fff;
  color: #1b5f88;
  font-size: 10px;
  font-style: normal;
  font-weight: 800
}

.empty-workflow b {
  font-size: 11px;
  font-weight: 650
}

.empty-workflow em {
  width: 32px;
  height: 1px;
  background: #c8d4de
}

@media(max-width:680px) {
  .professional-empty {
    min-height: 250px 
  }

  .empty-workflow {
    display: grid;
    grid-template-columns: 25px 1fr;
    text-align: left
  }

  .empty-workflow em {
    display: none
  }
}

.save-filter-menu {
  position: relative
}

.save-filter-menu>summary {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--eh-line);
  border-radius: 7px;
  color: #315b7b;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer
}

.save-filter-menu>form {
  position: absolute;
  z-index: 20;
  right: 0;
  top: 46px;
  width: 270px;
  padding: 14px;
  border: 1px solid var(--eh-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--eh-shadow)
}

.save-filter-menu label {
  display: grid;
  gap: 6px;
  color: #52677c;
  font-size: 12px
}

.save-filter-menu input {
  width: 100%;
  height: 40px;
  padding: 0 10px
}

.save-filter-menu button {
  width: 100%;
  height: 38px;
  margin-top: 10px;
  border: 0;
  border-radius: 6px;
  background: var(--ui-navy-800);
  color: #fff;
  font-size: 12px;
  font-weight: 700
}

.operational-glance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: -6px 0 20px
}

.operational-glance>article {
  overflow: hidden;
  border: 1px solid var(--eh-line);
  border-radius: 10px;
  background: #fff
}

.operational-glance header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 17px;
  border-bottom: 1px solid var(--eh-line-soft)
}

.operational-glance header span {
  color: #956d27;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em
}

.operational-glance h2 {
  margin: 2px 0 0;
  color: var(--ui-navy-950);
  font-size: 16px
}

.operational-glance header>a {
  color: #17618e;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none
}

.operational-glance article>div {
  display: grid
}

.operational-glance article>div>a {
  display: grid;
  grid-template-columns: 95px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 17px;
  border-bottom: 1px solid var(--eh-line-soft);
  text-decoration: none
}

.operational-glance article>div>a:last-child {
  border-bottom: 0
}

.operational-glance article>div>a:hover {
  background: #f7fafc
}

.operational-glance article>div b {
  color: #17618e;
  font-size: 10px
}

.operational-glance article>div span {
  overflow: hidden;
  color: #344b60;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis
}

.operational-glance article>div em,
.operational-glance article>div time {
  color: #7b8c9c;
  font-size: 10px;
  font-style: normal
}

.operational-glance article>div>p {
  margin: 0;
  padding: 20px 17px;
  color: #7c8d9d;
  font-size: 12px
}

.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px
}

.row-actions form {
  margin: 0
}

.watch-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--eh-line);
  border-radius: 7px;
  background: #fff;
  color: #8a99a8;
  font-size: 17px;
  cursor: pointer
}

.watch-button.active {
  border-color: #d2ad62;
  background: #fff9eb;
  color: #a06f13
}

.watch-detail {
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--eh-line);
  border-radius: 7px;
  background: #fff;
  color: #526a7f;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer
}

.watch-detail.active {
  border-color: #d4b574;
  background: #fff9ea;
  color: #8b631c
}

.calendar-heading {
  align-items: flex-end
}

.calendar-heading-actions {
  display: flex;
  align-items: center;
  gap: 9px
}

.calendar-nav {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--eh-line);
  border-radius: 7px;
  background: #fff
}

.calendar-nav a {
  display: grid;
  min-width: 42px;
  height: 40px;
  place-items: center;
  padding: 0 12px;
  border-right: 1px solid var(--eh-line);
  color: #225e84;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none
}

.calendar-nav a:last-child {
  border: 0
}

.official-calendar {
  overflow: hidden;
  border: 1px solid var(--eh-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(13, 38, 62, .05)
}

.calendar-weekdays,
.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr)
}

.calendar-weekdays {
  border-bottom: 1px solid var(--eh-line);
  background: #f4f7f9
}

.calendar-weekdays b {
  padding: 12px 8px;
  border-right: 1px solid var(--eh-line-soft);
  color: #66798b;
  font-size: 10px;
  letter-spacing: .04em;
  text-align: center
}

.calendar-week article {
  min-height: 132px;
  padding: 9px;
  border-right: 1px solid var(--eh-line-soft);
  border-bottom: 1px solid var(--eh-line-soft)
}

.calendar-week article:nth-child(7) {
  border-right: 0
}

.calendar-week article.outside {
  background: #f8fafb
}

.calendar-week article.today {
  background: #f6fbff;
  box-shadow: inset 0 0 0 2px #3c7da6
}

.calendar-week article>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px
}

.calendar-week article>header>b {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  font-size: 12px
}

.calendar-week article.today>header>b {
  background: var(--eh-blue-600);
  color: #fff
}

.calendar-week article>header>span {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 10px;
  background: #e5edf3;
  color: #315e7c;
  font-size: 9px;
  font-weight: 800
}

.cal-doc {
  display: block;
  margin-top: 5px;
  padding: 6px 7px;
  border-left: 3px solid var(--eh-green-600);
  border-radius: 3px;
  background: #eef6f3;
  text-decoration: none
}

.cal-doc.due-amber {
  border-color: var(--eh-amber-600);
  background: #fcf6e9
}

.cal-doc.due-red {
  border-color: var(--eh-red-600);
  background: #fff0f1
}

.cal-doc strong,
.cal-doc span {
  display: block
}

.cal-doc strong {
  color: #286184;
  font-size: 9px
}

.cal-doc span {
  overflow: hidden;
  margin-top: 2px;
  color: #465d70;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis
}

@media(max-width:900px) {
  .operational-glance {
    grid-template-columns: 1fr
  }

  .official-calendar {
    overflow: auto
  }

  .calendar-weekdays,
  .calendar-week {
    min-width: 900px
  }

  .calendar-heading {
    align-items: flex-start
  }

  .calendar-heading-actions {
    align-items: flex-end;
    flex-direction: column
  }
}

@media(max-width:600px) {
  .operational-glance article>div>a {
    grid-template-columns: 78px minmax(0, 1fr)
  }

  .operational-glance article>div em,
  .operational-glance article>div time {
    display: none
  }

  .calendar-heading-actions {
    align-items: stretch;
    width: 100%
  }
}


/* ===== dashboard-refinement.css ===== */
.operational-glance.single-panel {
  grid-template-columns: 1fr
}

.operational-glance.single-panel>article>div {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.operational-glance.single-panel>article>div>a:nth-child(odd) {
  border-right: 1px solid var(--eh-line-soft)
}

.cabinet-hero {
  min-height: 184px;
  padding-top: 25px;
  padding-bottom: 29px
}

.cabinet-hero .breadcrumb {
  margin-top: 15px
}

.cabinet-hero-mark {
  right: 35px 
}

.executive-metrics {
  margin-top: -15px
}

.executive-metrics .metric-card {
  min-height: 106px;
  padding-top: 15px;
  padding-bottom: 15px
}

.executive-metrics .metric-card:before {
  margin-bottom: 9px
}

.executive-metrics .metric-card strong {
  font-size: 28px
}

@media(max-width:900px) {
  .task-overview {
    grid-template-columns: repeat(2, minmax(150px, 1fr))
  }

  .operational-glance.single-panel {
    grid-template-columns: 1fr
  }

  .operational-glance.single-panel>article>div {
    grid-template-columns: 1fr
  }

  .operational-glance.single-panel>article>div>a:nth-child(odd) {
    border-right: 0
  }
}

@media(min-width:901px) and (max-width:1350px) {
  .task-overview {
    grid-template-columns: repeat(3, minmax(160px, 1fr))
  }
}

.task-overview {
  grid-template-columns: repeat(5, minmax(150px, 1fr))
}

.priority-work {
  margin: 18px 0;
  border: 1px solid var(--eh-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(13, 38, 62, .055);
  overflow: hidden
}

.priority-work>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--eh-line-soft)
}

.priority-work>header span {
  display: block;
  color: #9a6b18;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em
}

.priority-work>header h2 {
  margin: 5px 0 3px;
  color: #102d47;
  font-size: 20px
}

.priority-work>header p {
  margin: 0;
  color: #748695;
  font-size: 13px
}

.priority-work>header>a {
  color: #17658f;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none
}

.priority-work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.priority-work-item {
  display: block;
  min-width: 0;
  padding: 18px 20px;
  border-right: 1px solid var(--eh-line-soft);
  color: #20394e;
  text-decoration: none
}

.priority-work-item:last-child {
  border-right: 0
}

.priority-work-item:hover {
  background: #f8fbfc
}

.priority-work-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 15px
}

.priority-work-top>strong {
  color: #17658f;
  font-size: 12px
}

.priority-work-top .status-pill {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis
}

.priority-work-item>b {
  display: block;
  color: #8e671e;
  font-size: 11px;
  letter-spacing: .04em
}

.priority-work-item h3 {
  min-height: 42px;
  margin: 7px 0 8px;
  color: #112e48;
  font-size: 15px;
  line-height: 1.4
}

.priority-work-item p {
  min-height: 38px;
  margin: 0;
  color: #687b8b;
  font-size: 12px;
  line-height: 1.5
}

.priority-work-item footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid #e6ebef
}

.priority-work-item footer span {
  overflow: hidden;
  color: #526b7c;
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap
}

.priority-work-item footer em {
  flex: 0 0 auto;
  color: #708391;
  font-size: 11px;
  font-style: normal;
  font-weight: 750
}

.priority-work-item footer .due-red {
  color: #a63e45
}

.priority-work-item footer .due-amber {
  color: #9a6717
}

@media(max-width:1250px) {
  .priority-work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .priority-work-item:nth-child(2) {
    border-right: 0
  }

  .priority-work-item:nth-child(-n+2) {
    border-bottom: 1px solid var(--eh-line-soft)
  }
}

@media(max-width:700px) {
  .priority-work>header {
    align-items: flex-start;
    flex-direction: column
  }

  .priority-work-grid {
    grid-template-columns: 1fr
  }

  .priority-work-item {
    border-right: 0;
    border-bottom: 1px solid var(--eh-line-soft)
  }

  .priority-work-item:last-child {
    border-bottom: 0
  }
}


/* ===== dashboard-executive.css ===== */
.cabinet-hero-copy {
  max-width: 62%
}

.cabinet-brief {
  position: relative;
  z-index: 2;
  width: min(440px, 36%);
  padding: 17px 18px;
  border: 1px solid rgba(188, 210, 227, .2);
  border-radius: 10px;
  background: rgba(4, 20, 39, .25);
  backdrop-filter: blur(4px)
}

.cabinet-brief>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(198, 216, 229, .14)
}

.cabinet-brief>header span {
  color: #d9b96c;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em
}

.cabinet-brief>header time {
  color: #91a9c0;
  font-size: 10px
}

.cabinet-brief>div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 15px 0
}

.cabinet-brief>div a {
  padding: 0 12px;
  border-right: 1px solid rgba(198, 216, 229, .14);
  text-decoration: none
}

.cabinet-brief>div a:first-child {
  padding-left: 0
}

.cabinet-brief>div a:last-child {
  padding-right: 0;
  border-right: 0
}

.cabinet-brief strong,
.cabinet-brief span {
  display: block
}

.cabinet-brief strong {
  color: #fff;
  font-size: 24px
}

.cabinet-brief>div span {
  margin-top: 3px;
  color: #9fb3c5;
  font-size: 9px;
  line-height: 1.35
}

.cabinet-brief>footer {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #849db2;
  font-size: 9px
}

.cabinet-brief>footer i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #33b985;
  box-shadow: 0 0 0 4px rgba(51, 185, 133, .12)
}

.cabinet-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(310px, .65fr);
  gap: 14px;
  margin: 18px 0
}

.flow-monitor,
.control-summary-panel {
  overflow: hidden;
  border: 1px solid var(--eh-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(13, 38, 62, .045)
}

.flow-monitor>header,
.control-summary-panel>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--eh-line-soft)
}

.flow-monitor header span,
.control-summary-panel header>span {
  color: #966d26;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em
}

.flow-monitor h2,
.control-summary-panel h2 {
  margin: 4px 0 0;
  color: #102d47;
  font-size: 17px
}

.flow-monitor header p {
  margin: 4px 0 0;
  color: #7c8c99;
  font-size: 11px
}

.flow-monitor header>a {
  color: #17658f;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none
}

.flow-monitor-list>a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px 58px 20px;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--eh-line-soft);
  text-decoration: none
}

.flow-monitor-list>a:last-child {
  border-bottom: 0
}

.flow-monitor-list>a:hover {
  background: #f8fbfc
}

.flow-doc {
  min-width: 0
}

.flow-doc b,
.flow-doc strong,
.flow-doc small {
  display: block
}

.flow-doc b {
  color: #17658f;
  font-size: 10px
}

.flow-doc strong {
  overflow: hidden;
  margin-top: 3px;
  color: #203a50;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap
}

.flow-doc small {
  overflow: hidden;
  margin-top: 3px;
  color: #8493a0;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap
}

.flow-monitor-list time {
  color: #607688;
  font-size: 11px;
  text-align: right
}

.flow-monitor-list time small {
  display: block;
  margin-top: 2px;
  color: #94a0aa;
  font-size: 9px
}

.flow-monitor-list>a>em {
  color: #2c6c94;
  font-size: 18px;
  font-style: normal
}

.control-empty {
  padding: 38px 20px;
  text-align: center
}

.control-empty b,
.control-empty span {
  display: block
}

.control-empty b {
  font-size: 14px
}

.control-empty span {
  margin-top: 6px;
  color: #7a8c9b;
  font-size: 12px
}

.control-summary-panel>header {
  display: block
}

.control-summary-panel nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-height: 65px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--eh-line-soft);
  color: #243d52;
  text-decoration: none
}

.control-summary-panel nav a:hover {
  background: #f8fbfc
}

.control-summary-panel nav a>div {
  display: flex;
  align-items: center;
  gap: 11px
}

.control-summary-panel nav span,
.control-summary-panel nav small {
  display: block
}

.control-summary-panel nav span {
  font-size: 12px;
  font-weight: 750
}

.control-summary-panel nav small {
  margin-top: 3px;
  color: #8795a1;
  font-size: 9px;
  font-weight: 400
}

.control-summary-panel nav strong {
  color: #122f48;
  font-size: 20px
}

.control-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #36769f;
  box-shadow: 0 0 0 4px #edf3f6
}

.control-dot.amber {
  background: #b27b21;
  box-shadow: 0 0 0 4px #fbf4e6
}

.control-dot.red {
  background: #ad4349;
  box-shadow: 0 0 0 4px #fbecee
}

.control-dot.green {
  background: #24805d;
  box-shadow: 0 0 0 4px #e9f5ef
}

.control-summary-panel>footer {
  padding: 14px 18px;
  background: #f7f9fa
}

.control-summary-panel>footer a {
  display: flex;
  justify-content: space-between;
  color: #17658f;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none
}

.registry-pro {
  box-shadow: 0 8px 24px rgba(13, 38, 62, .04)
}

@media(max-width:1100px) {
  .cabinet-hero-copy {
    max-width: 56%
  }

  .cabinet-brief {
    width: 42%
  }

  .cabinet-control-grid {
    grid-template-columns: 1fr
  }

  .control-summary-panel nav {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .control-summary-panel nav a:nth-child(odd) {
    border-right: 1px solid var(--eh-line-soft)
  }
}

@media(max-width:760px) {
  .cabinet-hero-copy {
    max-width: 100%
  }

  .cabinet-brief {
    display: none
  }

  .flow-monitor-list>a {
    grid-template-columns: minmax(0, 1fr) 20px
  }

  .flow-monitor-list .status-pill,
  .flow-monitor-list time {
    display: none 
  }

  .control-summary-panel nav {
    grid-template-columns: 1fr
  }

  .control-summary-panel nav a:nth-child(odd) {
    border-right: 0
  }
}


/* ===== sidebar-navigation.css ===== */
.sidebar {
  padding-inline: 18px
}

.brand {
  margin: 0 2px 8px
}

.workspace-label {
  margin: 20px 12px 8px;
  font-size: 9px;
  letter-spacing: .16em
}

.side-nav {
  display: grid;
  gap: 4px
}

.side-nav a {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px
}

.side-nav a>.nav-symbol {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #7abce5;
  font-size: 15px
}

.side-nav a>span:nth-child(2) {
  min-width: 0
}

.side-nav a>span:nth-child(2)>b,
.side-nav a>span:nth-child(2)>small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.side-nav a>span:nth-child(2)>b {
  color: inherit;
  font-size: 13px;
  font-weight: 700
}

.side-nav a>span:nth-child(2)>small {
  margin-top: 3px;
  color: #6f8aa4;
  font-size: 9px;
  font-weight: 500
}

.side-nav a:hover {
  border-color: rgba(115, 169, 205, .14);
  background: rgba(32, 76, 114, .42)
}

.side-nav a.active {
  border-color: rgba(104, 157, 195, .24);
  background: #173958;
  box-shadow: inset 3px 0 0 #d5a331
}

.side-nav a.active>.nav-symbol {
  color: #e0b24f
}

.side-nav a.active>span small {
  color: #9bb1c5
}

.side-nav .nav-create-link {
  margin-bottom: 2px;
  background: rgba(23, 80, 112, .2)
}

.nav-badge {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding: 0 6px;
  border-radius: 11px;
  background: #d5a331;
  color: #102944;
  font-size: 10px;
  font-style: normal;
  font-weight: 800
}

.muted-badge {
  background: #254966;
  color: #bcd0df
}

.alert-badge {
  background: #2e89bd;
  color: #fff
}

.sidebar-footer {
  left: 18px;
  right: 18px
}

.sidebar {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #24445f transparent
}

.sidebar-footer {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  background: #071b32
}

.side-nav+.workspace-label {
  margin-top: 22px
}

@media(max-height:820px) {
  .side-nav a {
    min-height: 46px
  }

  .side-nav a>span:nth-child(2)>small {
    display: none
  }

  .workspace-label {
    margin-top: 13px
  }

  .sidebar-footer {
    position: relative;
    margin-top: 20px
  }
}


/* ===== secondary-pages.css ===== */
/* Unified presentation for secondary modules that still use the original markup. */
.secondary-page,
.simple-page,
.management-page {
  width: min(100%, 1480px);
  max-width: 1480px;
  margin: 0 auto;
  color: #102a43
}

.secondary-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin: 5px 0 26px
}

.secondary-heading a,
.simple-page>a {
  display: inline-block;
  margin-bottom: 22px;
  color: #17658f;
  font-size: 14px;
  text-decoration: none
}

.secondary-heading a:hover,
.simple-page>a:hover {
  text-decoration: underline
}

.secondary-heading p {
  margin: 0 0 8px;
  color: #9a6a0b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em
}

.secondary-heading h1 {
  margin: 0;
  color: #0b2340;
  font: 750 34px/1.15 "Segoe UI", Arial, sans-serif;
  letter-spacing: -.025em
}

.secondary-heading>div>span {
  display: block;
  margin-top: 9px;
  color: #687b8e;
  font-size: 15px
}

.secondary-counter {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 155px;
  padding: 17px 20px;
  border: 1px solid #d8e2e9;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(14, 39, 65, .05)
}

.secondary-counter strong {
  font-size: 28px
}

.secondary-counter span {
  color: #6e7f8f;
  font-size: 13px
}

.secondary-card,
.simple-card,
.content-card {
  border-color: #d8e2e9;
  border-radius: 10px
}

.secondary-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #d8e2e9;
  box-shadow: 0 12px 34px rgba(14, 39, 65, .06)
}

.secondary-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 24px;
  border-bottom: 1px solid #e1e8ed
}

.secondary-card-head h2 {
  margin: 0;
  color: #102a43;
  font-size: 19px
}

.secondary-card-head p {
  margin: 5px 0 0;
  color: #788998;
  font-size: 13px
}

.section-count {
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef4f7;
  color: #496276;
  font-size: 12px;
  font-weight: 700
}

.notification-list article {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5ebef
}

.notification-list article:last-child {
  border-bottom: 0
}

.notification-list article:hover {
  background: #fbfcfd
}

.notification-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d7a22f;
  box-shadow: 0 0 0 5px #fbf5e8
}

.notification-copy h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.4
}

.notification-copy h3 a {
  color: #123553;
  text-decoration: none
}

.notification-copy h3 a:hover {
  color: #17658f;
  text-decoration: underline
}

.notification-copy p {
  margin: 6px 0;
  color: #5e7182;
  font-size: 14px;
  line-height: 1.55
}

.notification-copy time {
  color: #8796a4;
  font-size: 12px
}

.notification-open {
  min-width: 82px;
  padding: 9px 12px;
  border: 1px solid #cbd9e1;
  border-radius: 6px;
  color: #17658f;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
  text-decoration: none
}

.notification-open:hover {
  background: #eef6fa
}

.secondary-empty {
  padding: 76px 24px;
  text-align: center
}

.secondary-empty>span {
  display: grid;
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  place-items: center;
  border: 1px solid #b7daca;
  border-radius: 50%;
  background: #eff8f4;
  color: #16815f;
  font-size: 22px
}

.secondary-empty h3 {
  margin: 0;
  color: #17324b;
  font-size: 19px
}

.secondary-empty p {
  max-width: 520px;
  margin: 9px auto 20px;
  color: #718395;
  font-size: 14px;
  line-height: 1.55
}

.secondary-empty a {
  color: #17658f;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none
}

/* Correct tiny typography inherited by account, audit and administration pages. */
.simple-page {
  padding-bottom: 32px
}

.simple-card {
  padding: 26px;
  margin-top: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(14, 39, 65, .045)
}

.simple-title small {
  color: #9a6a0b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em
}

.simple-title h1 {
  margin: 8px 0 0;
  color: #102a43;
  font: 750 28px/1.2 "Segoe UI", Arial, sans-serif
}

.simple-title>span {
  color: #536a7d;
  font-size: 14px
}

.profile-hero h1 {
  font: 750 24px/1.2 "Segoe UI", Arial, sans-serif
}

.profile-hero p {
  font-size: 13px
}

.simple-card dt {
  font-size: 11px
}

.simple-card dd {
  font-size: 14px
}

.content-card .card-header h2 {
  font-size: 18px
}

.content-card .card-header p {
  font-size: 13px
}

.document-table th {
  font-size: 10px
}

.document-table td {
  font-size: 13px
}

.document-table td b {
  font-size: 13px
}

.document-table td span {
  margin-top: 4px;
  font-size: 11px
}

.document-table a {
  color: #17658f;
  text-decoration: none
}

.template-form label {
  font-size: 13px
}

.template-list b {
  font-size: 14px
}

.template-list span {
  font-size: 12px
}

.template-list em {
  font-size: 11px
}

.version-compare .paper-card {
  border-radius: 8px
}

.version-compare .paper-label {
  font-size: 10px
}

.version-compare .paper-body {
  font-size: 15px;
  line-height: 1.65
}

@media(max-width:760px) {
  .secondary-heading {
    align-items: flex-start;
    flex-direction: column
  }

  .secondary-heading h1 {
    font-size: 29px
  }

  .secondary-counter {
    min-width: auto;
    padding: 10px 14px
  }

  .secondary-counter strong {
    font-size: 22px
  }

  .notification-list article {
    grid-template-columns: 9px minmax(0, 1fr);
    padding: 18px
  }

  .notification-open {
    grid-column: 2;
    justify-self: start
  }

  .secondary-card-head {
    align-items: flex-start;
    padding: 18px
  }

  .simple-card {
    padding: 20px
  }
}

/* ONLYOFFICE remains the document surface; this keeps its command area consistent with the main product. */
.onlyoffice-shell {
  grid-template-rows: 68px 1fr 
}

.onlyoffice-head {
  gap: 12px ;
  padding: 0 20px ;
  border-bottom-color: #d7e0e6 ;
  box-shadow: 0 3px 12px rgba(16, 45, 68, .045)
}

.onlyoffice-back {
  display: grid ;
  flex: 0 0 38px ;
  width: 38px ;
  height: 38px ;
  place-items: center ;
  border: 1px solid #d1dce3 ;
  border-radius: 7px ;
  background: #fff ;
  color: #17658f 
}

.onlyoffice-head h1 {
  color: #132f47 ;
  font-size: 15px 
}

.office-status-copy {
  display: flex ;
  align-items: center;
  gap: 7px;
  white-space: nowrap
}

.office-status-copy:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1b9b6d;
  box-shadow: 0 0 0 4px #e9f7f1
}

.office-action {
  min-height: 40px ;
  border-radius: 6px ;
  font-weight: 750 ;
  white-space: nowrap
}

.office-action.primary {
  border-color: #19865e ;
  background: #19865e 
}

.office-action.send {
  border-color: #d8992b ;
  background: #f3ad36 
}

@media(max-width:1050px) {
  .office-status-copy {
    display: none 
  }
}

@media(max-width:760px) {
  .onlyoffice-shell {
    grid-template-rows: auto 1fr 
  }

  .onlyoffice-head {
    align-items: flex-start ;
    flex-wrap: wrap;
    padding: 10px 12px 
  }

  .onlyoffice-head h1 {
    flex: 1 1 calc(100% - 52px)
  }
}