/* Shared visual language for current and future modules. */
:root {
  --ui-navy: #112d43;
  --ui-teal: #087d75;
  --ui-blue: #3669d4;
  --ui-violet: #7a51cc;
  --ui-amber: #d89b26;
  --ui-coral: #d75c65;
  --ui-surface: #f0f4fa;
  --ui-line: #d5e1ed;
}
.management-app {
  background:
    radial-gradient(ellipse at 95% 0%, #e0e9fa 0, transparent 52%), #eef3f9;
  color: #17364f;
}
.management-sidebar {
  width: 280px;
  padding: 24px 17px 15px;
  background: linear-gradient(170deg, #15394e, #112d43 65%, #122b42);
  border-right: 0;
  color: #dceaf2;
  box-shadow: 8px 0 35px #0d314b0a;
}
.management-main {
  margin-left: 280px;
}
.brand {
  padding: 2px 7px 18px;
  color: #fff;
  gap: 12px;
}
.brand-logo-box {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1d9a91, #17757d);
  display: grid;
  place-items: center;
  color: white;
  border-radius: 16px;
  box-shadow: 0 5px 20px #041f3533;
}
.brand-logo-box:has(img) {
  background: white;
  padding: 4px;
}
.brand .brand-logo-box img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}
.brand strong {
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0.1px;
}
.brand small {
  font-size: 11px;
  line-height: 1.5;
  color: #a9c5d3;
  margin-top: 4px;
}
.sidebar-company {
  font-size: 10px;
  padding: 10px 12px;
  line-height: 1.5;
  margin: 0 4px 17px;
  background: #ffffff09;
  border: 1px solid #ffffff11;
  border-radius: 9px;
  color: #b8d5dc;
}
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #39c796;
  box-shadow: 0 0 0 3px #39c79615;
  flex-shrink: 0;
  margin-right: 6px;
}
.sidebar-search {
  position: relative;
  margin: 0 2px 17px;
}
.sidebar-search > svg {
  position: absolute;
  top: 17px;
  left: 13px;
  color: #85a5b6;
}
.sidebar-search .touch-input {
  padding-left: 39px;
  background: #ffffff0b;
  border-color: #ffffff16;
  color: #fff;
  font-size: 12px;
  min-height: 48px;
}
.sidebar-search .touch-input::placeholder {
  color: #99b2c1;
}
.management-sidebar nav {
  scrollbar-width: thin;
  scrollbar-color: #406275 transparent;
  flex: 1;
  min-height: 80px;
}
.management-sidebar nav a {
  font-size: 13px;
  padding: 10px 12px;
  min-height: 50px;
  color: #b5cedb;
  gap: 11px;
  border-radius: 11px;
  position: relative;
  margin: 4px 2px;
  font-weight: 600;
  transition:
    background 0.15s,
    color 0.15s;
}
.management-sidebar nav a > span.nav-icon {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 10px;
  flex-shrink: 0;
  background: #ffffff0c;
  color: #b7cfde;
}
.management-sidebar nav a.nav-home > span.nav-icon {
  color: #80d4d3;
  background: #35a7a222;
}
.management-sidebar nav a.nav-empresas > span.nav-icon {
  color: #86acf6;
  background: #5a83d32a;
}
.management-sidebar nav a.nav-materiales > span.nav-icon {
  color: #77e0bf;
  background: #33b99325;
}
.management-sidebar nav a.nav-clientes > span.nav-icon {
  color: #fac777;
  background: #e1a33e24;
}
.management-sidebar nav a.nav-tablas-precios > span.nav-icon {
  color: #beabff;
  background: #9169db27;
}
.management-sidebar nav a.nav-usuarios > span.nav-icon {
  color: #75cae6;
  background: #38a6c025;
}
.management-sidebar nav a.nav-perfiles > span.nav-icon {
  color: #e8a9c2;
  background: #c9638e24;
}
.management-sidebar nav a.nav-auditoria > span.nav-icon {
  color: #f8c076;
  background: #d8903b22;
}
.management-sidebar nav a.current {
  background: linear-gradient(90deg, #0e7e76, #167e7a);
  box-shadow: 0 5px 15px #071e3033;
  color: #fff;
}
.management-sidebar nav a.current > span.nav-icon {
  background: #ffffff20;
  color: #fff;
}
.management-sidebar nav a:hover {
  background: #ffffff0b;
  color: #fff;
}
.management-sidebar nav a.current:hover {
  background: #168b80;
}
.management-sidebar nav a > span.nav-current-dot {
  margin-left: auto;
  width: 5px;
  height: 5px;
  background: transparent;
  border-radius: 50%;
}
.management-sidebar nav a.current > span.nav-current-dot {
  background: #9debd2;
}
.nav-group {
  margin: 12px 0 4px;
}
.nav-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px 7px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #779cad;
  font-size: 9px;
  font-weight: 800;
  min-height: 35px;
}
.nav-group-title svg {
  color: #6f91a4;
  transition: transform 0.2s;
}
.nav-group-title svg.collapsed {
  transform: rotate(-90deg);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 3px 0;
  padding: 14px 10px;
  border-top: 1px solid #ffffff13;
  border-bottom: 1px solid #ffffff0e;
  background: #ffffff03;
}
.user-avatar {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #e5b255, #c48733);
  color: #183e4c;
  font-size: 13px;
  font-weight: 800;
}
.sidebar-user > div {
  flex: 1;
  min-width: 0;
}
.sidebar-user strong {
  display: block;
  color: #eff7fb;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-transform: capitalize;
}
.sidebar-user > div > span {
  display: block;
  color: #e5b968;
  font-weight: 700;
  font-size: 10px;
  margin-top: 2px;
}
.sidebar-user > a {
  color: #81a5b9;
  padding: 7px;
}
.sidebar-session {
  font-size: 9px;
  color: #7399ad;
  padding: 15px 8px 0;
  letter-spacing: 0.2px;
}
.sidebar-session .live-dot {
  width: 5px;
  height: 5px;
}
.menu-empty {
  font-size: 12px;
  color: #86a7b7;
  line-height: 1.6;
  padding: 18px;
}
.management-header {
  min-height: 91px;
  padding: 18px 31px;
  background: #ffffffd9;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #d6e2ee;
  gap: 15px;
  flex-wrap: wrap;
}
.live-clock {
  display: flex;
  align-items: center;
  gap: 12px;
}
.clock-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: #e1ebfa;
  border-radius: 12px;
  color: #3c70bd;
}
.live-clock small {
  color: #8094a5;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.live-clock strong {
  font-size: 13px;
  color: #254a64;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.header-actions .btn {
  min-height: 44px;
  padding: 10px 15px;
  font-size: 12px;
  border-radius: 11px;
}
.header-logout {
  background: #fff0f0;
  color: #b9515a;
  border: 1px solid #f5d9dc;
}
.btn.primary {
  background: linear-gradient(125deg, #087d75, #0d9585);
  box-shadow: 0 6px 16px #087d7526;
  color: white;
}
.btn.primary:hover {
  background: linear-gradient(125deg, #066b64, #0d8679);
}
.btn.secondary {
  background: #eaf1fb;
  border-color: #cddcee;
  color: #426893;
}
.management-content {
  padding: 30px;
  max-width: 1760px;
}
.page-title .eyebrow {
  color: #4f72b6;
}
.page-title h1 {
  font-size: 32px;
  color: #163c59;
}
.page-title p {
  font-size: 13px;
  color: #72899d;
}
.page-title .btn {
  min-height: 50px;
}
.touch-input {
  background: #f5f9fd;
  border: 1.5px solid #cfdeec;
  min-height: 52px;
  color: #173d5a;
  font-weight: 550;
  border-radius: 11px;
  box-shadow: inset 0 1px 2px #183e4c03;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.touch-input::placeholder {
  font-size: 12px;
  color: #8099af;
  font-weight: 400;
  opacity: 1;
}
.touch-input:focus {
  outline: 3px solid #4c9cce22;
  border-color: #548fbe;
  background: white;
  outline-offset: 0;
}
.field > span:first-child {
  font-size: 12px;
  font-weight: 750;
  color: #365976;
}
.field > span:first-child b {
  color: #d26570;
}
.field .hint {
  color: #6c8aa4;
  font-size: 11px;
}
.choice-card {
  background: #edf3fb;
  border-color: #d0dfef;
  color: #5a7795;
  font-size: 12px;
  font-weight: 700;
  min-height: 46px;
}
.choice-card.selected {
  background: #d1f0e7;
  border-color: #62bda6;
  color: #087764;
}
.choice-card.negative.selected {
  background: #fbdde1;
  border-color: #df929f;
  color: #a4364b;
}
.badge {
  gap: 5px;
  min-height: 29px;
  border-radius: 7px;
  font-size: 10px;
  padding: 6px 10px;
}
.badge.green {
  background: #d0f1df;
  color: #19784e;
  border: 1px solid #afddc1;
}
.badge.red {
  background: #fbdee4;
  color: #b03b56;
  border: 1px solid #efbcc8;
}
.badge.blue {
  background: #dfeaff;
  color: #3c66b7;
  border: 1px solid #c5d7fb;
}
.badge.violet {
  background: #e9dffd;
  color: #7952ba;
  border: 1px solid #d8c5f5;
}
.badge.amber {
  background: #fce9c0;
  color: #94651b;
  border: 1px solid #eed399;
}
.badge.neutral {
  background: #e9eef5;
  color: #71869c;
  border: 1px solid #dbe3ec;
}
.dynamic-filters {
  background: linear-gradient(115deg, #edf3fd, #f7f9fe);
  border-color: #d0deef;
  border-radius: 17px;
  gap: 15px;
  padding: 18px 20px;
  box-shadow: 0 5px 18px #27486a04;
}
.filter-intro {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #4f74b3;
  border-bottom: 1px solid #d8e3f1;
  padding: 0 0 13px;
  margin-bottom: 0;
  font-weight: 750;
  font-size: 12px;
}
.filter-intro > svg {
  background: #dce7f8;
  width: 33px;
  height: 33px;
  padding: 7px;
  border-radius: 9px;
}
.filter-intro small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #7f95ad;
  margin-top: 2px;
}
.filter-loading {
  margin-left: auto;
  color: #1d8c7b;
  font-size: 11px;
  font-weight: 600;
}
.clear-filters {
  min-height: 46px;
  padding: 10px 14px;
  background: #e4eaf5;
  border: 1px solid #cbd8ea;
  color: #5b729b;
  font-size: 12px;
}
.filter-count {
  display: inline-grid;
  place-items: center;
  background: #5c7fb5;
  color: #fff;
  min-width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 10px;
}
.filter-label,
.filter-search > span {
  font-weight: 750;
  font-size: 11px;
  color: #6080a1;
}
.filters-panel .choice-card {
  min-height: 48px;
  padding: 11px 15px;
}
.filters-panel .choice-card.selected {
  background: #dce8fd;
  color: #315fab;
  border-color: #92b1e3;
}
.table-panel {
  border: 1px solid #d3e1ee;
  box-shadow: 0 7px 25px #24466506;
  border-radius: 17px;
}
.table-caption {
  padding: 19px 23px;
  background: #f7faff;
  border-bottom: 1px solid #e0e9f5;
}
.table-caption h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #2f5374;
  font-size: 14px;
}
.table-caption h2 > svg {
  color: #6291c1;
}
.table-caption .muted {
  font-size: 11px;
  color: #8099ad;
}
th {
  background: #e1eaf7;
  color: #54769c;
  padding: 15px 17px;
  font-size: 10px;
  letter-spacing: 0.7px;
  border-bottom: 1px solid #cddced;
}
td {
  padding: 17px;
  color: #42617b;
  border-bottom: 1px solid #e6edf5;
  font-size: 12px;
}
tbody tr:nth-child(even) {
  background: #f7faff;
}
tbody tr:hover {
  background: #edf5fc;
}
.index-identity {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 210px;
  max-width: 330px;
}
.index-avatar {
  width: 39px;
  height: 39px;
  border-radius: 11px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #dcebf9;
  color: #4a78a1;
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
}
.index-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
  padding: 3px;
}
.avatar-materiales {
  background: #d4f0e5;
  color: #2f9071;
}
.avatar-clientes {
  background: #f8e7c7;
  color: #a48039;
}
.avatar-usuarios {
  background: #dcecf8;
  color: #477ca8;
}
.avatar-perfiles {
  background: #ebdff8;
  color: #8d64b2;
}
.avatar-tablas-precios {
  background: #e3e2fa;
  color: #6b68ab;
}
.index-identity strong {
  display: block;
  color: #254d70;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 750;
}
.index-identity small {
  display: block;
  font-size: 10px;
  color: #8a9eb0;
  margin-top: 3px;
  line-height: 1.5;
}
.price-chip {
  display: inline-flex;
  white-space: nowrap;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 750;
  min-width: 75px;
  justify-content: end;
  font-variant-numeric: tabular-nums;
}
.price-chip.purchase {
  background: #def3e9;
  color: #188360;
  border: 1px solid #bee5d0;
}
.price-chip.sale {
  background: #e3eaff;
  color: #516cbe;
  border: 1px solid #cedafa;
}
.data-chip {
  display: inline-block;
  background: #e9eff7;
  color: #5b7795;
  font-size: 11px;
  font-weight: 650;
  border-radius: 7px;
  padding: 7px 10px;
  white-space: nowrap;
}
.reference-chip {
  display: inline-flex;
  color: #6862b0;
  background: #eeebfc;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.document-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-weight: 650;
  color: #496b89;
  white-space: nowrap;
}
.document-chip small {
  font-size: 9px;
  font-weight: 800;
  color: #95a8b8;
  letter-spacing: 0.7px;
}
.column-email {
  color: #5b7f9f;
  font-size: 11px;
}
.row-actions {
  gap: 6px;
}
.action-button {
  background: #e2edf9;
  color: #51779d;
  border: 1px solid #cfdfef;
  font-size: 10px;
  padding: 10px 12px;
  min-height: 41px;
}
.action-button.blue {
  background: #e3e9fc;
  color: #6276bb;
  border-color: #cfd8f4;
}
.action-button.red {
  background: #fce5e8;
  color: #bd6572;
  border-color: #efccd3;
}
.pagination {
  background: #f8fafd;
}
.page-button {
  background: #e9f0f9;
  color: #6886a3;
}
.page-button.selected {
  background: #4a78b5;
}
.touch-modal {
  background: #f1f5fb;
  border: 1px solid #ccdaea;
  border-radius: 20px;
}
.touch-modal > header {
  background: linear-gradient(110deg, #dce9fa, #e8effa 65%, #e6e6f7);
  border-bottom: 1px solid #c9d9ee;
  padding: 21px 25px;
}
.touch-modal > header small {
  font-size: 9px;
  color: #7091b1;
  letter-spacing: 1.4px;
}
.touch-modal h2 {
  font-size: 22px;
  color: #294e72;
}
.touch-modal > footer {
  background: #e9f0f9;
  border-top: 1px solid #cfddee;
  padding: 16px 25px;
}
.modal-content {
  padding: 23px;
  background: #f1f5fb;
}
.form-sections {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.form-section {
  padding: 20px;
  border: 1px solid #d3e0ee;
  border-left: 4px solid var(--section-accent, #5c8bce);
  border-radius: 13px;
  background: var(--section-bg, #fff);
}
.section-blue {
  --section-accent: #5b88cf;
  --section-bg: #f7faff;
  --section-label: #5b7da8;
}
.section-teal {
  --section-accent: #31a58b;
  --section-bg: #f4fbf8;
  --section-label: #478f7d;
}
.section-violet {
  --section-accent: #9b79d2;
  --section-bg: #faf7ff;
  --section-label: #8b70b3;
}
.section-amber {
  --section-accent: #d4a248;
  --section-bg: #fffbf3;
  --section-label: #a98b4c;
}
.form-section-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 19px;
  padding-bottom: 15px;
  border-bottom: 1px solid #dbe4ee;
}
.section-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  font-size: 11px;
  color: #fff;
  background: var(--section-accent);
  font-weight: 800;
}
.form-section-heading h3 {
  font-size: 14px;
  color: #355776;
  font-weight: 750;
  margin: 0;
}
.form-section-heading p {
  font-size: 11px;
  line-height: 1.6;
  color: #8b9eb1;
  margin: 4px 0 0;
}
.form-section .form-grid {
  gap: 19px;
}
.form-section .field.full {
  grid-column: 1/-1;
}
.form-section .field > span:first-child {
  color: var(--section-label);
  font-size: 11px;
}
.form-section .touch-input {
  background: #ffffffbb;
}
.form-section .choice-card {
  background: #fff9;
}
.form-section .choice-card.selected {
  background: #ceeade;
}
.permission-group {
  background: #ece6f7;
  border: 1px solid #e0d5ef;
}
.permission-group > strong {
  color: #8a72ad;
  font-size: 12px;
}
.permission-group .choice-card.selected {
  background: #d8c8f1;
  color: #70529e;
  border-color: #b499d8;
}
.price-items {
  background: #f2faf6;
  border: 1px solid #cde4d9;
  border-left: 4px solid #38a787;
  border-radius: 13px;
  padding: 20px;
}
.price-items .section-heading {
  margin: 0 0 12px;
}
.price-items .section-heading h3 {
  font-size: 15px;
  color: #388570;
}
.material-picker .choice-card {
  font-size: 11px;
  background: #e9f5ef;
}
.material-picker .choice-card.selected {
  background: #cfeadd;
  border-color: #8cc8ab;
}
.context-notice {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  background: #e2edf9;
  border: 1px solid #cbddef;
  border-radius: 12px;
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 1.7;
  color: #5d7f9e;
}
.context-notice svg {
  flex-shrink: 0;
  color: #5d8abd;
}
.brand-preview {
  border: 1px solid #d4c4ed;
  border-radius: 14px;
  background: linear-gradient(110deg, #f0eafb, #f8f5fe);
  padding: 19px;
  margin-bottom: 20px;
}
.brand-preview > header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}
.brand-preview > header .section-icon {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 11px;
  background: #e0d3f6;
  color: #8c6abe;
}
.brand-preview h3 {
  font-size: 14px;
  color: #79639a;
  font-weight: 750;
}
.brand-preview header p {
  font-size: 10px;
  color: #9b8bad;
  margin-top: 3px;
  line-height: 1.5;
}
.brand-preview header .badge {
  margin-left: auto;
  font-size: 8px;
}
.brand-preview-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 15px;
}
.preview-app {
  background: #e4eaf3;
  border: 1px solid #cdd8e7;
  border-radius: 11px;
  overflow: hidden;
}
.preview-app > small,
.preview-ticket > small {
  display: block;
  padding: 12px 15px;
  font-size: 8px;
  letter-spacing: 1px;
  color: #8c8fa7;
  font-weight: 700;
}
.preview-app-header {
  background: #183d51;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px;
  min-height: 115px;
  color: white;
}
.preview-logo {
  width: 61px;
  height: 61px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #2e6274;
  border: 1px solid #3a7281;
  border-radius: 12px;
  color: #a9d2d7;
}
.preview-logo:has(img) {
  background: #fff;
  border: 0;
  padding: 5px;
}
.preview-logo img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.preview-app-header strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
}
.preview-app-header p {
  font-size: 10px;
  color: #a8c4d2;
  margin-top: 5px;
  line-height: 1.6;
}
.preview-app-strip {
  display: flex;
  gap: 8px;
  padding: 18px;
}
.preview-app-strip i {
  display: block;
  height: 7px;
  width: 23%;
  border-radius: 6px;
  background: #b7c8df;
}
.preview-app-strip i:first-child {
  width: 35%;
  background: #a3c7c2;
}
.preview-ticket {
  border: 1px solid #d9d4e4;
  border-radius: 11px;
  background: white;
}
.preview-ticket-brand {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 7px 20px 21px;
}
.preview-ticket-brand img {
  max-width: 100px;
  height: 45px;
  object-fit: contain;
  margin-bottom: 9px;
}
.preview-ticket-brand strong {
  font-size: 13px;
  font-weight: 750;
  color: #4b5471;
  word-break: break-word;
}
.preview-ticket-brand span {
  font-size: 10px;
  color: #9696aa;
  margin: 4px 0 5px;
}
.preview-ticket-brand b {
  font-size: 9px;
  color: #7b7f96;
  font-weight: 650;
}
.preview-ticket-brand p {
  font-size: 9px;
  line-height: 1.7;
  color: #9696aa;
  white-space: pre-wrap;
  margin-top: 8px;
}
.record-show-hero {
  display: flex;
  gap: 16px;
  align-items: center;
  background: linear-gradient(115deg, #16475b, #28527c);
  padding: 25px;
  border-radius: 14px;
  color: white;
  margin-bottom: 20px;
}
.record-avatar {
  width: 68px;
  height: 68px;
  border: 1px solid #ffffff25;
  border-radius: 16px;
  background: #ffffff11;
  color: #7fd0c1;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.record-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
  padding: 6px;
}
.record-show-hero .eyebrow {
  font-size: 9px;
  color: #91b9ce;
  letter-spacing: 1px;
}
.record-show-hero h2 {
  font-size: 24px;
  color: white;
  margin-top: 7px;
}
.record-show-hero p {
  font-size: 11px;
  line-height: 1.6;
  color: #a7c8db;
  margin-top: 5px;
}
.record-show-hero > .badge {
  margin-left: auto;
  flex-shrink: 0;
}
.show-price-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.show-price-summary > div {
  padding: 18px;
  background: #dceee5;
  border: 1px solid #c3decd;
  border-radius: 12px;
  color: #468563;
}
.show-price-summary > div:nth-child(2) {
  background: #e1e6fa;
  border-color: #cfd6f0;
  color: #6875ae;
}
.show-price-summary > div:nth-child(3) {
  background: #f9ebcf;
  border-color: #eed9b1;
  color: #a88645;
}
.show-price-summary span {
  display: block;
  font-size: 10px;
  font-weight: 650;
}
.show-price-summary strong {
  display: block;
  font-size: 24px;
  font-weight: 750;
  margin-top: 6px;
}
.show-section {
  border: 1px solid #d6e1ed;
  border-left: 4px solid var(--section-accent);
  background: var(--section-bg);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
.show-section > header {
  padding: 18px 21px;
  border-bottom: 1px solid #dfe7f0;
}
.show-section h3 {
  font-weight: 750;
  font-size: 14px;
  color: var(--section-label);
}
.show-section header p {
  font-size: 10px;
  color: #93a4b7;
  margin-top: 4px;
  line-height: 1.6;
}
.show-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 6px 20px 13px;
  gap: 0 25px;
}
.show-field {
  padding: 14px 0;
  border-bottom: 1px solid #dce6ef;
  min-width: 0;
}
.show-field.full {
  grid-column: 1/-1;
}
.show-field dt {
  font-size: 10px;
  font-weight: 650;
  color: #8e9fb3;
  margin-bottom: 7px;
}
.show-field dd {
  font-size: 13px;
  color: #385f80;
  font-weight: 650;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.show-field dd.show-empty,
.show-empty {
  color: #a0acbc;
  font-weight: 400;
  font-size: 11px;
}
.show-image {
  height: 75px;
  max-width: 220px;
  object-fit: contain;
  padding: 8px;
  border: 1px solid #dbe4ed;
  border-radius: 10px;
  background: white;
}
.permission-summary {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.show-history {
  display: flex;
  gap: 11px;
  padding: 17px 20px;
  background: #e3ebf6;
  border-radius: 11px;
  color: #7f98b1;
  margin-top: 16px;
}
.show-history b {
  font-size: 11px;
  color: #6382a1;
}
.show-history p {
  font-size: 10px;
  margin-top: 5px;
}
.welcome-banner {
  padding: 37px;
  background: linear-gradient(115deg, #104b5e, #146c73 62%, #238584);
  border: 1px solid #256c7a;
  border-radius: 21px;
  color: white;
  box-shadow: 0 12px 28px #18556a13;
  overflow: hidden;
}
.welcome-banner .eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #79c7c6;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 1.6px;
}
.welcome-banner h1 {
  color: white;
  font-size: 38px;
  font-weight: 750;
  line-height: 1.13;
  letter-spacing: -1px;
  margin: 17px 0;
}
.welcome-banner p {
  color: #97c6cd;
  font-size: 12px;
  max-width: 450px;
  line-height: 1.9;
}
.welcome-banner p b {
  color: #cce6e8;
  font-weight: 650;
  text-transform: capitalize;
}
.welcome-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}
.welcome-tags > span {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff0e;
  color: #9ed4d5;
  border: 1px solid #ffffff13;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 9px;
}
.welcome-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 270px;
  height: 220px;
  flex-shrink: 0;
}
.welcome-main-icon {
  display: grid;
  place-items: center;
  background: linear-gradient(130deg, #379995, #4dada5);
  width: 126px;
  height: 126px;
  border-radius: 30px;
  transform: rotate(-12deg);
  color: #d4efde;
  box-shadow: 0 15px 40px #052e452a;
  border: 1px solid #7bccae55;
}
.welcome-main-icon svg {
  transform: rotate(12deg);
}
.welcome-orbit {
  position: absolute;
  border: 1px solid #8bd6c428;
  border-radius: 50%;
  width: 190px;
  height: 190px;
}
.welcome-orbit.orbit-two {
  width: 260px;
  height: 260px;
  border-style: dashed;
  border-color: #99dfca15;
}
.welcome-art-label {
  position: absolute;
  bottom: -3px;
  padding: 9px 14px;
  background: #164d5fcc;
  border: 1px solid #7ab9b52a;
  border-radius: 9px;
  font-size: 9px;
  color: #9bcdcc;
  white-space: nowrap;
}
.welcome-art-label .live-dot {
  width: 5px;
  height: 5px;
}
.section-heading {
  margin: 29px 0 19px;
}
.section-heading .eyebrow {
  color: #8ca0b8;
  font-size: 8px;
  letter-spacing: 1.5px;
}
.section-heading h2 {
  font-size: 19px;
  color: #365674;
  margin-top: 7px;
  font-weight: 750;
}
.dashboard-grid {
  gap: 18px;
}
.dashboard-card {
  padding: 23px;
  border-radius: 15px;
  box-shadow: 0 6px 20px #183c5a05;
  border-top: 4px solid var(--card-accent, #679b91);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.dashboard-card:hover {
  box-shadow: 0 12px 25px #1c465f13;
}
.tone-0 {
  --card-accent: #53a48a;
  background: linear-gradient(130deg, #d3eee2, #e5f3ed);
  border-color: #b9dccc;
  color: #478971;
}
.tone-1 {
  --card-accent: #638bc5;
  background: linear-gradient(130deg, #dce6fa, #eaf0fc);
  border-color: #c5d4ee;
  color: #5c7eae;
}
.tone-2 {
  --card-accent: #c49b50;
  background: linear-gradient(130deg, #f6e6c7, #fbf1df);
  border-color: #ead4ab;
  color: #a3844b;
}
.tone-3 {
  --card-accent: #9b7cb8;
  background: linear-gradient(130deg, #e9dcf7, #f2eafb);
  border-color: #dac8eb;
  color: #9477b1;
}
.tone-4 {
  --card-accent: #599fac;
  background: linear-gradient(130deg, #d6edf3, #e7f5f8);
  border-color: #b9dde6;
  color: #5c8e9d;
}
.tone-5 {
  --card-accent: #bd819c;
  background: linear-gradient(130deg, #f3dce5, #faecf2);
  border-color: #e7c1d2;
  color: #ae7c95;
}
.dashboard-card .card-icon {
  display: grid;
  place-items: center;
  position: absolute;
  top: 21px;
  right: 20px;
  background: #ffffff6b;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  opacity: 1;
  color: var(--card-accent);
}
.card-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 750;
  max-width: 70%;
  line-height: 1.5;
}
.dashboard-card strong {
  font-size: 40px;
  font-weight: 750;
  margin: 14px 0 0;
}
.dashboard-card h3 {
  font-weight: 400;
  font-size: 10px;
  opacity: 0.75;
  margin: 2px 0 20px;
}
.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #ffffff80;
  font-size: 10px;
  font-weight: 650;
}
.delivery-note {
  border: 1px solid #d3e0ef;
  border-left: 4px solid #6c91b9;
  background: #e6edf7;
  border-radius: 13px;
  padding: 20px;
}
.delivery-note h3 {
  color: #6984a1;
  font-size: 12px;
}
.delivery-note p {
  color: #90a2b7;
  font-size: 11px;
}
.file-upload {
  background: #edf4fd;
  border-color: #a8c4df;
  border-radius: 11px;
}
.file-upload small {
  color: #849bb3;
}
.file-upload .btn {
  font-size: 12px;
}
.success-banner {
  background: #daf1e5;
  border-color: #b4dbc6;
  color: #377f60;
  font-size: 12px;
}
.error-banner {
  background: #f9e0e6;
  border: 1px solid #e6bdca;
  color: #a8596b;
}
.field-error {
  background: #fff0f3;
  border: 1px solid #f0d4dd;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 11px;
  color: #b6556e;
}
.field-error:empty {
  display: none;
}
.search-popover {
  background: #f6f9fe;
  border: 1px solid #c6d9ec;
  border-radius: 12px;
  box-shadow: 0 10px 25px #264d7220;
}
.search-result {
  font-size: 12px;
  color: #5a7998;
}
.search-result:hover,
.search-result[aria-pressed="true"] {
  background: #dcebf7;
  color: #3d739f;
}
.auth-screen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100dvh;
  color: #1c3f58;
  background: #f2f6fb;
}
.auth-visual {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: #163b52;
}
.auth-yard-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}
.auth-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #092d42e6 0%,
    #0b354c77 36%,
    #10344910 64%,
    #09283fc4 100%
  );
}
.auth-visual-content {
  position: relative;
  z-index: 1;
  padding: 58px 58px 0;
  color: #fff;
}
.auth-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: #b7d9dc;
}
.auth-visual h1 {
  font-size: 62px;
  letter-spacing: -2px;
  font-weight: 750;
  line-height: 1.05;
  margin: 30px 0 20px;
}
.auth-visual-content > p {
  font-size: 14px;
  line-height: 1.9;
  color: #bbd0da;
  max-width: 310px;
}
.auth-feature-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 30px;
}
.auth-feature-row > span {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #b5ceda2a;
  background: #12394d55;
  backdrop-filter: blur(8px);
  border-radius: 9px;
  font-size: 10px;
  color: #c1dde4;
}
.auth-feature-row svg {
  color: #89c4bc;
}
.auth-visual-footer {
  position: absolute;
  bottom: 33px;
  left: 58px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: #b2cbd6;
  letter-spacing: 0.3px;
}
.auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px 55px 62px;
  position: relative;
  background:
    radial-gradient(circle at 95% 2%, #dce8f9, transparent 40%),
    linear-gradient(145deg, #f7faff, #eff5f9);
}
.auth-form-shell {
  max-width: 440px;
  width: 100%;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 39px;
  padding-bottom: 27px;
  border-bottom: 1px solid #dae4ef;
}
.auth-company-logo {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  background: linear-gradient(130deg, #156c76, #1d8b8b);
  border-radius: 19px;
  display: grid;
  place-items: center;
  color: #c6ece8;
  box-shadow: 0 6px 18px #1a697420;
}
.auth-company-logo:has(img) {
  background: #fff;
  border: 1px solid #d6e2ed;
  padding: 7px;
}
.auth-company-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.auth-brand strong {
  display: block;
  font-size: 19px;
  color: #254c66;
  line-height: 1.35;
  font-weight: 750;
  word-break: break-word;
}
.auth-brand p {
  font-size: 11px;
  line-height: 1.7;
  color: #8aa0b1;
  margin-top: 5px;
}
.auth-section-kicker {
  font-size: 8px;
  letter-spacing: 1.6px;
  font-weight: 750;
  color: #6d96a4;
}
.auth-form-shell > h2 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.7px;
  color: #254c66;
  font-weight: 750;
  margin: 12px 0;
}
.auth-description {
  font-size: 12px;
  line-height: 1.9;
  color: #879cad;
  margin-bottom: 27px;
}
.auth-company-picker {
  background: #e5eef9;
  border: 1px solid #ccdcef;
  padding: 14px;
  border-radius: 12px;
  margin: -13px 0 25px;
}
.auth-company-picker > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6d8eb1;
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 8px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.auth-form .field {
  gap: 10px;
}
.auth-form .field > span:first-child {
  color: #5c7a96;
  font-weight: 700;
  font-size: 11px;
}
.auth-form .touch-input {
  background: #fff;
  border: 1px solid #c8d8e6;
  min-height: 55px;
  font-size: 13px;
  border-radius: 11px;
  box-shadow: 0 3px 8px #21486603;
}
.auth-form .touch-input::placeholder {
  color: #a0b0bf;
  font-size: 12px;
}
.auth-form .touch-input[aria-invalid="true"] {
  border-color: #d59aa8;
  background: #fff8fa;
}
.auth-input-wrap {
  position: relative;
}
.auth-input-wrap > svg {
  position: absolute;
  left: 15px;
  top: 18px;
  color: #8da6bc;
}
.auth-input-wrap > input {
  padding-left: 45px;
  padding-right: 50px;
}
.auth-input-wrap > button {
  position: absolute;
  right: 8px;
  top: 5px;
  min-width: 43px;
  height: 45px;
  display: grid;
  place-items: center;
  color: #8ca6bd;
}
.auth-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.auth-options small {
  display: block;
  font-size: 10px;
  color: #8da1b4;
  margin-bottom: 7px;
}
.auth-options .choice-card {
  min-height: 37px;
  padding: 7px 16px;
  font-size: 10px;
  border-radius: 8px;
}
.auth-text-link {
  color: #398d98;
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
  line-height: 1.7;
}
.auth-text-link:hover {
  text-decoration: underline;
}
.auth-submit {
  width: 100%;
  min-height: 55px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 750;
  margin-top: 4px;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(110deg, #167b84, #268e8d) !important;
  box-shadow: 0 7px 20px #287f8b26 !important;
}
.auth-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-top: 1px solid #dae5ef;
  padding-top: 24px;
  margin-top: 28px;
  font-size: 9px;
  color: #a2b2c0;
}
.auth-footnote svg {
  color: #8cb1b9;
}
.auth-copyright {
  position: absolute;
  bottom: 22px;
  left: 30px;
  right: 30px;
  text-align: center;
  font-size: 8px;
  letter-spacing: 0.5px;
  color: #a8bac8;
}
.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #568fa0;
  font-weight: 650;
  margin-bottom: 23px;
}
.auth-help {
  padding: 16px 18px;
  background: #e6eef9;
  border: 1px solid #d5e2f1;
  border-radius: 11px;
}
.auth-help strong {
  font-size: 11px;
  color: #6686ac;
}
.auth-help p {
  font-size: 11px;
  line-height: 1.85;
  color: #8ba0b8;
  margin-top: 6px;
}
.auth-screen .field-error {
  font-size: 11px;
}
.auth-screen .success-banner {
  font-size: 11px;
  line-height: 1.9;
}
.keyboard-toggle {
  background: linear-gradient(120deg, #245c79, #2f6c87);
  border: 1px solid #3d7a97;
  color: #d0e8f0;
}
.touch-keyboard {
  background: #dfe9f5;
  border: 1px solid #b5cce0;
}
.keyboard-row button {
  border-color: #c2d4e5;
  background: #f7fbff;
  color: #4c7298;
  box-shadow: 0 2px 0 #b5cce1;
}
.keyboard-row button:active {
  background: #b8ddda;
}
.touch-keyboard header {
  color: #4f7697;
}
@media (max-width: 1150px) {
  .management-sidebar {
    width: 245px;
    padding: 22px 13px 15px;
  }
  .management-main {
    margin-left: 245px;
  }
  .management-header {
    padding: 16px 22px;
  }
  .management-content {
    padding: 25px 20px;
  }
  .brand strong {
    font-size: 14px;
  }
  .brand-logo-box {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .brand small {
    font-size: 10px;
  }
  .welcome-art {
    width: 210px;
  }
  .welcome-orbit.orbit-two {
    width: 220px;
    height: 220px;
  }
  .auth-visual-content {
    padding: 45px 38px 0;
  }
  .auth-visual-footer {
    left: 38px;
  }
  .auth-visual h1 {
    font-size: 52px;
  }
  .auth-form-side {
    padding: 35px 35px 60px;
  }
  .auth-brand strong {
    font-size: 17px;
  }
  .auth-brand {
    margin-bottom: 30px;
  }
  .auth-form-shell > h2 {
    font-size: 27px;
  }
  .live-clock strong {
    font-size: 12px;
  }
  .header-actions .btn {
    font-size: 11px;
    padding: 10px 12px;
  }
  .header-actions {
    gap: 6px;
  }
}
@media (max-width: 950px) {
  .welcome-art {
    display: none;
  }
  .welcome-banner h1 {
    font-size: 34px;
  }
  .management-header {
    gap: 14px;
    padding: 15px 20px;
  }
  .live-clock {
    width: 100%;
  }
  .header-actions {
    margin-left: 54px;
  }
  .auth-screen {
    grid-template-columns: 0.8fr 1fr;
  }
  .auth-visual h1 {
    font-size: 44px;
  }
  .auth-visual-content {
    padding: 40px 26px 0;
  }
  .auth-visual-content > p {
    font-size: 12px;
  }
  .auth-visual-footer {
    left: 26px;
    right: 20px;
    font-size: 8px;
  }
  .auth-feature-row {
    gap: 6px;
  }
  .auth-feature-row > span {
    font-size: 8px;
    padding: 8px;
  }
  .auth-kicker {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .auth-form-side {
    padding: 30px 28px 60px;
  }
  .auth-brand {
    gap: 12px;
  }
  .auth-company-logo {
    width: 64px;
    height: 64px;
    border-radius: 15px;
  }
  .auth-brand strong {
    font-size: 16px;
  }
  .brand-preview-grid {
    grid-template-columns: 1fr;
  }
  .show-price-summary strong {
    font-size: 21px;
  }
}
@media (max-width: 740px) {
  .management-sidebar {
    position: static;
    width: 100%;
    padding: 16px 14px 12px;
  }
  .brand {
    padding-bottom: 12px;
  }
  .brand strong {
    font-size: 17px;
  }
  .brand small {
    font-size: 11px;
  }
  .sidebar-company {
    margin: 0 4px 10px;
    font-size: 9px;
    padding: 7px 10px;
  }
  .sidebar-search {
    display: block;
    margin: 0 4px 10px;
  }
  .sidebar-search .touch-input {
    min-height: 43px;
  }
  .sidebar-search > svg {
    top: 14px;
  }
  .management-sidebar nav {
    display: block;
    max-height: 300px;
    overflow: auto;
  }
  .nav-group {
    margin-top: 6px;
  }
  .nav-group > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .management-sidebar nav a {
    font-size: 11px;
    padding: 7px 9px;
    min-height: 43px;
    gap: 7px;
    margin: 2px;
  }
  .management-sidebar nav a > span.nav-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }
  .nav-group-title {
    padding: 10px 9px 5px;
    font-size: 8px;
  }
  .management-sidebar nav a.nav-home {
    display: inline-flex;
  }
  .sidebar-user {
    padding: 10px 8px;
    margin-top: 12px;
  }
  .sidebar-user strong {
    font-size: 11px;
  }
  .sidebar-user > div > span {
    font-size: 9px;
  }
  .sidebar-session {
    display: none;
  }
  .management-main {
    margin-left: 0;
  }
  .management-content {
    padding: 22px 14px 95px;
  }
  .management-header {
    padding: 13px 16px;
    gap: 10px;
  }
  .live-clock strong {
    font-size: 11px;
  }
  .live-clock small {
    font-size: 8px;
  }
  .clock-icon {
    width: 35px;
    height: 35px;
  }
  .header-actions {
    margin-left: 47px;
  }
  .header-actions .btn {
    font-size: 10px;
    min-height: 38px;
    padding: 8px 10px;
  }
  .header-actions svg {
    width: 14px;
    height: 14px;
  }
  .welcome-banner {
    padding: 26px;
  }
  .welcome-banner h1 {
    font-size: 31px;
  }
  .welcome-banner p {
    font-size: 11px;
  }
  .welcome-tags {
    gap: 6px;
  }
  .welcome-tags > span {
    font-size: 8px;
  }
  .section-heading h2 {
    font-size: 17px;
  }
  .section-heading .badge {
    font-size: 9px;
  }
  .dashboard-grid {
    gap: 12px;
  }
  .dashboard-card {
    padding: 19px 16px;
  }
  .dashboard-card .card-icon {
    width: 32px;
    height: 32px;
    right: 13px;
    top: 16px;
    border-radius: 9px;
  }
  .dashboard-card .card-icon svg {
    width: 20px;
  }
  .card-eyebrow {
    font-size: 10px;
    max-width: 65%;
  }
  .dashboard-card strong {
    font-size: 34px;
    margin-top: 13px;
  }
  .card-bottom {
    font-size: 9px;
  }
  .dashboard-card h3 {
    font-size: 9px;
  }
  .page-title h1 {
    font-size: 28px;
  }
  .page-title p {
    font-size: 12px;
  }
  .dynamic-filters {
    padding: 16px;
    gap: 14px;
  }
  .filters-panel .choice-card {
    padding: 10px 13px;
    font-size: 11px;
  }
  .filter-intro {
    font-size: 11px;
  }
  .filter-intro small {
    font-size: 9px;
  }
  .filter-loading {
    font-size: 9px;
  }
  .form-section {
    padding: 16px;
  }
  .modal-content {
    padding: 15px;
  }
  .form-section-heading p {
    font-size: 10px;
  }
  .form-section-heading h3 {
    font-size: 13px;
  }
  .form-section .form-grid {
    gap: 17px;
  }
  .brand-preview {
    padding: 15px;
  }
  .brand-preview h3 {
    font-size: 12px;
  }
  .brand-preview header .badge {
    display: none;
  }
  .show-field-grid {
    grid-template-columns: 1fr;
    padding: 5px 17px 12px;
  }
  .show-price-summary {
    gap: 8px;
  }
  .show-price-summary > div {
    padding: 14px 10px;
  }
  .show-price-summary span {
    font-size: 9px;
  }
  .show-price-summary strong {
    font-size: 18px;
  }
  .record-show-hero {
    padding: 19px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .record-avatar {
    width: 50px;
    height: 50px;
    border-radius: 12px;
  }
  .record-show-hero h2 {
    font-size: 20px;
  }
  .record-show-hero > .badge {
    margin-left: 62px;
  }
  .auth-screen {
    display: flex;
    flex-direction: column;
  }
  .auth-visual {
    min-height: 280px;
    height: 280px;
  }
  .auth-visual-content {
    padding: 27px 30px;
  }
  .auth-visual h1 {
    font-size: 39px;
    line-height: 1.03;
    margin: 17px 0 11px;
  }
  .auth-visual h1 br {
    display: none;
  }
  .auth-visual-content > p {
    font-size: 11px;
    max-width: 270px;
  }
  .auth-feature-row {
    margin-top: 16px;
  }
  .auth-visual-footer {
    display: none;
  }
  .auth-visual-overlay {
    background: linear-gradient(100deg, #0a3046f2, #0d354b77 70%, #0c304a33);
  }
  .auth-yard-image {
    object-position: 70% 68%;
    width: 100%;
  }
  .auth-form-side {
    padding: 33px 25px 65px;
  }
  .auth-form-shell {
    max-width: 470px;
  }
  .auth-brand {
    padding-bottom: 20px;
    margin-bottom: 25px;
  }
  .auth-brand strong {
    font-size: 18px;
  }
  .auth-form-shell > h2 {
    font-size: 28px;
  }
  .auth-description {
    font-size: 12px;
  }
  .auth-form {
    gap: 20px;
  }
  .auth-input-wrap > input {
    font-size: 13px;
  }
  .auth-options {
    gap: 10px;
  }
  .auth-text-link {
    font-size: 10px;
  }
  .auth-copyright {
    font-size: 8px;
  }
  .auth-section-kicker {
    font-size: 8px;
  }
  .auth-footnote {
    font-size: 8px;
  }
  .auth-company-picker {
    margin-top: 0;
  }
  .touch-modal > header {
    padding: 18px 20px;
  }
  .touch-modal > footer {
    padding: 15px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
  .dashboard-card,
  .choice-card,
  .touch-input {
    transition: none;
  }
}
/* Menu labels must not inherit the icon sizing from the base theme. */
.management-sidebar nav a > span:not(.nav-icon):not(.nav-current-dot) {
  font-size: 13px;
  color: inherit;
  width: auto;
  text-align: left;
  line-height: 1.45;
  min-width: 0;
  font-weight: 600;
}
.management-sidebar nav a {
  color: #bed3df;
}
.nav-group-title {
  color: #86aabb;
}
.form-section-heading p {
  color: #708ba3;
}
.show-section header p {
  color: #7c91aa;
}
.show-field dt {
  color: #6c86a2;
}
.show-field dd {
  color: #2d5274;
}
.touch-input::placeholder {
  color: #7891aa;
}
.auth-form .touch-input::placeholder {
  color: #8299af;
}
.auth-description {
  color: #6c879d;
}
.auth-form .field > span:first-child {
  color: #4d6e8e;
}
.auth-footnote {
  color: #7a95a9;
}
.auth-brand p {
  color: #748fa6;
}
@media (max-width: 740px) {
  .management-sidebar nav a > span:not(.nav-icon):not(.nav-current-dot) {
    font-size: 11px;
  }
}
.touch-modal > header {
  position: sticky;
  top: 0;
  z-index: 5;
}
.touch-modal > footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  box-shadow: 0 -5px 14px #284f7808;
}
.touch-modal > header h2 {
  line-height: 1.35;
}
.table-scroll {
  padding-bottom: 5px;
}
.table-scroll::-webkit-scrollbar {
  height: 9px;
}
.table-scroll::-webkit-scrollbar-track {
  background: #e8eff8;
  border-radius: 6px;
}
.table-scroll::-webkit-scrollbar-thumb {
  background: #9bb7d6;
  border-radius: 6px;
  border: 2px solid #e8eff8;
}
.auth-help {
  color: #6583a0;
}