@import url("/fonts.css");
.hidden {
  display: none !important;
}
.engagement {
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #299268;
  border-radius: 50%;
  color: #fff;
  vertical-align: middle;
}
.engagement .icon {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}
:root {
  --blue: #1c6394;
  --navy: #14374f;
  --gold: #dfc486;
  --ink: #213547;
  --muted: #75828e;
  --line: #e1e7ec;
  --paper: #fff;
  --bg: #f3f6f8;
  --red: #c43b3b;
  --orange: #b56b0b;
  --green: #227660;
  --side: 192px;
  font-family: Arial, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: var(--ink);
  font-size: 1rem;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button,
a,
input,
select,
textarea {
  outline-offset: 3px;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--blue);
}
a {
  color: var(--blue);
  text-decoration: none;
}
button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  padding: 8px 13px;
  color: var(--ink);
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
button:hover {
  border-color: #a7bdcd;
  background: #f5f9fc;
}
.primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.primary:hover {
  background: #164f77;
  color: #fff;
}
.gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #19364c;
}
.danger {
  color: var(--red);
}
.ghost {
  background: transparent;
  border-color: transparent;
}
.small {
  font-size: 0.8571rem;
  padding: 5px 8px;
}
.icon {
  width: 18px;
  height: 18px;
  flex: none;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.muted {
  color: var(--muted);
}
.mono {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.empty {
  padding: 44px 20px;
  text-align: center;
  color: var(--muted);
}
.boot {
  display: grid;
  place-content: center;
  min-height: 100vh;
  text-align: center;
}
.boot img {
  width: 300px;
  max-width: 75vw;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--side);
  background: var(--navy);
  color: #dce5ec;
  padding: 21px 12px;
  z-index: 25;
  display: flex;
  flex-direction: column;
}
.brand {
  padding: 0 6px 20px;
  border-bottom: 1px solid #ffffff1a;
}
.brand img {
  width: 100%;
  height: auto;
  display: block;
}
.brand small {
  display: block;
  text-align: center;
  color: #afc7d9;
  font-size: 0.7143rem;
  letter-spacing: 1.2px;
  margin-top: 9px;
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 19px;
}
.nav button {
  justify-content: flex-start;
  background: transparent;
  border: 0;
  color: #bbcdd9;
  padding: 11px 13px;
  font-size: 0.9286rem;
}
.nav button:hover {
  background: #ffffff0b;
}
.nav button.active {
  color: var(--gold);
  background: #ffffff11;
  box-shadow: inset 3px 0 var(--gold);
}
.nav-sep {
  height: 1px;
  background: #ffffff14;
  margin: 10px;
}
.side-foot {
  margin-top: auto;
  font-size: 0.7857rem;
  color: #9cb6c8;
  padding: 15px 10px;
  line-height: 1.8;
}
.topbar {
  position: fixed;
  left: var(--side);
  right: 0;
  top: 0;
  height: 58px;
  background: #ffffffed;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  z-index: 20;
  gap: 12px;
}
.top-title {
  font-size: 0.8571rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #edf3f7;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.user-name {
  font-size: 0.8571rem;
}
.role-label {
  font-size: 0.7143rem;
  color: var(--muted);
}
.view-switch {
  display: flex;
  align-items: center;
  gap: 4px;
}
.view-switch select {
  max-width: 170px;
  border: 0;
  background: transparent;
  font-size: 0.8571rem;
  padding: 6px;
}
.demo-label {
  color: #8a691f;
  background: #faf3df;
  border: 1px solid #e8d9b5;
  padding: 3px 7px;
  border-radius: 3px;
  font-size: 0.7143rem;
}
.view-banner {
  background: #fff4d5;
  border: 1px solid #ead69e;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  border-radius: 6px;
  font-size: 0.8571rem;
}
.main {
  margin-left: var(--side);
  padding: 80px 22px 20px;
  min-height: 100vh;
}
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.page-title h1 {
  font-size: 1.6429rem;
  letter-spacing: 0.5px;
  margin: 0 0 5px;
  font-weight: 600;
}
.page-title p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8571rem;
}
.head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px #223d5a03;
}
.panel-pad {
  padding: 18px;
}
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 17px;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  font-weight: 600;
}
.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.toolbar input,
.toolbar select {
  height: 34px;
  padding: 6px 9px;
  font-size: 0.8571rem;
}
.cases-panel > .toolbar > #country-filter,
.cases-panel > .toolbar > #profile-filter {
  flex: 1 1 130px;
  min-width: 0;
}
.cases-panel > .toolbar > .spacer {
  display: none;
}
.search {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 340px;
}
.search input {
  width: 100%;
  padding-left: 31px;
}
.search .icon {
  position: absolute;
  left: 9px;
  top: 8px;
  width: 16px;
  height: 16px;
  color: var(--muted);
}
input,
select,
textarea {
  border: 1px solid #d5dfe6;
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  padding: 8px 9px;
  max-width: 100%;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  outline: 2px solid #1c639418;
}
.sortbar {
  padding: 7px 14px;
  background: #fafcfd;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 35px;
  font-size: 0.7857rem;
  flex-wrap: wrap;
}
.sortchip {
  background: #eaf2f8;
  color: var(--blue);
  border: 1px solid #d4e3ed;
  padding: 3px 7px;
  border-radius: 4px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.sortchip button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  line-height: 1;
}
.table-scroll {
  overflow: auto;
  max-height: calc(100vh - 282px);
  min-height: 220px;
  scrollbar-width: thin;
}
.cases-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 0.8571rem;
  white-space: nowrap;
}
.cases-table th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f6f8fa;
  color: #647684;
  text-align: left;
  font-weight: 500;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  height: 43px;
}
.cases-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #edf1f4;
  height: 53px;
  background: white;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cases-table tr:hover td {
  background: #f2f7fb;
}
.cases-table tr {
  cursor: pointer;
}
.head-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sort-buttons {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sort-buttons button {
  font-size: 0.5714rem;
  line-height: 9px;
  padding: 0 3px;
  border: 0;
  background: transparent;
  color: #acb9c3;
}
.sort-buttons button.selected {
  color: var(--blue);
  font-weight: 800;
}
.priority {
  font-size: 0.6429rem;
  background: #dfebf4;
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--blue);
}
.mark-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border: 1px solid #e3e9ed;
  border-radius: 4px;
  background: #fff;
}
.mark-fallback {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 1.1429rem;
  background: #f1f4f7;
  color: #4d728e;
  letter-spacing: -1px;
}
.status {
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 0.7857rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eaf3ee;
  color: #3e775e;
}
.status::before {
  content: "";
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
}
.status.pending {
  background: #eaf1f8;
  color: #43749c;
}
.status.dead {
  background: #eef0f2;
  color: #85919b;
}
.date {
  font-variant-numeric: tabular-nums;
}
.date.soon {
  color: var(--orange);
}
.date.urgent {
  color: var(--red);
  font-weight: 600;
}
.date.past {
  color: #9aa3ac;
}
.badge {
  font-size: 0.7143rem;
  padding: 2px 5px;
  border-radius: 3px;
  color: #75601e;
  background: #f6efd9;
  margin-right: 4px;
}
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 0.7857rem;
  color: var(--muted);
  gap: 8px;
}
.pager-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pager button {
  padding: 4px 8px;
  font-size: 0.7857rem;
}
.grid-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
  margin-bottom: 17px;
}
.stat {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 15px 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stat strong {
  display: block;
  font-size: 2rem;
  font-weight: 500;
  color: var(--blue);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.stat small {
  color: var(--muted);
  font-size: 0.7857rem;
}
.stat > .icon {
  color: #a8bdca;
  width: 28px;
  height: 28px;
}
.two-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
}
.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #edf1f4;
  font-size: 0.8571rem;
}
.list-row:last-child {
  border-bottom: 0;
}
.list-main {
  flex: 1;
  min-width: 0;
}
.list-main strong {
  font-size: 0.8571rem;
  font-weight: 500;
  display: block;
  margin-bottom: 5px;
}
.list-main small {
  color: var(--muted);
  font-size: 0.7857rem;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.field > label {
  font-size: 0.7857rem;
  color: #627584;
}
.field input,
.field select {
  width: 100%;
  height: 35px;
  font-size: 0.8571rem;
}
.field textarea {
  width: 100%;
  min-height: 74px;
  resize: vertical;
  font-size: 0.8571rem;
}
.field .hint {
  font-size: 0.7143rem;
  color: var(--muted);
  line-height: 1.5;
}
.field .required {
  color: var(--red);
  margin-left: 3px;
}
.span2 {
  grid-column: span 2;
}
.span3 {
  grid-column: span 3;
}
.span4 {
  grid-column: span 4;
}
.form-section {
  font-size: 0.8571rem;
  font-weight: 600;
  color: var(--blue);
  margin: 18px 0 11px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.form-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border: 0;
}
.checkrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8571rem;
  padding: 5px 0;
}
.checkrow input {
  width: 15px;
  height: 15px;
  accent-color: var(--blue);
}
.checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px 12px;
}
.checks .checkrow {
  background: #f6f8fa;
  padding: 9px;
  border-radius: 5px;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #112f49a8;
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.modal {
  background: #fff;
  border-radius: 11px;
  box-shadow: 0 22px 70px #10273c40;
  width: min(1120px, 96vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal.narrow {
  width: 620px;
}
.modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.modal-head h2 {
  font-size: 1.2143rem;
  margin: 0;
  font-weight: 600;
}
.modal-body {
  padding: 18px 20px;
  overflow: auto;
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 12px 20px;
  background: #fafcfd;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px 18px;
}
.detail-grid .value {
  font-size: 0.9286rem;
  word-break: break-word;
  line-height: 1.5;
}
.detail-grid .label {
  font-size: 0.7143rem;
  color: var(--muted);
  margin-bottom: 5px;
}
.notice {
  padding: 10px 12px;
  border-radius: 5px;
  background: #eef5fa;
  color: #43667e;
  font-size: 0.8571rem;
  line-height: 1.7;
  margin-bottom: 14px;
}
.notice.warn {
  background: #fbf3df;
  color: #8b691f;
}
.notice.error {
  background: #fceeee;
  color: #a13838;
}
.client-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8571rem;
}
.client-table th {
  background: #f7f9fa;
  color: #687b89;
  font-weight: 500;
  text-align: left;
  padding: 10px 13px;
  white-space: nowrap;
}
.client-table td {
  padding: 11px 13px;
  border-bottom: 1px solid #eaf0f4;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.client-table tbody tr:hover {
  background: #f6f9fc;
}
.client-summary-row { cursor: pointer; }
.profile-open-button { display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: left; font-weight: 600; overflow-wrap: anywhere; }
.profile-open-button:hover { background: transparent; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.profile-info-panel { margin-bottom: 14px; min-width: 0; }
.profile-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; margin: 0; padding: 14px 16px; }
.profile-info-grid > div { min-width: 0; }
.profile-info-grid dt { margin: 0 0 4px; font-size: 0.73rem; color: var(--muted); }
.profile-info-grid dd { margin: 0; font-size: 0.88rem; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.profile-info-wide { grid-column: 1/-1; }
.profile-contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-email { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.profile-email + .profile-email { margin-top: 5px; }
.client-contact-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(230px, 1fr); gap: 14px; align-items: start; }
.profile-applicant { margin: 14px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.profile-applicant:last-child { border-bottom: 0; padding-bottom: 0; }
.profile-applicant h3 { margin: 0 0 12px; font-size: 0.88rem; color: var(--blue); }
.profile-applicant .profile-info-grid { padding: 0; }
.profile-messaging-content { padding: 12px 14px; }
.profile-messaging-content > p { margin: 0; font-size: 0.84rem; }
.messenger-icons.profile-messenger-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; }
.messenger-button.messenger-contact-card { width: 100%; height: auto; min-height: 50px; justify-content: flex-start; gap: 9px; padding: 8px; text-align: left; }
.messenger-contact-card svg { flex: 0 0 22px; }
.messenger-contact-copy { min-width: 0; }
.messenger-contact-copy strong { display: block; font-size: 0.82rem; font-weight: 600; }
.messenger-contact-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 0.74rem; line-height: 1.4; overflow-wrap: anywhere; }
.profile-notes { margin: 12px 16px; font-size: 0.86rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-related { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 16px; }
@media (max-width: 760px) {
  .profile-info-grid, .profile-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 12px; }
  .client-contact-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .profile-messaging-panel { order: -1; }
}
.progress-entry {
  border-left: 2px solid #dbe7f0;
  margin: 0 0 0 7px;
  padding: 0 0 18px 16px;
  position: relative;
  font-size: 0.8571rem;
}
.progress-entry::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  left: -4px;
  top: 4px;
}
.progress-entry strong {
  font-size: 0.8571rem;
  display: block;
  margin-bottom: 6px;
}
.progress-entry small {
  color: var(--muted);
  font-size: 0.7143rem;
}
.progress-entry p {
  white-space: pre-line;
  color: #607382;
  margin: 8px 0 0;
}
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 17px;
}
.tabs button {
  border: 0;
  border-radius: 0;
  padding: 10px 17px;
  background: transparent;
  font-size: 0.8571rem;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
.tabs button.active {
  border-color: var(--blue);
  color: var(--blue);
}
.quota {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 16px 18px;
  background: linear-gradient(100deg, #eef5fa, #fff);
  border-bottom: 1px solid var(--line);
}
.quota strong {
  font-size: 1.7857rem;
  font-weight: 500;
  color: var(--blue);
}
.quota small {
  font-size: 0.7857rem;
  color: var(--muted);
  display: block;
  line-height: 1.8;
}
.progress-track {
  height: 6px;
  border-radius: 6px;
  background: #e9eff3;
  overflow: hidden;
  margin: 9px 0;
}
.progress-track > i {
  display: block;
  height: 100%;
  background: var(--blue);
  width: var(--progress, 0%);
}
.card-list {
  display: none;
}
.toolbar .spacer {
  flex: 1;
}
.mobile-menu {
  display: none;
}
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: #fff;
}
.login-brand {
  background: #1c6394;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  position: relative;
  overflow: hidden;
}
.login-brand::before {
  content: "";
  position: absolute;
  width: 680px;
  height: 680px;
  border: 1px solid #ffffff12;
  border-radius: 50%;
  left: -270px;
  bottom: -440px;
}
.login-brand img {
  max-width: 470px;
  width: 100%;
}
.login-brand h1 {
  color: #dfc486;
  font-size: 1.7143rem;
  letter-spacing: 2px;
  font-weight: 400;
  margin-top: 36px;
}
.login-brand p {
  color: #c3d7e5;
  font-size: 0.8571rem;
  letter-spacing: 1px;
}
.login-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 35px;
}
.login-inner {
  width: 330px;
}
.login-inner h2 {
  font-size: 1.8571rem;
  font-weight: 500;
  margin: 0 0 10px;
}
.login-inner p {
  color: var(--muted);
  line-height: 1.9;
  font-size: 0.8571rem;
}
.login-inner .primary {
  width: 100%;
  margin: 15px 0 8px;
  padding: 13px;
}
.login-inner .google-g {
  font-family: Arial;
  font-weight: bold;
  font-size: 1.2857rem;
  margin-right: 5px;
}
.login-inner .passkey {
  width: 100%;
  padding: 11px;
}
.login-bottom {
  font-size: 0.7143rem !important;
  color: #9ba7b0 !important;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 30px;
}
.login-demo {
  margin-top: 20px;
  padding: 14px;
  background: #faf5e8;
  border-radius: 6px;
}
.login-demo p {
  font-size: 0.7857rem;
  margin: 0 0 10px;
}
.login-demo button {
  font-size: 0.7857rem;
  padding: 6px 9px;
  margin: 3px;
}
.rule-source {
  font-size: 0.7857rem;
  word-break: break-all;
}
.file-zone {
  border: 1px dashed #b9cbd8;
  border-radius: 7px;
  background: #f8fbfd;
  padding: 23px;
  text-align: center;
}
.file-zone input {
  font-size: 0.8571rem;
}
.file-zone p {
  font-size: 0.8571rem;
  color: var(--muted);
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #17384f;
  color: white;
  padding: 12px 20px;
  border-radius: 7px;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  max-width: 90vw;
  font-size: 0.9286rem;
  white-space: pre-line;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.compact .cases-table td {
  height: 43px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.compact .mark-img,
.compact .mark-fallback {
  width: 27px;
  height: 27px;
}
.logo-preview {
  max-width: 190px;
  max-height: 100px;
  object-fit: contain;
}
.inline-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.overflow {
  overflow: auto;
}
.mail-body {
  min-height: 260px !important;
}
.tag {
  display: inline-block;
  border: 1px solid #dbe4ea;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.7143rem;
  color: #647d8e;
  margin: 2px;
}
.danger-zone {
  border-top: 1px solid #efd8d8;
  margin-top: 24px;
  padding-top: 12px;
}
.counts {
  font-size: 0.7857rem;
  color: var(--muted);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.plain-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.9;
  font-size: 0.8571rem;
}
.external-source {
  font-size: 0.7857rem;
}
.metric-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8571rem;
  padding: 8px 0;
  border-bottom: 1px solid #edf1f4;
}
.preset {
  border: 1px solid var(--line);
  padding: 10px;
  border-radius: 5px;
  font-size: 0.8571rem;
  display: flex;
  justify-content: space-between;
}
.native-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.field input[type="checkbox"] {
  width: auto;
  height: auto;
}
.flex {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.right {
  margin-left: auto;
}
.nowrap {
  white-space: nowrap;
}
.field .error {
  color: var(--red);
}
@media (min-width: 1700px) {
  .main {
    padding-left: 28px;
    padding-right: 28px;
  }
  .table-scroll {
    max-height: calc(100vh - 282px);
  }
}
@media (max-width: 1000px) {
  :root {
    --side: 165px;
  }
  .sidebar {
    padding-left: 9px;
    padding-right: 9px;
  }
  .topbar {
    padding: 0 16px;
  }
  .main {
    padding-left: 15px;
    padding-right: 15px;
  }
  .two-cols {
    grid-template-columns: 1fr;
  }
  .form-grid,
  .detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .span4 {
    grid-column: 1/-1;
  }
  .span3 {
    grid-column: 1/-1;
  }
  .grid-stats {
    gap: 8px;
  }
  .stat {
    padding: 13px;
  }
  .stat strong {
    font-size: 1.7143rem;
  }
  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  :root {
    --side: 0px;
    font-size: 1rem;
  }
  .sidebar {
    width: 210px;
    transform: translateX(-100%);
    transition: transform 0.15s;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 20px 0 80px #102c4b33;
  }
  .topbar {
    left: 0;
    height: 53px;
    padding: 0 12px;
  }
  .mobile-menu {
    display: inline-flex;
    padding: 5px;
    border: 0;
  }
  .top-title > span {
    display: none;
  }
  .top-actions {
    gap: 4px;
  }
  .user-name,
  .role-label {
    display: none;
  }
  .view-switch select {
    max-width: 102px;
    font-size: 0.7857rem;
  }
  .demo-label {
    font-size: 0.6429rem;
  }
  .main {
    margin-left: 0;
    padding: 70px 12px 20px;
  }
  .page-title h1 {
    font-size: 1.5rem;
  }
  .page-title p {
    font-size: 0.7857rem;
  }
  .page-head {
    align-items: flex-start;
    margin-bottom: 14px;
  }
  .head-actions button {
    font-size: 0.7857rem;
    padding: 8px;
  }
  .head-actions button .button-text {
    display: none;
  }
  .head-actions {
    gap: 5px;
  }
  .grid-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat strong {
    font-size: 1.8571rem;
  }
  .stat small {
    font-size: 0.7143rem;
  }
  .stat > .icon {
    width: 23px;
  }
  .toolbar {
    padding: 10px;
    gap: 7px;
  }
  .toolbar .search {
    flex-basis: 100%;
    max-width: none;
    min-width: 0;
  }
  .toolbar select,
  .toolbar input {
    max-width: calc(50% - 6px);
    font-size: 0.7857rem;
  }
  .toolbar .search input {
    max-width: none;
  }
  .toolbar .spacer {
    display: none;
  }
  .sortbar {
    font-size: 0.7143rem;
    padding: 7px 10px;
    gap: 5px;
  }
  .sortchip {
    font-size: 0.7143rem;
  }
  .cases-panel .table-scroll {
    display: none;
  }
  .card-list {
    display: block;
    padding: 4px 10px 10px;
    background: #fafcfd;
  }
  .case-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 7px;
    margin-top: 8px;
    padding: 12px;
    cursor: pointer;
  }
  .case-card-top {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .case-card h3 {
    margin: 0 0 5px;
    font-size: 0.9286rem;
    font-weight: 600;
  }
  .case-card-code {
    font-size: 0.7857rem;
    color: var(--blue);
  }
  .case-card-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 10px;
    font-size: 0.7857rem;
    margin-top: 12px;
  }
  .case-card-fields label {
    display: block;
    color: var(--muted);
    font-size: 0.7143rem;
    margin-bottom: 3px;
  }
  .case-card-progress {
    font-size: 0.7857rem;
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid #edf1f4;
    line-height: 1.7;
  }
  .pager {
    font-size: 0.7143rem;
    flex-wrap: wrap;
    padding: 9px 11px;
  }
  .pager-right {
    gap: 5px;
  }
  .panel-pad {
    padding: 14px;
  }
  .form-grid,
  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
  }
  .span2 {
    grid-column: span 2;
  }
  .span3,
  .span4 {
    grid-column: 1/-1;
  }
  .field input,
  .field select {
    height: 39px;
    font-size: 0.9286rem;
  }
  .field textarea {
    font-size: 0.9286rem;
  }
  .checks {
    grid-template-columns: 1fr 1fr;
  }
  .checkrow {
    min-height: 33px;
  }
  .modal-backdrop {
    padding: 0;
    align-items: stretch;
  }
  .modal,
  .modal.narrow {
    width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
  .modal-head {
    padding: 13px 14px;
  }
  .modal-head h2 {
    font-size: 1.1429rem;
  }
  .modal-body {
    padding: 15px 14px;
  }
  .modal-foot {
    padding: 11px 14px;
    padding-bottom: max(11px, env(safe-area-inset-bottom));
    margin-top: auto;
  }
  .modal-foot button {
    min-height: 40px;
  }
  .client-table {
    font-size: 0.7857rem;
  }
  .client-table td,
  .client-table th {
    padding: 10px;
  }
  .login {
    grid-template-columns: 1fr;
  }
  .login-brand {
    padding: 32px 25px 26px;
    min-height: 180px;
  }
  .login-brand img {
    width: 255px;
  }
  .login-brand h1 {
    font-size: 1.2857rem;
    margin: 20px 0 0;
  }
  .login-brand p {
    display: none;
  }
  .login-box {
    padding: 30px 25px;
    align-items: flex-start;
  }
  .login-inner {
    width: min(100%, 380px);
  }
  .login-inner h2 {
    font-size: 1.7143rem;
  }
  .login-bottom {
    margin-top: 22px;
  }
  .quota {
    gap: 12px;
    padding: 13px;
  }
  .quota strong {
    font-size: 1.6429rem;
  }
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .tabs {
    overflow: auto;
    white-space: nowrap;
  }
  .tabs button {
    padding: 9px 12px;
  }
  .table-scroll:not(.cases-panel .table-scroll) {
    max-height: 60vh;
  }
  .view-banner {
    font-size: 0.7857rem;
    gap: 8px;
  }
  .form-section {
    margin-top: 15px;
  }
  .detail-grid .value {
    font-size: 0.8571rem;
  }
  .profile-name {
    min-width: 130px;
  }
  .field .hint {
    font-size: 0.7143rem;
  }
  .backup-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
@media print {
  .sidebar,
  .topbar,
  .toolbar,
  .sortbar,
  .head-actions,
  .pager,
  .card-list {
    display: none !important;
  }
  .main {
    margin: 0;
    padding: 0;
  }
  .cases-panel .table-scroll {
    display: block;
    max-height: none;
    overflow: visible;
  }
  .cases-table {
    font-size: 0.5714rem;
  }
  .cases-table td,
  .cases-table th {
    position: static !important;
    padding: 4px;
    white-space: normal;
  }
  .panel {
    border: 0;
    box-shadow: none;
  }
  body {
    background: white;
  }
  @page {
    size: A4 landscape;
    margin: 15mm;
  }
}

.mobile-sort {
  display: none;
}
@media (max-width: 760px) {
  .mobile-sort {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--line);
  }
  .mobile-sort select {
    flex: 1;
    min-width: 0;
  }
  .mobile-sort button {
    white-space: nowrap;
  }
}

/* User size preference affects all pages and dialogs; new installations start medium. */
:root[data-ui-size="small"] {
  font-size: 14px;
}
:root[data-ui-size="medium"] {
  font-size: 16px;
}
:root[data-ui-size="large"] {
  font-size: 18px;
}
.size-control {
  position: relative;
  flex: none;
  color: var(--ink);
  font-size: 0.85rem;
}
.size-control summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
}
.size-control summary::-webkit-details-marker {
  display: none;
}
.size-icon {
  width: 28px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.size-options {
  position: absolute;
  right: 0;
  top: 100%;
  display: flex;
  gap: 5px;
  padding: 9px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  z-index: 80;
  box-shadow: 0 6px 22px #14374f22;
}
.size-options [aria-pressed="true"] {
  background: var(--blue);
  color: white;
}
#app > .size-control {
  position: fixed;
  right: 20px;
  top: 16px;
  z-index: 40;
  background: white;
  border-radius: 8px;
}
.brand img {
  width: 118px;
  max-width: 100%;
  margin: 0 auto;
}
.login-brand img {
  width: 220px;
  max-width: 65vw;
}
.boot img {
  width: 170px;
}
.engagement {
  width: 16px;
  height: 16px;
}
.engagement .icon {
  width: 11px;
  height: 11px;
}
.cases-table th.engagement-column,
.cases-table td.engagement-column {
  width: 46px;
  min-width: 46px;
  padding-left: 5px;
  padding-right: 5px;
  white-space: nowrap;
}
.cases-table th.ordinal-column,
.cases-table td.ordinal-column {
  min-width: 44px;
  width: 44px;
}
.cases-table th.is-frozen,
.cases-table td.is-frozen {
  position: sticky;
  z-index: 3;
  box-shadow: 2px 0 3px #14374f08;
}
.cases-table th.is-frozen {
  z-index: 8;
}
.freeze-control {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.freeze-control select {
  padding: 3px 5px;
}
.case-number-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  white-space: nowrap;
}
.case-number-stack > .status, .case-card-identity > .status {
  font-family: Arial, "Noto Sans TC", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.25;
  padding: 3px 8px;
  color: white;
  border: 0;
  border-radius: 20px;
}
.status.status-application {
  background: #9585da;
  color: white;
}
.status.status-registered {
  background: #77bda9;
  color: white;
}
.status.status-invalid {
  background: #e8ac4c;
  color: white;
}
.status.status-refused {
  background: #d89c9f;
  color: white;
}
.status.status-other {
  background: #81929e;
  color: white;
}
.application-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.progress-file-button {
  padding: 2px 3px;
  border: 0;
  color: var(--blue);
  vertical-align: middle;
  display: inline-flex;
  margin-right: 4px;
}
.progress-file-button .icon {
  width: 17px;
  height: 17px;
}
.document-preview-image {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  margin: auto;
  object-fit: contain;
}
.document-preview-frame {
  display: block;
  width: 100%;
  height: 70vh;
  border: 1px solid var(--line);
}
.category-tabs {
  margin: 0 0 15px;
}
.category-tabs small {
  font-size: 0.65rem;
  color: var(--muted);
}
.partner-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 9px;
  max-width: 850px;
}
.partner-type-grid .type-item {
  display: flex;
  gap: 4px;
}
.partner-type-grid input {
  min-width: 0;
  width: 100%;
}
.applicant-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 15px 0;
  padding: 0 16px 16px;
}
.applicant-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  color: var(--blue);
  font-weight: 600;
}
.applicant-fields[hidden] {
  display: none;
}
.applicant-name-field {
  position: relative;
}
.applicant-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px #14374f22;
  z-index: 35;
  max-height: 210px;
  overflow: auto;
}
.applicant-suggestions button {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  text-align: left;
  justify-content: flex-start;
}
.email-row {
  display: grid;
  grid-template-columns: minmax(150px, 2fr) minmax(95px, 1fr) auto;
  gap: 7px;
  margin: 8px 0;
  align-items: end;
}
.email-list {
  grid-column: 1/-1;
}
.email-add {
  display: flex;
  justify-content: flex-end;
}
.contact-phone-grid { display: grid; grid-column: 1/-1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; align-items: start; }
.landline-inputs { display: flex; gap: 6px; min-width: 0; }
.landline-inputs > input:first-child { flex: 1 1 0; min-width: 0; }
.landline-inputs > .phone-extension { flex: 0 0 auto; width: calc(5ch + 14px); padding-left: 6px; padding-right: 6px; }
.case-card-client { margin-top: 9px; color: var(--ink); font-size: 0.85rem; }
.field > label.same-landline { display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; font-size: 0.7143rem; color: var(--muted); cursor: pointer; }
.same-landline input[type="checkbox"] { width: 12px; height: 12px; min-height: 0; margin: 0; padding: 0; accent-color: var(--blue); }
.field input[readonly] { background: #f2f5f8; }
.login-email-row { display: flex; align-items: center; gap: 7px; }
.login-email-row input { min-width: 0; flex: 1; }
.login-email-add { display: flex; justify-content: flex-end; }
.messenger-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; }
.messenger-button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 29px; height: 29px; min-height: 0; margin: 0; padding: 3px; border: 1px solid #dce7e1; border-radius: 6px; background: #fff; text-decoration: none; }
.messenger-button:hover { background: #eef6f1; border-color: currentColor; }
.messenger-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.messenger-button svg, .messenger-brand svg { display: block; width: 22px; height: 22px; }
.messenger-line { color: #06a745; }
.messenger-wechat { color: #168d36; }
.messenger-whatsapp { color: #168c55; }
.messenger-custom { color: var(--blue); }
.messenger-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px 12px; margin-top: 15px; }
.messenger-section-head .form-section { margin: 0; padding: 0; }
.messenger-section-head small { color: var(--muted); font-size: 0.72rem; font-weight: normal; }
.messenger-row { margin-top: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; }
.messenger-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 10px; }
.messenger-row-head select { width: 125px; }
.messenger-row-head .checkrow { min-height: 0; font-size: 0.78rem; }
.messenger-row-head .checkrow input { width: 13px; height: 13px; min-height: 0; margin: 0; }
.messenger-row .messenger-hint { margin: 0; font-size: 0.74rem; line-height: 1.65; color: var(--muted); }
@media (max-width: 600px) {
  .contact-phone-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
}
@media (max-width: 760px) {
  .brand img {
    width: 105px;
  }
  .login-brand img {
    width: 165px;
  }
  .email-row {
    grid-template-columns: minmax(125px, 2fr) minmax(80px, 1fr) auto;
  }
  .freeze-control {
    display: none;
  }
  .top-actions {
    gap: 5px;
  }
  .top-actions .user-name {
    max-width: 80px;
  }
  .size-icon {
    width: 24px;
  }
  .applicant-block {
    padding: 0 10px 10px;
  }
}

[hidden] {
  display: none !important;
}
.mail-preview-text {
  white-space: pre-wrap;
  font: inherit;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.word-preview {
  padding: 20px;
  line-height: 1.9;
  background: #fff;
}
.document-date {
  font-size: 0.9rem;
  color: var(--blue);
  margin: 20px 0 5px;
}

.case-detail-heading { flex-wrap: wrap; }
.case-detail-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
.case-invalid-reason { white-space: nowrap; }

.modal-backdrop.case-detail-backdrop { padding: 12px; }
.modal.case-detail-modal { width: min(1240px, calc(100vw - 24px)); height: auto; max-height: calc(100dvh - var(--trial-height, 0px) - 24px); }
.case-detail-modal .modal-head { padding: 11px 16px; flex-shrink: 0; }
.case-detail-modal .modal-body { padding: 12px 16px; min-height: 0; overflow-y: auto; }
.case-detail-modal .modal-foot { padding: 8px 16px; flex-shrink: 0; }
.case-detail-modal .case-detail-heading { gap: 7px 10px; margin-bottom: 12px; }
.case-detail-nav { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #fff; z-index: 2; }
.case-detail-nav .tabs { display: flex; flex: 1; min-width: 0; margin: 0; gap: 2px; border: 0; overflow: hidden; white-space: nowrap; }
.case-detail-nav .tabs button { padding: 10px 9px; flex: 0 0 auto; white-space: nowrap; font-size: 0.8rem; }
.case-detail-nav .case-detail-edit { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.case-detail-modal .detail-grid { grid-template-columns: 1fr; gap: 7px; }
.case-info-row { display: grid; grid-template-columns: repeat(var(--case-info-columns, 2), minmax(0, 1fr)); gap: 7px 14px; min-width: 0; }
.case-info-row > div { min-width: 0; }
.case-info-row .value { white-space: pre-line; }
.case-detail-modal .detail-grid .label { font-size: 0.7rem; line-height: 1.4; }
.case-detail-modal .detail-grid .value { font-size: 0.86rem; line-height: 1.35; }
.case-detail-modal .case-latest-progress { margin: 10px 0 0; }
.case-latest-progress .form-section { margin-top: 0; padding-top: 0; }
.case-latest-progress p { margin: 5px 0 8px; line-height: 1.5; }
.case-timeline { margin-top: 10px; padding: 9px 10px 6px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.case-timeline-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-size: 0.78rem; }
.timeline-phase { border-radius: 4px; padding: 2px 7px; background: #e8edf1; color: #526779; font-size: 0.7rem; white-space: nowrap; }
.timeline-phase.tone-application { background: #f0ecfa; color: #6c56a2; }
.timeline-phase.tone-registered { background: #e7f3ed; color: #397762; }
.timeline-phase.tone-renewal, .timeline-phase.tone-grace { background: #fff1d9; color: #9c6115; }
.timeline-phase.tone-overdue, .timeline-phase.tone-invalid, .timeline-phase.tone-refused { background: #f9e9e8; color: #ac403c; }
.timeline-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.timeline-track { position: relative; display: grid; grid-template-columns: repeat(var(--timeline-slots), minmax(100px, 1fr)); min-width: calc(var(--timeline-slots) * 100px); width: 100%; padding: 0 0 4px; margin: 0; list-style: none; }
.timeline-track::before { content: ""; position: absolute; height: 2px; top: 58px; left: calc(50% / var(--timeline-slots)); width: calc(100% * (var(--event-count) - 1) / var(--timeline-slots)); background: linear-gradient(to right, #6c91b2 var(--today-progress), #dce3e9 var(--today-progress)); }
.timeline-point { position: relative; display: grid; grid-template-rows: 49px 20px; align-items: center; justify-items: center; padding: 0 4px; --point-color: #336699; }
.timeline-point-copy { align-self: end; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: max-content; max-width: 100%; min-height: 43px; padding: 3px 6px; border-radius: 5px; }
.timeline-event-label { font-size: 0.72rem; font-weight: 600; line-height: 1.25; color: #526779; text-align: center; }
.timeline-event-date { font-size: 0.68rem; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.timeline-dot { position: relative; z-index: 1; width: 10px; height: 10px; border: 2px solid var(--point-color); border-radius: 50%; background: var(--point-color); }
.timeline-point.is-elapsed .timeline-dot { background: var(--point-color); }
.timeline-point.is-current.tone-application { --point-color: #9585da; }
.timeline-point.is-current.tone-registered { --point-color: #77bda9; }
.timeline-point.is-current.tone-renewal, .timeline-point.is-current.tone-expiry, .timeline-point.is-current.tone-grace, .timeline-point.is-current.tone-declaration { --point-color: #d79b43; }
.timeline-point.is-current.tone-reply { --point-color: #7981b9; }
.timeline-point.is-today { --point-color: #336699; }
.timeline-point.is-today .timeline-point-copy { background: #e8f0f8; outline: 1px solid #89a8c5; }
.timeline-point.is-today .timeline-event-label, .timeline-point.is-today .timeline-event-date { color: #24577f; }
.timeline-point.is-today .timeline-dot { width: 12px; height: 12px; background: #336699; }
@media (max-width: 760px) {
  .modal-backdrop.case-detail-backdrop { padding: 0; }
  .modal.case-detail-modal { width: 100vw; height: calc(100dvh - var(--trial-height, 0px)); max-height: calc(100dvh - var(--trial-height, 0px)); border-radius: 0; }
  .case-detail-modal .modal-body { padding: 10px 13px; }
  .case-detail-nav { padding: 0 8px; gap: 5px; }
  .case-detail-nav .tabs { gap: 0; }
  .case-detail-nav .tabs button { padding: 10px 5px; font-size: clamp(10.5px, 3vw, 12px); }
  .case-detail-nav .case-detail-edit { padding: 5px 7px; font-size: clamp(10.5px, 3vw, 12px); }
  .case-detail-modal .detail-grid { grid-template-columns: 1fr; gap: 9px; }
  .case-info-row { column-gap: 12px; }
  .case-timeline { margin-top: 10px; padding: 6px 8px 2px; min-width: 0; }
  .case-timeline-heading { margin-bottom: 0; }
  .timeline-scroll { overflow: visible; min-width: 0; }
  .timeline-track { min-width: 0; width: 100%; height: 120px; padding: 0; grid-template-columns: repeat(var(--timeline-slots), minmax(0, 1fr)); }
  .timeline-track::before { top: 50%; }
  .timeline-point { display: block; height: 100%; min-width: 0; padding: 0; }
  .timeline-point-copy { position: absolute; left: 50%; transform: translateX(-50%); min-height: 0; width: max-content; max-width: calc(200% - 2px); padding: 2px; gap: 3px; }
  .timeline-point:nth-child(odd) .timeline-point-copy { bottom: calc(50% + 9px); }
  .timeline-point:nth-child(even) .timeline-point-copy { top: calc(50% + 9px); }
  .timeline-point:first-child .timeline-point-copy { left: 0; transform: none; }
  .timeline-point:last-child .timeline-point-copy { left: auto; right: 0; transform: none; }
  .timeline-dot { position: absolute; top: calc(50% - 4px); left: 50%; transform: translateX(-50%); width: 10px; height: 10px; }
  .timeline-point.is-today .timeline-dot { top: calc(50% - 5px); }
  .timeline-event-label { max-width: 100%; font-size: clamp(10px, 2.8vw, 12px); line-height: 1.35; text-wrap: balance; }
  .timeline-event-date, .timeline-event-date > .date { display: inline; white-space: nowrap; font-size: clamp(8.5px, 2.35vw, 10.5px); line-height: 1.2; }
  .timeline-date-year, .timeline-date-rest { font-size: inherit; }
  .timeline-date-separator { display: inline; }
}

/* Shared sidebar, branding and toolbar styles are included in every trial. */
.sidebar { padding-top: 0; padding-bottom: 0; }
.brand { margin: 0; padding: 17px 13px 10px; min-width: 0; max-width: 100%; flex-shrink: 0; background: transparent; border: 0; box-shadow: none; }
.powsip-lockup { display: block; position: relative; overflow: hidden; }
.powsip-compact { aspect-ratio: 1508 / 380; }
.brand .powsip-lockup { width: 100%; aspect-ratio: 1615 / 490; }
.brand .powsip-lockup > img,
.login-brand .powsip-lockup > img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0; }
.sidebar .nav { min-height: 0; overflow-y: auto; flex-shrink: 1; padding-top: 14px; padding-bottom: 10px; }
.side-foot { position: static; flex-shrink: 0; align-self: stretch; padding: 12px 0 10px; line-height: 1.4; }
.legacy-signature { display: grid; width: 100%; max-width: 100%; grid-template-columns: max-content minmax(0, 1fr); column-gap: 8px; }
.copyright { display: block; width: max-content; max-width: 100%; margin: 0; font: 10px/1.4 Arial, sans-serif; white-space: nowrap; color: #becfd9; }
.legacy-logo-wrap { position: relative; width: 100%; aspect-ratio: 1533 / 531; margin-top: 6px; }
.legacy-logo { position: absolute; inset: 0; display: block; width: 100%; max-width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.legacy-logo-line { display: contents; }
.legacy-logo-line .legacy-logo-wrap { grid-column: 1; width: 100%; min-width: 0; }
.login-brand { background: #14374f; }
.login-logo-desktop { width: min(360px, 90%); aspect-ratio: 1774 / 887; }
.login-brand .login-logo-desktop img { display: block; width: 100%; max-width: 100%; height: auto; }
.login-brand .login-logo-mobile { display: none; }
.login { min-height: calc(100dvh - var(--trial-height, 0px)); }
.login-logo { width: min(360px, 90%); }
.login-logo picture { display: block; }
.login-brand .login-logo img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0; }
.case-status::before, .rule-confirmed::before { content: none; display: none; }
.case-status-checks { display: flex; flex-wrap: wrap; gap: 6px 11px; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.case-status-checks label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--ink); font-size: 0.8rem; cursor: pointer; }
.case-status-checks input { width: 13px; height: 13px; min-height: 0; margin: 0; padding: 0; accent-color: var(--blue); }
.case-status-checks input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.automation-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.automation-actions { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 8px; }
.automation-actions > button.small { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 34px; min-height: 34px; margin: 0; padding: 0 12px; line-height: 1.2; flex-shrink: 0; }
.sr-only { 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: 760px) {
  .login-brand { min-height: 115px; padding: 28px 25px 18px; background: #fff; }
  .login-brand .login-logo-desktop { display: none; }
  .login-brand .login-logo-mobile { display: block; width: min(240px, 78vw); }
  .login-logo { width: min(240px, 78vw); }
  .login-brand .login-logo img { mask-image: none; }
  .case-status-checks { flex-basis: 100%; gap: 8px 12px; }
  .automation-actions { width: 100%; }
  .automation-actions > button.small { font-size: 0.8rem; }
}

/* Compact records and account navigation share the production layout. */
html { touch-action: pan-x pan-y; }
body { overflow-x: hidden; }
.page-head, .head-actions { min-width: 0; }
.page-title { min-width: 0; }
.head-actions { flex-wrap: wrap; flex: 0 0 auto; }
.head-actions button { white-space: nowrap; }
.account-selector { width: 90px; min-width: 0; font-size: 0.78rem; }
.client-name-label { display: inline-flex; align-items: center; gap: 5px; }
.inline-mini-tag { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid #b9ccd9; border-radius: 3px; padding: 0 3px; margin-right: 3px; font-size: calc(1em - 3px); line-height: 1; vertical-align: middle; color: #526e82; background: #f5f9fc; white-space: nowrap; }
.profile-applicant { border: 1px solid var(--line); border-radius: 7px; padding: 0; overflow: hidden; }
.profile-applicant:last-child { border: 1px solid var(--line); padding: 0; }
.profile-applicant > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; color: var(--blue); font-weight: 600; font-size: 0.88rem; background: #f7fafc; cursor: pointer; list-style: none; }
.profile-applicant > summary::-webkit-details-marker { display: none; }
.collapse-chevron { flex: 0 0 auto; transition: transform 0.15s; }
.profile-applicant[open] > summary .collapse-chevron { transform: rotate(180deg); }
.profile-applicant-content { padding: 12px; }
.profile-applicant-content .form-section { margin-top: 14px; }
.profile-applicant-content .profile-messaging-content { padding: 0; }
.profile-applicant-content .profile-messenger-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.settings-tabs { overflow-x: auto; white-space: nowrap; }
.settings-tabs button, .cooperation-tabs button { flex: 0 0 auto; white-space: nowrap; }
.settings-backup-tools { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.partner-table { min-width: 760px; }
.partner-table tbody tr { cursor: pointer; }
.partner-table th, .partner-table td:nth-child(3) { white-space: nowrap; }
[data-contact-referrer] { margin-top: 5px; font-size: 0.7rem; padding: 3px; min-height: 26px; }
@media (max-width: 760px) {
  .client-profile-page .page-head { flex-wrap: wrap; gap: 10px; }
  .client-profile-page .page-title { width: 100%; }
  .client-profile-page .page-title p { white-space: nowrap; font-size: clamp(10px, 3vw, 12px); }
  .client-profile-page .profile-class-extra { display: none; }
  .profile-contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 7px; }
  .profile-contact-grid dt { font-size: clamp(10px, 2.8vw, 12px); }
  .profile-contact-grid dd { font-size: clamp(11px, 3vw, 14px); min-height: 1.5em; }
  .profile-info-grid dd { min-height: 1.5em; }
  .profile-applicant { margin: 10px; }
  .profile-applicant-content { padding: 10px; }
  .profile-applicant-content .profile-messenger-grid { grid-template-columns: minmax(0, 1fr); }
  .account-selector { width: 65px; min-height: 32px; padding: 3px; }
  .top-actions .avatar { display: none; }
  .top-actions .view-switch select { max-width: 87px; }
  .contact-phone-grid input { width: 100%; min-width: 0; }
  .contact-phone-grid .field > label { font-size: clamp(10px, 2.9vw, 12px); }
  .field input, .field select, .field textarea, .email-row input { font-size: 16px; }
}

.english-toggle { min-height: 0; padding: 1px 5px; margin-left: 7px; font-size: 0.72rem; color: var(--blue); border: 0; background: transparent; }
.english-field { margin-top: 7px; }
.english-field-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.english-field-header > label { display: block; font-size: 0.75rem; color: var(--muted); }
.english-remove { min-height: 0; padding: 1px 5px; font-size: 0.72rem; color: var(--red); border: 0; background: transparent; white-space: nowrap; }
.english-value { display: block; margin-top: 3px; font-size: 0.9em; font-weight: 400; color: var(--muted); line-height: 1.4; }
.profile-applicant > summary .english-value { color: #587488; }
.party-inputs { margin-bottom: 12px; }
.partnership-fields { padding: 8px 0; }
.partner-person-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto; gap: 8px; align-items: end; padding: 9px 0; }
.partner-person-view + .partner-person-view { display: block; margin-top: 6px; }
.contact-phone-grid > .phone-main-field, .profile-contact-grid > .phone-main-field { grid-column: span 2; }
.contact-phone-grid > .owner-mobile-field, .profile-contact-grid > .owner-mobile-field { grid-column: 1/-1; }
.partner-name-occupation { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
.partner-phone-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.client-stage-tabs { overflow-x: auto; white-space: nowrap; }
.client-stage-tabs button { white-space: nowrap; }
@media(max-width:760px) {
  .cases-panel > .toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto; gap: 5px; align-items: center; }
  .cases-panel > .toolbar > .search { grid-column: 1/-1; width: 100%; }
  .cases-panel > .toolbar > .spacer { display: none; }
  .cases-panel > .toolbar > select { min-width: 0; width: 100%; max-width: none; padding: 4px; min-height: 31px; font-size: 11px; }
  .cases-panel > .toolbar > button { min-height: 31px; padding: 4px 6px; gap: 3px; font-size: 11px; white-space: nowrap; }
  .cases-panel > .toolbar #access-filter { grid-column: 1/-1; }
  .mobile-sort { padding-top: 5px; padding-bottom: 5px; gap: 5px; }
  .mobile-sort select, .mobile-sort button { min-height: 28px; padding: 3px 7px; font-size: 12px; }
  .partner-name-occupation, .partner-phone-row { gap: 8px; }
  .partner-person-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .login-box, .login-inner, .login-bottom { text-align: center; }
  .login-demo { align-items: stretch; }
  .login-bottom { font-size: clamp(8px, 2.3vw, 11px); }
  .login-bottom > span { display: block; white-space: nowrap; }
}

.login-inner .first-login-button { margin: 13px auto; min-width: 160px; }
.enrollment-form { display: grid; gap: 12px; margin: 20px 0; }
.verified-account { overflow-wrap: anywhere; color: var(--muted); }
.login-inner .field label { justify-content: center; text-align: center; }
.self-login-fields .login-self-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.self-login-fields input { flex: 1; min-width: 0; }
.self-login-fields input:disabled { color: var(--muted); background: #f4f6f8; }
.self-login-fields .tag { white-space: nowrap; }
#client-advice-form textarea, #advice-form textarea { min-height: 260px; }
@media(max-width:760px) {
  .cases-panel > .toolbar #country-filter { grid-row: 2; grid-column: 1; }
  .cases-panel > .toolbar #profile-filter { grid-row: 2; grid-column: 2; }
  .cases-panel > .toolbar [data-action="reset-sort"] { grid-row: 2; grid-column: 3; }
  .cases-panel > .toolbar [data-action="export-visible"] { grid-row: 2; grid-column: 4; }
  .cases-panel > .toolbar #access-filter { grid-row: 3; }
}

.client-profile-page .head-actions { flex: 1; justify-content: flex-end; }
.client-profile-page .client-files-action { margin-left: auto; }
.profile-files-table td:last-child { white-space: nowrap; }

.intake-page { width: min(900px, 100%); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; margin: 0 auto; padding: 24px 16px 36px; }
.intake-brand { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 4px 20px; }
.intake-brand img { width: 210px; max-width: 52%; height: auto; }
.intake-footer { margin-top: auto; padding-top: 24px; font-size: 11px; line-height: 1.6; color: var(--muted); text-align: center; }
.copyright > span, .login-bottom > span, .intake-footer > span { display: block; }
.intake-card { padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.intake-card h1 { font-size: 1.35rem; margin: 0 0 20px; }
.intake-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.intake-languages { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.intake-languages button { min-height: 58px; border-color: #c9d8e3; font-size: 17px; color: var(--blue); }
.intake-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 20px; margin-top: 20px; }
.intake-wide { grid-column: 1/-1; }
.intake-field { min-width: 0; }
.intake-field label { display: block; margin: 0 0 7px; font-size: 14px; font-weight: 600; }
.intake-page .required { color: #c33; margin-left: 3px; }
.intake-field input, .intake-field select { width: 100%; max-width: 100%; min-height: 43px; font-size: 16px; padding: 8px 10px; }
.intake-field small { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; line-height: 1.5; }
.intake-bilingual { position: relative; min-width: 0; }
.intake-bilingual > .english-toggle { position: absolute; top: 0; right: 0; }
.intake-english { position: relative; margin-top: 12px; }
.intake-english .english-remove { position: absolute; right: 0; top: 0; }
.intake-notice { background: #f4f7f9; border-radius: 8px; padding: 14px; font-size: 13px; line-height: 1.65; white-space: pre-line; }
.intake-page .checkrow { align-items: center; gap: 8px; min-height: 24px; margin: 6px 0 0; padding: 0; font-size: 14px; line-height: 1.5; white-space: normal; cursor: pointer; }
.intake-page .checkrow input { flex: 0 0 17px; width: 17px; height: 17px; min-height: 0; margin: 0; padding: 0; cursor: pointer; }
.intake-page .checkrow span { min-width: 0; }
.intake-contact-email { min-width: 0; }
.intake-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.intake-error { color: var(--red); margin: 0; }
.intake-selected-files { font-size: 12px; color: var(--blue); margin-top: 7px; overflow-wrap: anywhere; }
.intake-inbox { margin-bottom: 14px; }
@media(max-width:600px) { .intake-page { padding: 16px 10px 28px; } .intake-card { padding: 18px 14px; } .intake-fields { grid-template-columns: 1fr; gap: 16px; } .intake-brand { padding-bottom: 15px; gap: 8px; } .intake-footer { font-size: 10px; } }

.intake-language-page { max-width: 760px; padding-top: 34px; }
.intake-language-page .intake-brand { flex-direction: column; justify-content: center; gap: 8px; }
.intake-language-page .intake-brand img { width: 190px; max-width: 60%; }
.intake-form-title { text-align: center; font-size: 1.55rem; color: var(--ink); margin: 40px 0 26px; }
.intake-language-card { width: min(88%, 400px); max-width: 400px; margin: 0 auto; padding: 16px; }
.intake-language-card h2 { font-size: 0.85rem; color: var(--muted); font-weight: 500; margin: 0 0 12px; }
.intake-language-card .intake-heading { align-items: center; }
.intake-language-card .intake-languages { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.intake-language-card .intake-languages button { min-height: 43px; padding: 6px; font-size: 14px; justify-content: center; }
.goods-editor { margin: 0 0 16px; }
.goods-row { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 8px; }
.goods-input { display: flex; flex: 1 1 0; min-width: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: white; }
.goods-input:focus-within { border-color: var(--blue); box-shadow: 0 0 0 2px #27689918; }
.goods-input select { flex: 0 0 auto; width: 76px; min-width: 0; border: 0; border-right: 1px solid var(--line); border-radius: 0; min-height: 36px; height: 36px; padding: 6px 7px; }
.goods-input textarea { flex: 1 1 0; min-width: 0; width: 0; min-height: 36px; max-height: none; border: 0; border-radius: 0; padding: 7px 9px; line-height: 1.5; resize: none; overflow-y: hidden; box-sizing: border-box; field-sizing: content; }
.goods-input select:focus,.goods-input textarea:focus { box-shadow: none; outline: none; }
.goods-row > button { flex: 0 0 30px; width: 30px; min-height: 36px; padding: 5px; }
.goods-actions { display: flex; justify-content: flex-end; }
.legacy-goods { margin-top: 10px; }
.legacy-goods textarea { min-height: 36px; overflow-y: hidden; }
.goods-display-row { white-space: pre-wrap; overflow-wrap: anywhere; }
.goods-display-row + .goods-display-row { margin-top: 5px; }
.case-card-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; }
.case-card-identity .case-card-code { white-space: nowrap; }
.case-card-client .client-name-label { gap: 3px; }
.case-card-client .nationality-tag { margin-right: 0; }
.intake-entity-kind { margin-top: 16px; }
.intake-input-notice { color: var(--blue); background: #f1f6fa; padding: 9px 11px; border-radius: 7px; font-size: 13px; line-height: 1.5; margin-bottom: 0; }
.client-table td.mono, .client-table .inline-actions button { white-space: nowrap; }
@media(max-width:760px) {
 .page-head { flex-direction: column; align-items: stretch; gap: 12px; }
 .page-title { width: 100%; flex: none; }
 .head-actions { width: 100%; flex-wrap: wrap; }
 .client-management-page > .page-head .head-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
 .client-management-page > .page-head .head-actions > * { width: 100%; min-width: 0; min-height: 36px; justify-content: center; white-space: nowrap; padding: 7px; font-size: 12px; text-decoration: none; border: 1px solid var(--line); border-radius: 7px; }
 .client-management-page > .page-head .head-actions > :last-child { grid-column: 1/-1; }
 .client-management-page > .page-head .page-title h1 { white-space: nowrap; }
 .intake-language-page { padding-top: 28px; }
 .intake-language-card .intake-languages { gap: 6px; }
 .intake-language-card .intake-languages button { font-size: 12px; min-height: 42px; padding: 5px 2px; }
}

.top-actions .size-control, .top-actions .language-control { position: relative; flex: 0 0 36px; width: 36px; height: 36px; }
.top-actions .size-control > summary, .top-actions .language-control > summary { display: flex; align-items: center; justify-content: center; list-style: none; width: 36px; height: 36px; padding: 0; border: 1px solid #c9d5df; border-radius: 7px; background: #fff; cursor: pointer; }
.language-control summary::-webkit-details-marker { display: none; }
.language-control summary .icon { width: 23px; height: 23px; }
.language-options { position: absolute; right: 0; top: calc(100% + 5px); display: grid; gap: 4px; min-width: 158px; max-height: 70vh; overflow: auto; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 6px 22px #14374f22; z-index: 90; }
.language-options button { justify-content: start; white-space: nowrap; }
.language-options button[aria-pressed="true"] { background: var(--blue); color: #fff; }
@media(max-width:760px) { .top-actions { gap: 6px; } .view-switch { min-width: 0; } .view-switch select { max-width: 160px; } }

.first-login-tools, .enrollment-heading { display: flex; align-items: center; gap: 8px; width: 100%; }
.first-login-tools { margin: 13px auto; }
.login-inner .first-login-tools .first-login-button { flex: 1; width: auto; min-width: 0; margin: 0; white-space: normal; line-height: 1.45; }
.enrollment-heading h2 { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.first-login-tools .language-control, .enrollment-heading .language-control { position: relative; flex: 0 0 36px; width: 36px; height: 36px; }
.first-login-tools .language-control > summary, .enrollment-heading .language-control > summary { display: flex; align-items: center; justify-content: center; list-style: none; width: 36px; height: 36px; padding: 0; border: 1px solid #c9d5df; border-radius: 7px; background: #fff; cursor: pointer; }

.contact-widget { position: fixed; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 38; width: 44px; font: 14px/1.5 Arial, system-ui, sans-serif; color: var(--ink); }
.contact-widget[hidden] { display: none !important; }
.contact-widget button { font: inherit; }
.contact-widget .contact-icon { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.contact-launcher-wrap { position: relative; }
.contact-widget .contact-launcher { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid #fff; border-radius: 50%; background: var(--blue); color: #fff; box-shadow: 0 3px 14px #14374f33; }
.contact-widget .contact-dismiss { position: absolute; top: -7px; right: -5px; display: flex; align-items: center; justify-content: center; width: 19px; height: 19px; min-height: 19px; padding: 0; border: 1px solid #c9d5df; border-radius: 50%; background: #fff; color: #586c7b; }
.contact-widget .contact-dismiss .contact-icon { width: 12px; height: 12px; }
.contact-widget.is-tucked { right: 0; width: 22px; }
.contact-widget .contact-peek { display: flex; justify-content: flex-end; width: 22px; height: 44px; min-height: 44px; border: 0; background: transparent; padding: 0; }
.contact-peek > span { display: flex; align-items: center; justify-content: center; width: 12px; height: 40px; background: var(--blue); color: #fff; border-radius: 9px 0 0 9px; box-shadow: 0 2px 8px #14374f22; }
.contact-widget .contact-peek .contact-icon { width: 12px; height: 16px; }
.contact-panel { position: absolute; right: 0; bottom: 56px; width: min(330px, calc(100vw - 28px)); max-height: calc(100dvh - 100px - env(safe-area-inset-bottom)); display: flex; flex-direction: column; border: 1px solid #cfdae3; border-radius: 13px; background: #fff; box-shadow: 0 5px 28px #14374f30; overflow: hidden; }
.contact-panel > header { display: flex; flex-shrink: 0; align-items: center; gap: 6px; padding: 10px 12px; background: #f5f8fa; border-bottom: 1px solid var(--line); }
.contact-panel h2 { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.4; }
.contact-widget .contact-close, .contact-widget .contact-back { display: flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; background: transparent; }
.contact-widget .contact-close .contact-icon, .contact-widget .contact-back .contact-icon { width: 18px; height: 18px; }
.contact-panel-body { padding: 12px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.contact-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.contact-widget .contact-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-width: 0; min-height: 92px; padding: 10px 5px; border: 1px solid #dce5eb; border-radius: 9px; background: #fff; color: var(--ink); text-align: center; text-decoration: none; white-space: normal; }
.contact-choice > span { font-size: 13px; line-height: 1.4; }
.contact-choice > small { font-size: 10px; line-height: 1.2; color: var(--muted); }
.contact-widget .contact-choice .contact-icon { width: 34px; height: 34px; }
.contact-widget .contact-line .contact-icon { color: #06c755; }
.contact-widget .contact-wechat .contact-icon { color: #07b75a; }
.contact-widget .contact-whatsapp .contact-icon { color: #16a861; }
.contact-widget .contact-helper .contact-icon { color: var(--blue); }
.contact-widget .contact-choice:hover { border-color: var(--blue); background: #f7fafc; }
.contact-widget :is(button,a,input):focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.contact-account { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; }
.contact-account input { flex: 1; min-width: 85px; width: 115px; padding: 5px; font-size: 16px; }
.contact-account .small { min-height: 30px; padding: 4px 6px; font-size: 11px; }
.contact-copy-status { width: 100%; margin: 0; font-size: 11px; color: var(--muted); }
.contact-helper-note { margin: 0 0 8px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.contact-history { display: flex; flex-direction: column; gap: 7px; max-height: 215px; min-height: 80px; overflow-y: auto; overscroll-behavior: contain; }
.contact-history p { margin: 0; padding: 7px 9px; max-width: 94%; border-radius: 8px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.contact-answer { align-self: flex-start; background: #f0f4f7; }
.contact-question { align-self: flex-end; background: #e2eff7; color: #17486b; }
.contact-topics { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 7px; }
.contact-topics .small { min-height: 27px; padding: 3px 6px; font-size: 11px; }
.contact-question-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px; margin: 0; }
.contact-question-form input { min-width: 0; width: 100%; height: 38px; padding: 6px 8px; font-size: 16px; }
.contact-question-form button { padding: 5px 8px; min-height: 38px; font-size: 11px; }
.contact-helper-channels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin-top: 10px; }
.contact-widget .contact-helper-channels .contact-choice { min-height: 62px; padding: 6px 3px; gap: 2px; }
.contact-widget .contact-helper-channels .contact-icon { width: 25px; height: 25px; }
.contact-helper-channels .contact-choice > span { font-size: 11px; }
@media(max-height:600px) { .contact-history { max-height: 135px; min-height: 45px; } }
/* Compact files, case details and controls. */
.file-viewer-backdrop{position:fixed;inset:0;z-index:140;background:#102c42a6;padding:20px;display:flex;align-items:center;justify-content:center}
.file-viewer{background:white;border-radius:14px;display:flex;flex-direction:column;width:min(1100px,100%);height:min(90dvh,950px);overflow:hidden;box-shadow:0 12px 50px #102b4938}
.file-viewer header{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex-shrink:0}
.file-viewer h2{font-size:16px;flex:1;margin:0;min-width:0;overflow-wrap:anywhere}
.file-viewer header button{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:5px}
.file-viewer-content{flex:1;min-height:0;overflow:auto;padding:10px;background:#f3f6f8}
.file-viewer-content .document-preview-frame{border:0;width:100%;height:100%;min-height:65dvh;background:white}
.file-viewer-content .document-preview-image{display:block;max-width:100%;max-height:none;width:auto;margin:auto;object-fit:contain}
.print-frame{position:absolute;width:0;height:0;border:0}
.country-selected{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:5px}
.country-options{max-height:160px;overflow:auto;border:1px solid #dce4eb;border-radius:6px;margin-top:4px}
.country-option{display:block;width:100%;text-align:left;border:0;border-radius:0;padding:6px 9px;font-size:14px;background:white}
.country-option:hover,.country-option[aria-pressed=true]{background:#e5f0f9;color:#1e618a}
.file-functions{display:flex;flex-wrap:nowrap;min-width:128px;width:100%}
.file-functions .file-delete{margin-left:auto;color:#bd3030;border-color:#e8b8b8}
.case-basic-layout{display:flex;align-items:flex-start;gap:18px;max-width:820px;margin:auto}
.case-basic-layout .detail-grid{flex:1;min-width:0;gap:12px 18px}
.case-mark-preview{width:3cm;height:3cm;flex:0 0 3cm;padding:4px;border:1px solid #dce4eb;background:white;display:flex;align-items:center;justify-content:center}
.case-mark-preview img{width:100%;height:100%;object-fit:contain}
.case-detail-modal{width:min(880px,calc(100vw - 32px))}
.case-detail-modal .modal-body{padding:16px 20px}
.case-detail-modal .case-info-row{gap:12px 20px;margin-bottom:10px}
.case-detail-modal .case-info-row .label{font-size:.82em;margin-bottom:3px}
.prior-dashboard{margin-bottom:18px}
.prior-table td{white-space:nowrap}
.prior-table td:nth-child(3),.prior-table td:nth-child(7){white-space:normal;min-width:110px}
.transfer-panel{border:1px solid #d9c28f;background:#fffbf0;border-radius:8px;padding:12px;margin:0 0 16px}
.transfer-panel p{font-size:13px;margin:4px 0 10px}
.transfer-results{max-height:180px;overflow:auto}
.contact-wechat-qr img{display:block;max-width:100%;max-height:400px;object-fit:contain;margin:auto}
.top-actions .size-control,.top-actions .language-control{flex:0 0 32px;width:32px;height:32px}
.top-actions .size-control>summary,.top-actions .language-control>summary{width:32px;height:32px;border-radius:6px}
.top-actions .size-icon{width:25px;height:21px}
.top-actions .language-control summary .icon{width:21px;height:21px}
.top-actions .view-switch{gap:5px;min-width:0;align-items:center}
.top-actions .view-switch>.icon{width:32px;height:32px;box-sizing:border-box;border:1px solid #c9d5df;border-radius:6px;padding:5px;background:white;flex-shrink:0}
.top-actions .view-switch select{height:32px;min-height:32px;padding-top:3px;padding-bottom:3px;line-height:24px;font-size:13px;border:1px solid #c9d5df;border-radius:6px;max-width:180px}
@media(max-width:760px){
 .file-viewer-backdrop{padding:6px}.file-viewer{height:94dvh;border-radius:10px}.file-viewer h2{font-size:14px}.file-viewer header{padding:8px;gap:6px}
 .case-detail-modal{width:100%;max-width:100%}.case-detail-modal .modal-body{padding:12px}
 .case-basic-layout{gap:10px;display:block}.case-mark-preview{float:right;margin:0 0 10px 10px;width:3cm;height:3cm}.case-basic-layout:after{content:'';display:block;clear:both}
 .case-info-row{width:100%}.case-basic-layout .detail-grid{display:block}
 .top-actions{gap:5px}.top-actions .view-switch select{max-width:124px;font-size:12px}.top-actions .view-switch>.icon{width:32px;height:32px}
 .top-actions .avatar{display:none}.file-functions{min-width:114px}.profile-files-table td{padding:7px}
}
@media(min-width:761px){
 .main.is-cases-page{height:100dvh;min-height:0;padding-top:74px;padding-bottom:16px;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box}
 .main.is-cases-page #page-content{flex:1;min-height:0}
 .cases-page{height:100%;display:flex;flex-direction:column;min-height:0;gap:0}
 .cases-page>.page-head,.cases-page>.page-title,.cases-page>.tabs{flex-shrink:0}
 .cases-page .cases-panel{display:flex;flex-direction:column;flex:1;min-height:0;margin-bottom:0;overflow:hidden}
 .cases-page .cases-panel>.toolbar,.cases-page .cases-panel>.sortbar,.cases-page .cases-panel>.pager{flex-shrink:0}
 .cases-page .cases-panel .table-scroll{flex:1;min-height:80px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
 .cases-page .cases-panel .pager{margin-top:0;background:white}
 .cases-page .case-status-checks{gap:5px 9px}
 .cases-page .sortbar{padding-top:7px;padding-bottom:7px}
 .cases-page .toolbar{padding-top:10px;padding-bottom:10px}
}
.top-actions .view-person{width:32px;height:32px;min-height:32px;min-width:32px;display:flex;align-items:center;justify-content:center;border:1px solid #c9d5df;border-radius:6px;padding:5px;background:white;flex-shrink:0}
.top-actions .view-person .icon{width:20px;height:20px}
.file-viewer-content .document-preview-image{width:100%;height:auto}
@media(min-width:761px){.main.is-cases-page #page-content,.cases-page,.cases-panel{min-width:0}.cases-page .cases-panel .table-scroll{max-height:none}.cases-page .view-banner{flex-shrink:0}}
.import-review dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:14px;margin:8px 0}
.import-review dd{margin:0;overflow-wrap:anywhere}.import-review p{font-size:13px;margin:4px 0;color:#7a5920}
@media(max-width:760px){.case-mark-preview{float:none;margin:0 auto 12px}.case-basic-layout .detail-grid{width:100%}}
.case-status-checks button.active{background:#1e668f;color:white;border-color:#1e668f}
.case-status-checks:has(button[aria-pressed=true]) label{opacity:.45}

.contact-wechat-qr{position:relative;width:192px;height:192px;overflow:hidden;margin:12px auto 0;background:white;flex-shrink:0}
.contact-wechat-qr img{position:absolute;width:123.333334%;max-width:none;height:auto;max-height:none;left:-11.666667%;top:-35%;margin:0;object-fit:initial}
.mail-layout-preview{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:white;margin-top:10px}
.mail-layout-preview summary{padding:8px 12px;cursor:pointer;font-size:13px;color:var(--blue);background:#f5f8fb}
.mail-layout-preview iframe{display:block;width:100%;height:650px;border:0;background:white;resize:vertical;min-height:320px}
.dashboard-top-grid,.dashboard-bottom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px;align-items:start}
.dashboard-top-grid>.panel,.dashboard-bottom-grid>.panel{margin-bottom:0;min-width:0}
.dashboard-bottom-grid{align-items:stretch;grid-auto-rows:1fr}
.dashboard-bottom-grid .prior-dashboard{contain:size;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden}
.dashboard-bottom-grid .prior-dashboard .panel-title{flex-shrink:0}
.dashboard-bottom-grid .prior-dashboard>.overflow{flex:1;min-height:0;overflow:auto}
.dashboard-bottom-grid.solo .prior-dashboard{contain:none;height:220px}
@media(max-width:760px){.dashboard-top-grid,.dashboard-bottom-grid{grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:14px}}
.dashboard-top-grid>.panel{display:flex;flex-direction:column}
.dashboard-top-grid .panel-title{flex-shrink:0}
.dashboard-list{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain}
.dashboard-list>.empty{height:100%;display:grid;place-content:center}
@media(min-width:761px){
 .main.is-dashboard-page{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:auto;padding-top:80px;padding-bottom:20px}
 .main.is-dashboard-page>.view-banner{flex-shrink:0}
 .main.is-dashboard-page #page-content{flex:1;min-height:0;display:flex;flex-direction:column}
 .dashboard-page{display:flex;flex-direction:column;flex:1;min-height:0}
 .dashboard-page>.page-head,.dashboard-page>.grid-stats,.dashboard-page>.dashboard-bottom-grid{flex-shrink:0}
 .dashboard-top-grid{flex:1;min-height:180px;align-items:stretch}
 .dashboard-top-grid>.panel{min-height:0}
 .dashboard-bottom-grid{margin-bottom:0}
}