:root {
  --ink: #183a57;
  --muted: #7d9097;
  --teal: #147c72;
  --teal-dark: #124d50;
  --blue: #2368da;
  --line: #e8eeef;
  --bg: #f2f6fc;
  --mint: #eaf5f1;
  --amber: #bc8938;
  --radius: 14px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
button {
  color: inherit;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #64bcb0;
  outline-offset: 3px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: 29px;
  line-height: 1.4;
  font-weight: 650;
  letter-spacing: -0.8px;
}
h2 {
  font-size: 17px;
  font-weight: 650;
}
h3 {
  font-size: 15px;
  font-weight: 650;
}
small {
  font-size: 11px;
}
svg {
  display: block;
}
.icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.btn {
  border: 1px solid #dce5e6;
  border-radius: 8px;
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.5;
  transition: background 0.18s, transform 0.18s;
}
.btn:hover {
  background: #f0f7f5;
  transform: translateY(-1px);
}
.btn.primary {
  background: var(--teal);
  border-color: var(--teal);
  color: white;
  box-shadow: 0 3px 8px #147c7214;
}
.btn.primary:hover {
  background: #106b63;
}
.btn.white {
  background: white;
  border-color: white;
  color: #1b665e;
}
.btn.small {
  padding: 6px 11px;
  font-size: 12px;
}
.btn.danger {
  border-color: #f3d6d3;
  color: #b4564d;
  background: #fff9f8;
}
.text-btn,
.table-title {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--teal);
  font-size: 12px;
  font-weight: 550;
}
.text-btn:hover,
.table-title:hover {
  text-decoration: underline;
}
.text-btn + .text-btn {
  margin-left: 13px;
}
.icon-btn {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #6e878e;
  flex-shrink: 0;
}
.icon-btn:hover {
  background: #e9f3f0;
}
.full {
  width: 100%;
}
.muted,
.subtle,
.hint {
  color: var(--muted);
}
.subtle {
  font-size: 11px;
}
.hint {
  font-size: 12px;
  margin: 12px 0;
  line-height: 1.8;
}
.center {
  text-align: center;
}
.spaced {
  margin-top: 24px;
}
.right {
  text-align: right !important;
}
.mono {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0.3px;
}
.orange {
  color: #b3823d !important;
}
.footer-spacer {
  flex: 1;
}
.sidebar {
  width: 238px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background: #fcfefe;
  border-right: 1px solid var(--line);
  z-index: 10;
  padding: 32px 19px 0;
  display: flex;
  flex-direction: column;
}
.brand {
  display: flex;
  gap: 11px;
  align-items: center;
  font-size: 25px;
  font-weight: 750;
  line-height: 1.1;
  padding: 0 10px;
}
.brand-mark {
  display: inline-flex;
  width: 42px;
  height: 42px;
  background: linear-gradient(140deg, #246de2 0%, #1766bb 48%, #13a987 100%);
  border-radius: 13px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 10px #147c7215;
}
.brand-mark svg {
  width: 37px;
}
.brand-en {
  display: block;
  font-size: 8px;
  letter-spacing: 1.7px;
  font-weight: 600;
  margin-top: 7px;
  color: #809397;
}
.workspace {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  padding: 11px 10px;
  margin: 32px 0 29px;
  border-radius: 10px;
  font-size: 12px;
}
.workspace-icon {
  width: 30px;
  height: 30px;
  background: #eaf3f2;
  border-radius: 7px;
  text-align: center;
  line-height: 30px;
  color: #377f74;
  font-size: 14px;
  font-weight: 650;
}
.workspace small {
  display: block;
  color: #8d9da1;
  font-size: 10px;
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5cb59d;
  margin-left: auto;
}
.nav-caption {
  font-size: 10px;
  color: #91a0a5;
  margin: 0 11px 12px;
}
.nav-caption span {
  font-size: 8px;
  margin-left: 12px;
  letter-spacing: 1px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 5px 0;
  padding: 12px 13px;
  border-radius: 9px;
  color: #71858c;
  font-size: 13px;
  transition: 0.15s;
}
.nav-item.active {
  color: #197c70;
  background: #e7f3ef;
  font-weight: 650;
  position: relative;
}
.nav-item.active:before {
  content: "";
  position: absolute;
  left: -19px;
  top: 12px;
  height: 20px;
  width: 3px;
  border-radius: 3px;
  background: #1b8c7b;
}
.nav-item:hover {
  background: #eff6f3;
}
.nav-count {
  margin-left: auto;
  font-size: 10px;
  background: #d0e9df;
  line-height: 19px;
  padding: 0 6px;
  border-radius: 5px;
}
.sidebar-bottom {
  margin-top: auto;
}
.client-promo {
  padding: 17px 12px;
  border-radius: 12px;
  background: linear-gradient(120deg, #e8f2f3, #eef8f0);
  margin: 30px 0 12px;
}
.mini-label {
  font-size: 9px;
  color: #609391;
  letter-spacing: 1px;
}
.client-promo strong {
  font-size: 12px;
  display: block;
  margin-top: 7px;
}
.client-promo p {
  font-size: 10px;
  color: #7b9798;
  margin: 6px 0 14px;
}
.client-promo a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #277e74;
  font-weight: 600;
}
.client-promo .icon {
  width: 15px;
}
.reset-btn {
  display: flex;
  gap: 9px;
  align-items: center;
  border: none;
  background: none;
  color: #899b9e;
  font-size: 11px;
  padding: 7px 12px;
  width: 100%;
}
.reset-btn .icon {
  width: 14px;
}
.account {
  border-top: 1px solid var(--line);
  padding: 18px 7px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  margin-top: 10px;
}
.account small {
  display: block;
  color: #95a1a5;
  font-size: 10px;
}
.account > .icon {
  margin-left: auto;
  width: 15px;
}
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e3efea;
  color: #468675;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.avatar.blue {
  background: #e9f0f8;
  color: #6b87b4;
}
.main-shell {
  margin-left: 238px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.topbar {
  height: 75px;
  background: #ffffffd9;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding: 0 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.breadcrumb {
  font-size: 12px;
  color: #90a0a5;
}
.breadcrumb span {
  padding: 0 12px;
  color: #ccd5d7;
}
.breadcrumb strong {
  color: #536c72;
  font-weight: 500;
}
.top-actions {
  display: flex;
  gap: 22px;
  align-items: center;
}
.demo-pill {
  font-size: 10px;
  border: 1px solid #dfece5;
  color: #548d7c;
  background: #f3faf6;
  border-radius: 20px;
  padding: 3px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.demo-pill i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #69ae92;
}
.client-link {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 11px;
  color: #5d7a7e;
}
.client-link .icon {
  width: 15px;
}
.top-actions > .avatar {
  width: 31px;
  height: 31px;
}
.main-content {
  padding: 32px 35px 28px;
  max-width: 1660px;
  width: 100%;
  margin: auto;
  flex: 1;
}
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
}
.eyebrow {
  font-size: 9px;
  letter-spacing: 1.7px;
  color: #7c9c9d;
  font-weight: 650;
  margin-bottom: 7px;
}
.page-head p {
  font-size: 12px;
  color: #88999f;
  margin-top: 8px;
}
.wave {
  font-size: 25px;
  color: #cba75e;
  margin-left: 8px;
}
.head-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.date-pill {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #e1e8e9;
  background: #fbfdfd;
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 11px;
  color: #69828a;
}
.date-pill .icon {
  width: 15px;
}
.welcome-banner {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(
    110deg,
    #174aa2 0%,
    #236dde 44%,
    #148e91 76%,
    #12a777 100%
  );
  color: #fff;
  border-radius: 14px;
  min-height: 206px;
  padding: 29px 31px;
  margin-bottom: 23px;
  isolation: isolate;
}
.welcome-banner:after {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  border: 1px solid #ffffff0a;
  border-radius: 50%;
  right: -110px;
  top: -130px;
  box-shadow: 0 0 0 45px #ffffff03, 0 0 0 90px #ffffff03;
}
.banner-label {
  font-size: 8px;
  letter-spacing: 2px;
  color: #d2e7ff;
}
.welcome-banner h2 {
  font-size: 28px;
  letter-spacing: 1px;
  font-weight: 550;
  margin: 10px 0 8px;
}
.welcome-banner p {
  color: #e0efff;
  font-size: 12px;
}
.welcome-banner > div > div {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 20px;
}
.welcome-banner .btn {
  padding: 8px 13px;
  font-size: 11px;
}
.welcome-banner .btn .icon {
  width: 15px;
}
.banner-link {
  display: flex;
  gap: 10px;
  font-size: 11px;
  align-items: center;
  color: #d1e7e2;
}
.banner-link .icon {
  width: 14px;
}
.route-art {
  position: absolute;
  right: 13px;
  top: 0;
  height: 100%;
  width: 43%;
  z-index: -1;
  opacity: 0.95;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 23px;
}
.stats-month-control {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #607985;
  font-size: 12px;
}
.stats-month-control input {
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid #dce5e6;
  border-radius: 7px;
  background: white;
  color: var(--ink);
}
.stats-note {
  margin: -10px 0 16px;
  color: #748892;
  font-size: 12px;
}
.analytics-kpis {
  margin-bottom: 18px;
}
.analytics-kpis .stat-card strong {
  font-size: 25px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.chart-panel {
  min-width: 0;
}
.chart-panel .panel-head {
  padding-bottom: 10px;
}
.chart-panel .panel-head p {
  font-size: 11px;
}
.chart-wide {
  grid-column: 1 / -1;
}
.chart-legend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #718793;
  font-size: 11px;
}
.chart-legend i,
.chart-legend-list i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
}
.bar-chart {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 230px;
  overflow-x: auto;
  padding: 10px 16px 12px;
  border-top: 1px solid #eff3f4;
}
.chart-bar-item {
  display: flex;
  min-width: 22px;
  flex: 1 0 22px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.chart-bar-value {
  min-height: 14px;
  color: #66808d;
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
}
.chart-bar-track {
  display: flex;
  width: 100%;
  height: 166px;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid #e7edef;
  background: repeating-linear-gradient(to top, transparent 0 40px, #f0f4f5 41px 42px);
}
.chart-bar-track i {
  display: block;
  width: min(72%, 24px);
  min-height: 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #38a59a, #167d78);
}
.chart-bar-track i.blue {
  background: linear-gradient(180deg, #6c9be4, #3478d4);
}
.chart-bar-track i.amber {
  background: linear-gradient(180deg, #dfbb75, #bc8938);
}
.chart-bar-item > span {
  color: #778b94;
  font-size: 9px;
}
.donut-layout {
  display: flex;
  min-height: 210px;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 8px 20px 22px;
}
.donut-chart {
  display: grid;
  width: 152px;
  height: 152px;
  flex: 0 0 152px;
  place-items: center;
  border-radius: 50%;
}
.donut-chart > div {
  display: flex;
  width: 94px;
  height: 94px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: white;
}
.donut-chart strong {
  color: #24445b;
  font-size: 25px;
  font-variant-numeric: tabular-nums;
}
.donut-chart span {
  color: #84969d;
  font-size: 10px;
}
.chart-legend-list {
  display: grid;
  min-width: 135px;
  gap: 11px;
}
.chart-legend-list > div {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 8px;
  color: #5c737f;
  font-size: 11px;
}
.chart-legend-list i {
  background: var(--legend-color);
}
.chart-legend-list b {
  color: #2b4c5a;
  font-variant-numeric: tabular-nums;
}
.horizontal-bars {
  display: grid;
  gap: 8px;
  padding: 12px 22px 22px;
}
.horizontal-bars .chart-bar-item {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(90px, 2fr) auto;
  min-width: 0;
  align-items: center;
  gap: 12px;
}
.horizontal-bars .chart-bar-value {
  order: 3;
  text-align: right;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.horizontal-bars .chart-bar-item > span {
  order: 1;
  overflow: hidden;
  color: #49616e;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.horizontal-bars .chart-bar-track {
  order: 2;
  height: 12px;
  justify-content: flex-start;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: #eef3f4;
}
.horizontal-bars .chart-bar-track i {
  width: auto;
  min-width: 0;
  height: 100% !important;
  border-radius: inherit;
}
.stat-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
}
.stat-card > div {
  font-size: 11px;
  color: #71878f;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stat-icon {
  border-radius: 9px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf3fa;
  color: #5e8bad;
}
.stat-icon.teal {
  background: #ebf7f2;
  color: #5b9b83;
}
.stat-icon.amber {
  background: #fbf4e8;
  color: #c29b59;
}
.stat-icon.purple {
  background: #eff0f8;
  color: #8f8cb4;
}
.stat-icon .icon {
  width: 17px;
}
.stat-card strong {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -1px;
  display: block;
  margin: 3px 0 7px;
  font-variant-numeric: tabular-nums;
}
.stat-card strong small {
  font-size: 18px;
  margin-right: 3px;
}
.stat-card p {
  font-size: 10px;
  color: #9ba9ae;
}
.dashboard-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(290px, 1fr);
  gap: 23px;
  margin-bottom: 23px;
}
.panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 23px 16px;
  gap: 15px;
}
.panel-head p {
  font-size: 10px;
  color: #91a0a4;
  margin-top: 5px;
}
.panel-head h2 {
  font-size: 15px;
}
.count {
  display: inline-flex;
  border-radius: 5px;
  padding: 0 6px;
  background: #edf5f1;
  color: #42877b;
  font-size: 10px;
  font-weight: 550;
  margin-left: 5px;
  vertical-align: middle;
}
.text-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #78969a;
  white-space: nowrap;
}
.text-link .icon {
  width: 13px;
}
.schedule {
  padding: 4px 22px 14px;
}
.schedule-row {
  display: flex;
  align-items: center;
  padding: 17px 0;
  gap: 14px;
}
.schedule-row + .schedule-row {
  border-top: 1px solid #f0f3f3;
}
.time-col {
  width: 60px;
  flex-shrink: 0;
}
.time-col strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.time-col span {
  font-size: 9px;
  color: #94a3a8;
}
.schedule-line {
  height: 58px;
  width: 2px;
  background: #eaf2ee;
  position: relative;
  margin-right: 3px;
}
.schedule-line i {
  width: 7px;
  height: 7px;
  background: #62a998;
  position: absolute;
  top: 8px;
  left: -2.5px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px white;
}
.schedule-info {
  flex: 1;
  min-width: 0;
}
.schedule-info > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.schedule-info strong {
  font-size: 12px;
  font-weight: 600;
}
.schedule-info p {
  font-size: 11px;
  color: #678189;
  margin: 5px 0 2px;
}
.schedule-info p span {
  padding: 0 6px;
  color: #b0bfbe;
}
.schedule-info small {
  font-size: 9px;
  color: #95a6aa;
}
.schedule-row > .btn {
  font-size: 10px;
  padding: 5px 9px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  background: #f1f4f5;
  color: #809298;
}
.badge i {
  height: 4px;
  width: 4px;
  border-radius: 50%;
  background: currentColor;
}
.badge.teal {
  background: #edf7f0;
  color: #478e73;
}
.badge.blue {
  background: #edf4fa;
  color: #4884b0;
}
.badge.amber {
  background: #fcf4e7;
  color: #b38d4d;
}
.badge.gray {
  background: #f0f3f4;
  color: #91a0a5;
}
.panel-foot {
  background: #fbfdfc;
  border-top: 1px solid #eff3f2;
  padding: 11px 22px;
  font-size: 9px;
  color: #8da19f;
  display: flex;
  gap: 7px;
  align-items: center;
}
.panel-foot .icon {
  width: 13px;
  height: 13px;
}
.todo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 13px 22px;
  width: 100%;
  text-align: left;
}
.todo-row:hover {
  background: #f8fbfa;
}
.todo-row:last-child {
  margin-bottom: 12px;
}
.todo-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fcf4e8;
  color: #c59d61;
}
.todo-icon.request {
  background: #edf3fa;
  color: #6d94b3;
}
.todo-icon.settlements {
  background: #edf6f0;
  color: #639c80;
}
.todo-icon .icon {
  width: 18px;
}
.todo-row > span:nth-child(2) {
  flex: 1;
}
.todo-row strong {
  font-size: 12px;
  font-weight: 550;
  display: block;
}
.todo-row small {
  display: block;
  font-size: 9px;
  color: #98a8ac;
  margin-top: 3px;
}
.todo-row b {
  font-size: 18px;
  font-weight: 500;
}
.todo-row > .icon {
  color: #afbcbe;
  width: 14px;
}
.bottom-columns {
  margin-bottom: 0;
}
.flow {
  display: flex;
  padding: 10px 23px 26px;
  gap: 12px;
  justify-content: space-between;
}
.flow > div {
  flex: 1;
  position: relative;
}
.flow > div + div:before {
  content: "→";
  position: absolute;
  top: 9px;
  left: -25px;
  color: #c1d5cd;
}
.flow span {
  width: 36px;
  height: 36px;
  border: 1px solid #e4eeea;
  border-radius: 10px;
  background: #f5f9f7;
  color: #64978c;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.flow .icon {
  width: 17px;
}
.flow b {
  font-size: 10px;
  display: block;
  font-weight: 550;
}
.flow small {
  font-size: 9px;
  color: #a1aeb1;
  display: block;
  margin-top: 3px;
}
.activity {
  padding: 0 23px 15px;
}
.activity > div {
  display: flex;
  gap: 10px;
  margin: 9px 0;
}
.activity i {
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  background: #7cb1a5;
  border-radius: 50%;
  margin-top: 6px;
}
.activity p {
  font-size: 10px;
  color: #70878d;
}
.activity small {
  display: block;
  font-size: 9px;
  color: #b0babb;
}
.desktop-footer {
  padding: 15px 35px 23px;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #a7b4b8;
  gap: 15px;
}
.order-summary {
  display: flex;
  gap: 28px;
  align-items: center;
  margin: 26px 0;
  color: #85999f;
  font-size: 12px;
}
.order-summary span {
  display: flex;
  gap: 7px;
  align-items: center;
}
.order-summary b {
  color: #304d54;
  font-size: 18px;
  font-weight: 550;
}
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot.teal {
  background: #65ad9a;
}
.dot.blue {
  background: #76a4c0;
}
.dot.amber {
  background: #c2a26a;
}
.list-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px 21px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.list-toolbar h2 {
  font-size: 15px;
}
.tabs {
  display: flex;
  gap: 6px;
}
.tab {
  border: none;
  background: none;
  padding: 9px 13px;
  font-size: 12px;
  border-radius: 7px;
  white-space: nowrap;
  color: #83959c;
}
.tab.selected {
  background: #eaf5f0;
  color: #217e6f;
  font-weight: 600;
}
.toolbar-right {
  display: flex;
  gap: 12px;
  align-items: center;
}
.search-field {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #e1e9eb;
  border-radius: 7px;
  padding: 6px 10px;
  background: #fcfdfd;
}
.search-field .icon {
  width: 15px;
  color: #92a6ac;
}
.search-field input {
  border: 0;
  padding: 3px;
  width: 190px;
  min-height: 0;
  background: transparent;
  font-size: 11px;
  box-shadow: none;
}
.search-field .text-btn {
  font-size: 11px;
}
.table-wrap {
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  white-space: nowrap;
}
th {
  font-size: 10px;
  text-align: left;
  font-weight: 500;
  color: #8c9ca3;
  background: #f8fafb;
  padding: 12px 20px;
}
td {
  padding: 20px;
  border-bottom: 1px solid #edf1f2;
  color: #59747e;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover {
  background: #fcfefe;
}
td > small {
  display: block;
  color: #a0afb4;
  font-size: 10px;
  margin-top: 5px;
}
td > strong {
  font-size: 12px;
  font-weight: 550;
  color: #3b5962;
}
.table-title {
  font-size: 12px;
  color: #325760;
  text-align: left;
}
.table-money {
  color: #35585e;
  font-size: 13px;
  font-weight: 600;
}
.table-money small {
  font-size: 9px;
  font-weight: 400;
  color: #9aacb0;
}
.route-cell {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
}
.route-cell .dot {
  width: 4px;
  height: 4px;
}
.table-footer {
  display: flex;
  justify-content: space-between;
  padding: 15px 23px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: #98a6aa;
}
.page-number {
  background: #eaf4f0;
  color: #388674;
  padding: 2px 9px;
  border-radius: 5px;
}
.empty {
  padding: 48px 20px;
  text-align: center;
  color: #95aaa9;
}
.empty > .icon {
  width: 34px;
  height: 34px;
  color: #a7c4bd;
  margin-bottom: 12px;
}
.empty h3 {
  font-size: 14px;
  color: #64867d;
}
.empty p {
  font-size: 12px;
  margin-top: 6px;
}
.info-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: #698e92;
  background: #edf5f6;
  border: 1px solid #e0eeef;
  border-radius: 9px;
  padding: 12px 16px;
  margin-bottom: 23px;
}
.info-banner.compact {
  font-size: 11px;
  margin: 17px 0;
  padding: 10px;
}
.info-banner .icon {
  width: 16px;
}
.rate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.rate-art-wrap {
  height: 172px;
  background: linear-gradient(115deg, #e5f0ee, #f4f8f5);
  position: relative;
  padding: 17px 20px;
  overflow: hidden;
}
.rate-art-wrap.blue {
  background: linear-gradient(115deg, #e8f0f7, #f5f8fb);
}
.rate-art-wrap.navy {
  background: linear-gradient(115deg, #e8edef, #f5f7f9);
}
.rate-art-wrap.mint {
  background: linear-gradient(115deg, #eaf2e8, #f6f9f4);
}
.category-tag {
  font-size: 10px;
  color: #6b9790;
  position: relative;
  z-index: 1;
}
.car-art {
  width: 300px;
  height: 140px;
  color: #398e88;
}
.rate-art-wrap .car-art {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5px;
}
.car-art.blue {
  color: #528dab;
}
.car-art.navy {
  color: #506e80;
}
.car-art.mint {
  color: #6a9a79;
}
.art-label {
  position: absolute;
  font-size: 8px;
  color: #a2bab5;
  bottom: 10px;
  right: 15px;
  letter-spacing: 2px;
}
.rate-body {
  padding: 22px;
}
.rate-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rate-heading h2 {
  font-size: 17px;
}
.rate-main {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 10px 0 21px;
}
.rate-main strong {
  font-size: 29px;
  color: #236c66;
  font-weight: 550;
}
.rate-main strong small {
  font-size: 15px;
  margin-right: 3px;
}
.rate-main > span {
  font-size: 11px;
  color: #94aaa7;
}
.rate-main .badge {
  margin-left: auto;
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.price-grid small {
  display: block;
  color: #8ea2a7;
  font-size: 10px;
}
.price-grid b {
  display: block;
  font-size: 14px;
  margin-top: 4px;
  font-weight: 550;
}
.rate-rules {
  display: flex;
  gap: 20px;
  font-size: 10px;
  color: #8ca4a5;
  margin: 16px 0;
}
.cost-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: 10px;
  border-top: 1px dashed #e3ebe8;
  padding-top: 16px;
  color: #93a6aa;
}
.cost-line .icon {
  width: 12px;
  margin-right: 2px;
}
.cost-line b {
  color: #6c898b;
  font-weight: 500;
  margin-left: 4px;
}
.cost-line .text-btn {
  font-size: 10px;
}
.person-cell {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #3a5961;
}
.person-cell strong {
  font-size: 12px;
}
.person-cell .avatar {
  width: 32px;
  height: 32px;
}
.legend {
  display: flex;
  gap: 15px;
  font-size: 11px;
  color: #74978e;
}
.attendance-table th,
.attendance-table td {
  padding: 14px 9px;
  text-align: center;
  font-size: 10px;
  min-width: 29px;
}
.attendance-table th:first-child,
.attendance-table td:first-child {
  min-width: 100px;
  position: sticky;
  left: 0;
  background: #fcfefe;
}
.attendance-table .today {
  background: #f1f8f4;
}
.attendance-mark {
  border: 0;
  width: 22px;
  height: 24px;
  padding: 0;
  border-radius: 5px;
  background: #dff0e7;
  color: #388269;
  font-size: 10px;
}
.finance-stats {
  display: flex;
  background: linear-gradient(110deg, #165d65, #237c76);
  border-radius: 13px;
  color: white;
  padding: 26px 32px;
  margin-bottom: 26px;
  gap: 35px;
}
.finance-stats > div {
  flex: 1;
  border-right: 1px solid #ffffff22;
}
.finance-stats > div:last-child {
  border: 0;
}
.finance-stats span {
  display: block;
  font-size: 11px;
  color: #afcfcb;
}
.finance-stats strong {
  display: block;
  font-size: 29px;
  font-weight: 500;
  letter-spacing: -0.5px;
  margin-top: 7px;
}
.finance-stats strong small {
  font-size: 16px;
  margin-right: 5px;
}
/* Dialogs and forms */
input,
select,
textarea {
  border: 1px solid #dae5e4;
  border-radius: 7px;
  background: #fff;
  color: #36575e;
  padding: 10px 12px;
  min-height: 40px;
  min-width: 0;
  outline: none;
  width: 100%;
  font-size: 12px;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #57a89a;
  box-shadow: 0 0 0 3px #147c720b;
}
input[readonly] {
  background: #f3f7fc;
  color: #93a7a6;
}
input:disabled {
  background: #f3f6f5;
  opacity: 0.65;
}
textarea {
  resize: vertical;
}
input::placeholder,
textarea::placeholder {
  color: #acb9bc;
}
label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
  color: #67868b;
}
label input,
label textarea,
label select {
  margin-bottom: 4px;
}
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  flex-shrink: 0;
  accent-color: var(--teal);
}
.check-label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.8;
  margin: 18px 0;
}
.check-label input {
  margin: 3px 0 0;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 18px;
  margin-bottom: 15px;
}
.form-section {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 22px 0 16px;
}
.form-section:first-child {
  margin-top: 0;
}
.form-section span {
  font-size: 10px;
  background: #edf5f0;
  color: #6c9886;
  padding: 3px 6px;
  border-radius: 5px;
}
.form-section h3 {
  font-size: 13px;
}
.form-error {
  color: #bd5b4d;
  font-size: 12px;
  margin-top: 10px;
}
.modal-open {
  overflow: hidden;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #153a4860;
  backdrop-filter: blur(5px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.modal {
  background: #fff;
  width: 580px;
  max-width: 100%;
  border-radius: 16px;
  max-height: calc(100dvh - 60px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 100px #14374540;
  animation: modal-in 0.2s ease;
}
.modal.wide {
  width: 880px;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 27px 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.modal-head .eyebrow {
  font-size: 8px;
}
.modal-head h2 {
  font-size: 20px;
}
.modal-body {
  padding: 24px 27px;
  overflow: auto;
}
.modal-body > p {
  font-size: 13px;
  color: #72908e;
  margin: 12px 0;
}
.modal-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  padding: 17px 27px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: #fcfefd;
  border-radius: 0 0 16px 16px;
}
.modal-footer .btn {
  font-size: 12px;
}
.confirmation-sheet {
  padding: 8px 7px;
  color: #355b60;
}
.sheet-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.sheet-heading > div {
  display: flex;
  align-items: center;
  gap: 13px;
}
.sheet-heading h2 {
  font-size: 22px;
}
.sheet-heading .brand-mark {
  width: 33px;
  height: 33px;
  border-radius: 9px;
}
.sheet-heading .brand-mark svg {
  width: 29px;
}
.sheet-subtitle {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #378f85;
  padding: 14px 0 17px;
  color: #92aba9;
  font-size: 9px;
  letter-spacing: 1px;
}
.sheet-customer {
  margin: 23px 0;
}
.sheet-customer h3 {
  font-size: 18px;
}
.sheet-customer span {
  font-size: 11px;
  display: block;
  color: #849b9b;
  margin-top: 7px;
}
.sheet-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f1f7f5;
  padding: 20px 23px;
  border-radius: 10px;
  gap: 20px;
}
.sheet-route > div {
  flex: 1;
}
.sheet-route > div:last-child {
  text-align: right;
}
.sheet-route span {
  font-size: 8px;
  letter-spacing: 1px;
  color: #8aaba0;
}
.sheet-route h3 {
  font-size: 17px;
  margin: 6px 0;
}
.sheet-route p {
  font-size: 11px;
  color: #85a095;
}
.sheet-route > .icon {
  color: #96b8aa;
}
.sheet-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 30px;
  margin: 20px 0;
}
.sheet-details > div {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  border-bottom: 1px solid #edf2ef;
  padding: 12px 0;
  font-size: 11px;
}
.sheet-details span {
  color: #93a8a7;
  flex-shrink: 0;
}
.sheet-details b {
  font-weight: 500;
  text-align: right;
}
.sheet-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.sheet-total > span {
  font-size: 13px;
}
.sheet-total small {
  display: block;
  font-size: 9px;
  color: #98aaa6;
}
.sheet-total > strong {
  font-size: 25px;
  color: #267a6d;
  font-weight: 550;
}
.sheet-total > strong small {
  display: inline;
  font-size: 11px;
}
.sheet-notes {
  margin: 19px 0;
  font-size: 11px;
}
.sheet-notes b {
  font-weight: 600;
}
.sheet-notes p {
  color: #88a09c;
  margin-top: 6px;
}
.sheet-sign {
  display: flex;
  gap: 11px;
  align-items: center;
  background: #f7faf8;
  padding: 13px;
  color: #588d7e;
  border-radius: 7px;
  font-size: 11px;
}
.sheet-sign small {
  display: block;
  color: #91a89e;
  margin-top: 3px;
  font-size: 9px;
}
.settlement-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.settlement-heading small {
  color: #97abaa;
}
.settlement-lines th,
.settlement-lines td {
  padding: 10px 8px;
}
.settlement-lines input {
  padding: 7px;
  min-width: 70px;
}
.settlement-lines td:first-child {
  width: 45%;
}
.settlement-lines td:first-child input {
  min-width: 180px;
}
.settlement-summary {
  max-width: 340px;
  margin: 22px 0 22px auto;
}
.settlement-summary strong {
  font-size: 22px;
  color: #218879;
}
.kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  font-size: 12px;
  margin: 13px 0;
}
.kv > span {
  color: #8a9f9f;
  flex-shrink: 0;
}
.kv > b {
  text-align: right;
  font-weight: 500;
}
.kv small {
  display: block;
  font-size: 10px;
  color: #9cadaa;
}
.receipt-total {
  padding: 17px 20px;
  background: #eef7f2;
  border-radius: 10px;
  margin-bottom: 22px;
}
.receipt-total span {
  display: block;
  color: #7d9a8d;
  font-size: 11px;
}
.receipt-total strong {
  font-size: 28px;
  color: #29755f;
  font-weight: 500;
}
.receipt-list {
  margin-top: 12px;
}
.receipt-list > div {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding: 12px 0;
  font-size: 12px;
}
.receipt-list small {
  display: block;
  color: #9cb0ab;
  font-size: 10px;
}
.support-card {
  text-align: center;
  padding: 20px;
}
.support-card .avatar {
  width: 60px;
  height: 60px;
  font-size: 25px;
  margin-bottom: 15px;
}
.support-card p {
  font-size: 12px;
  color: #8ca49c;
  margin-top: 8px;
}
.support-card > strong {
  font-size: 28px;
  color: #258575;
  display: block;
  margin: 20px 0;
}
.support-card .hint {
  font-size: 11px;
}
#toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: #183f42ee;
  color: white;
  font-size: 13px;
  padding: 13px 23px;
  border-radius: 10px;
  box-shadow: 0 8px 30px #173e4325;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  max-width: 90vw;
}
#toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* Customer mobile experience */
.mobile-stage {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  gap: 100px;
  padding: 40px 50px;
  background: radial-gradient(ellipse at 12% 25%, #d9e8ff 0, transparent 58%),
    radial-gradient(ellipse at 85% 80%, #dcf4e9 0, transparent 55%), #f1f6fc;
  align-items: flex-start;
}
.mobile-showcase {
  width: 420px;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  position: sticky;
  top: 40px;
  align-self: flex-start;
}
.mobile-showcase .brand {
  padding: 12px 0;
}
.showcase-copy {
  margin-top: 90px;
  position: relative;
  z-index: 1;
}
.showcase-copy h1 {
  font-size: 44px;
  font-weight: 550;
  line-height: 1.55;
  letter-spacing: 1px;
  margin-top: 18px;
  color: #2059a4;
}
.showcase-copy > p {
  font-size: 14px;
  line-height: 2;
  color: #7f9a98;
  margin-top: 24px;
}
.showcase-points {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 30px 0 45px;
  font-size: 12px;
  color: #638d7e;
}
.showcase-points > span {
  display: flex;
  gap: 10px;
  align-items: center;
}
.showcase-points .icon {
  width: 17px;
  background: #dceee4;
  border-radius: 50%;
  padding: 2px;
}
.showcase-copy > .btn {
  background: #ffffff88;
  border-color: #d5e5de;
  font-size: 12px;
  padding: 11px 17px;
}
.demo-note {
  font-size: 10px;
  color: #9bb2ab;
  line-height: 1.9;
  margin-top: 26px;
}
.showcase-orbit {
  position: absolute;
  bottom: -50px;
  left: -180px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 1px solid #cce5da55;
  box-shadow: 0 0 0 60px #d4e8de18, 0 0 0 120px #d4e8de18;
  pointer-events: none;
}
.phone-frame {
  width: 398px;
  flex-shrink: 0;
  background: #f3f7fc;
  height: min(850px, calc(100dvh - 80px));
  min-height: 0;
  border: 7px solid #fff;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 22px 80px #2853531a, 0 0 0 1px #e3ebea;
  position: relative;
  display: flex;
  flex-direction: column;
}
.mobile-top {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  padding: 14px 24px 6px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
}
.mobile-top > div {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 10px;
}
.battery {
  height: 8px;
  width: 18px;
  display: inline-block;
  border-radius: 2px;
  background: #2f4c4e;
  position: relative;
}
.battery:after {
  content: "";
  width: 2px;
  height: 4px;
  background: #708785;
  position: absolute;
  right: -3px;
  top: 2px;
}
.mobile-header {
  flex-shrink: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  height: 62px;
  gap: 10px;
}
.mobile-brand {
  display: flex;
  gap: 9px;
  align-items: center;
}
.mobile-brand .brand-mark {
  width: 29px;
  height: 29px;
  border-radius: 9px;
}
.mobile-brand .brand-mark svg {
  width: 25px;
}
.mobile-brand b {
  font-size: 20px;
  color: #315957;
}
.mobile-brand > span:last-child {
  border-left: 1px solid #dde7e2;
  padding-left: 9px;
  font-size: 10px;
  color: #97aaa3;
  margin-left: 3px;
}
.mobile-header > strong {
  font-size: 14px;
  font-weight: 550;
}
.mobile-content {
  padding: 23px 20px 26px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: #b8ccdf transparent;
}
.mobile-greeting > span {
  font-size: 11px;
  color: #819b90;
}
.mobile-greeting h1 {
  font-size: 21px;
  letter-spacing: -0.3px;
  margin: 3px 0 8px;
  color: #204d80;
}
.mobile-greeting p {
  font-size: 10px;
  color: #94a69e;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mobile-greeting p .icon {
  width: 12px;
  height: 12px;
}
.mobile-greeting p > span {
  margin-left: auto;
}
.mobile-hero {
  position: relative;
  background: linear-gradient(
    125deg,
    #164caf 0%,
    #286fe0 42%,
    #168f98 73%,
    #15a777 100%
  );
  margin: 20px 0;
  border-radius: 17px;
  padding: 22px;
  color: #fff;
  height: 220px;
  overflow: hidden;
  isolation: isolate;
}
.mobile-hero .banner-label {
  font-size: 6px;
  letter-spacing: 1.4px;
}
.mobile-hero h2 {
  font-size: 26px;
  line-height: 1.45;
  font-weight: 550;
  letter-spacing: 1px;
  margin: 7px 0;
}
.mobile-hero p {
  font-size: 8px;
  color: #e0f4ff;
}
.mobile-hero .btn {
  font-size: 10px;
  padding: 7px 11px;
  margin-top: 16px;
}
.mobile-hero .btn .icon {
  width: 13px;
}
.mobile-hero .car-art {
  position: absolute;
  right: -44px;
  bottom: -5px;
  width: 240px;
  color: #d3f5e6;
  opacity: 0.85;
  z-index: -1;
  transform: scaleX(-1);
}
.mobile-hero:before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -85px;
  top: -70px;
  border: 1px solid #ffffff14;
  border-radius: 50%;
  box-shadow: 0 0 0 40px #ffffff04, 0 0 0 80px #ffffff04;
}
.mobile-shortcuts {
  display: flex;
  justify-content: space-between;
  margin: 22px 0;
}
.mobile-shortcuts > a,
.mobile-shortcuts > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  background: none;
  border: none;
  padding: 0;
  min-width: 58px;
  color: #58776b;
}
.mobile-shortcuts span {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #e5f2ec;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #488c75;
}
.mobile-shortcuts > a:nth-child(2) span {
  background: #e9f0f7;
  color: #6a8ea9;
}
.mobile-shortcuts > a:nth-child(3) span {
  background: #f3efe5;
  color: #b69d67;
}
.mobile-shortcuts > button span {
  background: #e9f3f3;
  color: #6c9a97;
}
.mobile-notice {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fcf6ea;
  border: 1px solid #f0e9d9;
  padding: 12px 11px;
  border-radius: 11px;
  text-align: left;
}
.notice-icon {
  color: #b79b62;
}
.notice-icon .icon {
  width: 18px;
}
.mobile-notice > span:nth-child(2) {
  flex: 1;
}
.mobile-notice strong {
  display: block;
  font-size: 11px;
  font-weight: 550;
  color: #8a774e;
}
.mobile-notice small {
  display: block;
  font-size: 9px;
  color: #b0a07e;
  margin-top: 3px;
}
.mobile-notice > .icon {
  width: 14px;
  color: #baa87e;
}
.mobile-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 23px 0 12px;
}
.mobile-section-heading h2 {
  font-size: 15px;
  color: #3c5e51;
}
.mobile-section-heading a,
.mobile-section-heading > span {
  font-size: 10px;
  color: #8ba396;
  display: flex;
  gap: 4px;
  align-items: center;
}
.mobile-section-heading .icon {
  width: 12px;
}
.trip-card {
  border: 1px solid #e4ece7;
  background: #fff;
  border-radius: 14px;
  padding: 17px;
  margin-bottom: 15px;
  display: block;
  width: 100%;
}
.trip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.trip-top > span:first-child {
  font-size: 11px;
  color: #7e9489;
}
.trip-top .badge {
  font-size: 9px;
}
.trip-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #45695a;
  margin: 14px 0;
}
.trip-date .icon {
  width: 13px;
  height: 13px;
  color: #7c9c89;
}
.trip-date > span {
  margin-left: auto;
  font-size: 9px;
  color: #9bafa2;
}
.mobile-route {
  position: relative;
  margin: 17px 0 19px;
}
.mobile-route:before {
  content: "";
  position: absolute;
  left: 3px;
  top: 10px;
  bottom: 28px;
  border-left: 1px dashed #c8dcd3;
}
.mobile-route > div {
  position: relative;
  padding-left: 21px;
  margin: 14px 0;
}
.mobile-route .dot {
  position: absolute;
  left: 0;
  top: 8px;
  border: 2px solid #fff;
  box-sizing: content-box;
  transform: translateX(-2px);
}
.mobile-route strong {
  font-size: 14px;
  font-weight: 550;
  color: #345d4c;
  display: block;
}
.mobile-route small {
  display: block;
  color: #a0b1a6;
  font-size: 9px;
  margin-top: 2px;
}
.trip-resource {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0;
  border-top: 1px dashed #e6eee8;
  border-bottom: 1px dashed #e6eee8;
  color: #7a9689;
  font-size: 9px;
}
.trip-resource .icon {
  width: 14px;
  height: 14px;
}
.trip-resource b {
  margin-left: auto;
  font-weight: 400;
  white-space: nowrap;
}
.trip-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
}
.trip-bottom > strong {
  font-size: 18px;
  color: #287b61;
  font-weight: 600;
}
.trip-bottom > strong small {
  font-size: 9px;
  font-weight: 400;
  color: #99ada0;
}
.trip-bottom .btn {
  font-size: 10px;
  padding: 7px 10px;
}
.mobile-service-note {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: #a4b9aa;
  margin: 24px 0 6px;
}
.mobile-service-note .icon {
  width: 13px;
  height: 13px;
}
.mobile-nav {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #e8efea;
  background: #ffffffed;
  backdrop-filter: blur(12px);
  padding: 13px 10px 21px;
  position: relative;
  z-index: 3;
}
.mobile-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #a0b4a9;
  position: relative;
  font-size: 9px;
  min-width: 55px;
}
.mobile-nav a.active {
  color: #2d896e;
}
.mobile-nav .icon {
  width: 21px;
  height: 21px;
}
.mobile-nav i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #dca561;
  position: absolute;
  right: 13px;
  top: 0;
}
.mobile-page-title {
  margin: 3px 0 19px;
}
.mobile-page-title h1 {
  font-size: 25px;
  color: #365d4e;
}
.mobile-page-title p {
  font-size: 11px;
  color: #9aafa2;
  margin-top: 6px;
}
.mobile-tabs {
  display: flex;
  gap: 1px;
  justify-content: space-between;
  margin-bottom: 17px;
}
.mobile-tabs .tab {
  font-size: 10px;
  padding: 8px 9px;
}
.mobile-detail-intro {
  margin: 3px 0 22px;
}
.mobile-detail-intro h1 {
  font-size: 24px;
  margin: 12px 0 7px;
  color: #2c6753;
}
.mobile-detail-intro p {
  font-size: 11px;
  color: #90a99a;
  line-height: 1.8;
}
.detail-card h3 {
  font-size: 13px;
  margin-bottom: 17px;
  color: #426b55;
}
.detail-section-label {
  font-size: 12px;
  color: #5c826b;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detail-card .kv {
  font-size: 10px;
  margin: 14px 0;
}
.detail-card .kv > b {
  max-width: 210px;
  overflow-wrap: anywhere;
  color: #587967;
}
.detail-card .kv small {
  display: inline;
  font-size: 9px;
}
.detail-card .hint {
  font-size: 9px;
  margin-bottom: 0;
  color: #a1b0a6;
}
.detail-card .kv .price-teal {
  color: #2a8a68;
  font-size: 17px;
}
.mobile-car-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 17px;
}
.large-icon {
  width: 43px;
  height: 43px;
  background: #edf6ef;
  color: #6a9d7c;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 11px;
}
.mobile-car-line b {
  font-size: 12px;
  font-weight: 550;
}
.mobile-car-line small {
  display: block;
  color: #94ac9b;
  font-size: 10px;
  margin-top: 3px;
}
.driver-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px dashed #e2ece4;
  padding-top: 15px;
}
.driver-contact b {
  font-size: 12px;
  font-weight: 500;
}
.driver-contact small {
  display: block;
  font-size: 10px;
  color: #91aa9b;
}
.driver-contact > .icon-btn {
  margin-left: auto;
}
.mobile-confirm-form {
  background: #fff;
  border: 1px solid #e2eee6;
  border-radius: 14px;
  padding: 18px;
}
.mobile-confirm-form h3 {
  font-size: 13px;
  margin-bottom: 15px;
}
.mobile-confirm-form label:not(.check-label) {
  margin-bottom: 12px;
}
.mobile-confirm-form .check-label {
  font-size: 10px;
}
.mobile-confirm-form .hint {
  font-size: 9px;
}
.mobile-confirm-form .btn {
  font-size: 12px;
}
.mobile-content > .text-btn.full {
  font-size: 10px;
  margin-top: 18px;
}
.confirmation-success {
  background: #e7f5ec;
  color: #2c805a;
  padding: 18px;
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
}
.confirmation-success small {
  display: block;
  color: #80a28c;
  margin-top: 5px;
  font-size: 10px;
}
.bill-hero {
  background: linear-gradient(120deg, #175c65, #268977);
  padding: 24px;
  border-radius: 15px;
  color: #fff;
  margin: 22px 0;
}
.bill-hero > span {
  font-size: 11px;
  color: #b3d6c9;
}
.bill-hero > strong {
  display: block;
  font-size: 37px;
  font-weight: 550;
  letter-spacing: -1px;
  margin: 6px 0 10px;
}
.bill-hero > strong small {
  font-size: 19px;
  margin-right: 4px;
}
.bill-hero p {
  font-size: 9px;
  color: #afd3c3;
}
.bill-card {
  text-align: left;
  cursor: pointer;
  color: #527461;
}
.bill-card:hover {
  border-color: #83b79b;
}
.bill-card .trip-top > b {
  font-size: 11px;
  flex: 1;
  font-weight: 550;
}
.bill-card > small {
  font-size: 8px;
  color: #a4b5a8;
}
.bill-card-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 17px 0 12px;
}
.bill-card-amount > span {
  font-size: 10px;
}
.bill-card-amount b {
  font-size: 20px;
  margin-left: 5px;
  font-weight: 550;
}
.bill-card-amount > .icon {
  width: 15px;
  color: #91ad99;
}
.bill-card-foot {
  border-top: 1px solid #edf2ed;
  padding-top: 12px;
  font-size: 9px;
  color: #a0b0a1;
  display: flex;
  justify-content: space-between;
}
.bill-card-foot > span {
  color: #609b79;
}
.bill-detail-heading {
  text-align: center;
  padding: 15px 0 25px;
}
.bill-detail-heading h1 {
  font-size: 35px;
  color: #2e7557;
  margin: 8px 0;
}
.bill-detail-heading p {
  font-size: 10px;
  color: #91aa9a;
}
.bill-line {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 0;
  border-bottom: 1px solid #edf2ed;
  font-size: 11px;
}
.bill-line b,
.bill-line strong {
  font-weight: 500;
}
.bill-line small {
  display: block;
  font-size: 9px;
  color: #a0b0a0;
  margin-top: 5px;
}
.booking-form label {
  margin-bottom: 13px;
}
.booking-form .form-grid {
  gap: 10px;
  margin: 0;
}
.booking-form .form-grid input {
  padding: 9px 6px;
  font-size: 10px;
}
.booking-form .hint {
  font-size: 10px;
}
.booking-form .detail-card {
  padding: 17px;
}
.booking-form .btn {
  font-size: 12px;
}
.profile-hero {
  text-align: center;
  padding: 16px 0;
}
.profile-hero .avatar {
  width: 70px;
  height: 70px;
  font-size: 28px;
  background: linear-gradient(120deg, #d8ecde, #dceced);
  color: #558c74;
}
.profile-hero h1 {
  font-size: 23px;
  margin: 12px 0 5px;
}
.profile-hero p {
  font-size: 11px;
  color: #8ba18f;
}
.profile-hero .badge {
  margin-top: 12px;
}
.profile-stats {
  display: flex;
  justify-content: space-around;
  margin: 16px 0 26px;
}
.profile-stats > div {
  text-align: center;
}
.profile-stats b {
  font-size: 23px;
  font-weight: 500;
  color: #3c7b5c;
}
.profile-stats span {
  display: block;
  font-size: 9px;
  color: #98ac9e;
}
.profile-menu {
  padding: 3px 17px;
}
.profile-menu > a,
.profile-menu > button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 18px 0;
  border: none;
  border-bottom: 1px solid #eef3ef;
  background: transparent;
  color: #5f806a;
  font-size: 12px;
}
.profile-menu > button:last-child {
  border-bottom: 0;
}
.profile-menu .icon:first-child {
  color: #80a18c;
  width: 18px;
}
.profile-menu .icon:last-child {
  margin-left: auto;
  color: #b0c3b5;
  width: 14px;
}
.mobile-content > .btn.full {
  font-size: 12px;
}
.mobile-stage .empty {
  padding: 35px 10px;
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 1550px) {
  .main-content {
    padding-top: 40px;
  }
  .welcome-banner {
    min-height: 230px;
  }
  .schedule-row {
    padding: 25px 0;
  }
  .stat-card {
    padding: 24px;
  }
  .dashboard-columns {
    grid-template-columns: 1.8fr 1fr;
  }
}
@media (max-width: 1200px) {
  .sidebar {
    width: 210px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .main-shell {
    margin-left: 210px;
  }
  .main-content {
    padding: 25px;
  }
  .topbar {
    padding: 0 25px;
  }
  .dashboard-columns {
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
    gap: 16px;
  }
  .schedule-row {
    gap: 8px;
  }
  .schedule-info strong {
    font-size: 10px;
  }
  .schedule-info p {
    font-size: 10px;
  }
  .stat-card {
    padding: 15px;
  }
  .stats-grid {
    gap: 12px;
  }
  .stat-card strong {
    font-size: 26px;
  }
  .page-head h1 {
    font-size: 25px;
  }
  .nav-item.active:before {
    left: -15px;
  }
  .route-art {
    width: 38%;
    right: 0;
  }
  .mobile-stage {
    gap: 50px;
  }
  .mobile-showcase {
    width: 350px;
  }
}
@media (max-width: 1000px) {
  .sidebar {
    width: 185px;
  }
  .main-shell {
    margin-left: 185px;
  }
  .brand {
    font-size: 22px;
    gap: 7px;
  }
  .brand-en {
    font-size: 6px;
  }
  .brand-mark {
    width: 35px;
    height: 35px;
  }
  .workspace {
    font-size: 10px;
  }
  .workspace small {
    font-size: 8px;
  }
  .nav-caption span {
    display: none;
  }
  .nav-item {
    font-size: 12px;
    padding: 11px 9px;
  }
  .main-content {
    padding: 22px;
  }
  .dashboard-columns {
    grid-template-columns: 1fr;
  }
  .flow {
    padding-bottom: 23px;
  }
  .page-head {
    align-items: flex-start;
  }
  .date-pill {
    font-size: 9px;
    padding: 8px;
  }
  .client-link {
    display: none;
  }
  .top-actions {
    gap: 12px;
  }
  .desktop-footer {
    padding: 20px;
    font-size: 8px;
  }
  .rate-grid {
    gap: 15px;
  }
  .rate-body {
    padding: 17px;
  }
  .cost-line {
    flex-wrap: wrap;
  }
  .mobile-stage {
    gap: 40px;
    padding: 30px;
  }
  .phone-frame {
    height: min(850px, calc(100dvh - 60px));
  }
  .mobile-showcase {
    width: 300px;
  }
  .showcase-copy h1 {
    font-size: 36px;
  }
}
@media (max-width: 760px) {
  .sidebar {
    width: 66px;
    padding: 22px 9px;
  }
  .brand {
    padding: 0;
    justify-content: center;
  }
  .sidebar .brand > span:last-child,
  .workspace,
  .nav-caption,
  .nav-item:not(.active) .nav-count,
  .nav-item.active .nav-count,
  .client-promo,
  .reset-btn,
  .account {
    display: none;
  }
  .sidebar nav {
    margin-top: 37px;
  }
  .nav-item {
    font-size: 0;
    justify-content: center;
    padding: 13px 0;
    margin: 8px 0;
  }
  .nav-item .icon {
    width: 21px;
    height: 21px;
  }
  .nav-item.active:before {
    left: -9px;
  }
  .main-shell {
    margin-left: 66px;
  }
  .topbar {
    height: 60px;
    padding: 0 18px;
  }
  .breadcrumb {
    font-size: 10px;
  }
  .main-content {
    padding: 20px 16px;
  }
  .page-head {
    flex-wrap: wrap;
    gap: 14px;
  }
  .page-head h1 {
    font-size: 23px;
  }
  .page-head p {
    font-size: 11px;
  }
  .eyebrow {
    font-size: 8px;
  }
  .head-actions {
    width: 100%;
  }
  .head-actions .date-pill {
    width: 100%;
    justify-content: center;
  }
  .welcome-banner {
    padding: 23px;
    min-height: 195px;
  }
  .welcome-banner h2 {
    font-size: 24px;
  }
  .welcome-banner p {
    font-size: 10px;
  }
  .route-art {
    opacity: 0.25;
    width: 75%;
    right: -50px;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
  }
  .stat-card strong {
    font-size: 25px;
  }
  .stat-card p {
    font-size: 8px;
  }
  .panel-head {
    padding: 18px;
  }
  .schedule {
    padding: 0 17px 12px;
  }
  .schedule-row {
    flex-wrap: wrap;
  }
  .schedule-info {
    min-width: 160px;
  }
  .schedule-row > .btn {
    margin-left: auto;
  }
  .schedule-info > div {
    gap: 4px;
  }
  .schedule-info strong {
    font-size: 11px;
  }
  .schedule-info .badge {
    font-size: 8px;
  }
  .flow {
    gap: 9px;
    padding: 10px 18px 25px;
  }
  .flow > div + div:before {
    display: none;
  }
  .flow b {
    font-size: 9px;
  }
  .flow small {
    font-size: 8px;
  }
  .desktop-footer {
    flex-direction: column;
    gap: 6px;
  }
  .rate-grid {
    grid-template-columns: 1fr;
  }
  .order-summary {
    gap: 12px;
    font-size: 9px;
    flex-wrap: wrap;
  }
  .tabs {
    overflow: auto;
    width: 100%;
  }
  .list-toolbar {
    padding: 12px;
  }
  .tab {
    font-size: 10px;
    padding: 8px 10px;
  }
  .toolbar-right {
    width: 100%;
  }
  .search-field {
    flex: 1;
  }
  .search-field input {
    width: 100%;
  }
  .finance-stats {
    padding: 22px 17px;
    gap: 13px;
    flex-wrap: wrap;
  }
  .finance-stats strong {
    font-size: 20px;
  }
  .finance-stats strong small {
    font-size: 12px;
  }
  .finance-stats span {
    font-size: 9px;
  }
  .mobile-stage {
    display: block;
    padding: 0;
    background: #f3f7fc;
  }
  .mobile-showcase {
    display: none;
  }
  .phone-frame {
    width: 100%;
    max-width: 480px;
    margin: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .mobile-content {
    padding: 22px 22px 30px;
  }
  .mobile-nav {
    position: relative;
    width: 100%;
    padding-bottom: max(17px, env(safe-area-inset-bottom));
    min-height: 77px;
  }
  .mobile-top {
    display: none;
  }
  .mobile-header {
    position: relative;
    z-index: 6;
    border-bottom: 1px solid #edf3ef;
    height: 62px;
    background: #fffffff2;
    backdrop-filter: blur(10px);
  }
  .mobile-hero {
    height: 223px;
  }
  .mobile-hero .car-art {
    width: 260px;
    right: -32px;
  }
  .mobile-greeting h1 {
    font-size: 23px;
  }
  .mobile-shortcuts {
    margin: 25px 0;
  }
  .mobile-shortcuts > a,
  .mobile-shortcuts > button {
    font-size: 11px;
  }
  .mobile-hero p {
    font-size: 9px;
  }
  .mobile-hero .btn {
    font-size: 12px;
  }
  .mobile-notice strong {
    font-size: 12px;
  }
  .mobile-notice small {
    font-size: 10px;
  }
  .trip-top .badge {
    font-size: 10px;
  }
  .trip-top > span:first-child {
    font-size: 12px;
  }
  .trip-date {
    font-size: 11px;
  }
  .mobile-route strong {
    font-size: 15px;
  }
  .trip-resource {
    font-size: 10px;
  }
  .trip-bottom .btn {
    font-size: 11px;
  }
  .mobile-service-note {
    font-size: 10px;
  }
  .modal-backdrop {
    padding: 12px;
  }
  .modal {
    max-height: calc(100dvh - 24px);
    border-radius: 13px;
  }
  .modal-head {
    padding: 17px;
  }
  .modal-head h2 {
    font-size: 18px;
  }
  .modal-body {
    padding: 18px;
  }
  .modal-footer {
    padding: 13px 16px;
    flex-wrap: wrap;
    gap: 7px;
  }
  .modal-footer .btn {
    font-size: 11px;
    padding: 8px 10px;
  }
  .form-grid {
    gap: 12px;
  }
  .sheet-heading h2 {
    font-size: 16px;
  }
  .sheet-heading .brand-mark {
    display: none;
  }
  .sheet-subtitle {
    font-size: 7px;
  }
  .sheet-route {
    padding: 15px;
    gap: 7px;
  }
  .sheet-route h3 {
    font-size: 13px;
  }
  .sheet-details {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .sheet-details > div {
    padding: 8px 0;
  }
  .sheet-total > strong {
    font-size: 21px;
  }
  .confirmation-sheet {
    padding: 0;
  }
  .modal .footer-spacer {
    display: none;
  }
  #toast {
    bottom: 95px;
    font-size: 12px;
    width: max-content;
    max-width: 90%;
  }
  .detail-card .kv {
    font-size: 11px;
  }
  .booking-form .form-grid {
    grid-template-columns: 1fr;
  }
  .booking-form .form-grid input {
    font-size: 12px;
    padding: 10px;
  }
  .head-actions input[type="month"] {
    width: auto;
  }
}
@media print {
  body {
    background: white !important;
  }
  .sidebar,
  .topbar,
  .desktop-footer,
  #app,
  #toast,
  .modal-head,
  .modal-footer {
    display: none !important;
  }
  #overlay .modal-backdrop {
    position: static;
    background: none;
    padding: 0;
    display: block;
    backdrop-filter: none;
  }
  #overlay .modal {
    border: 0;
    box-shadow: none;
    max-height: none;
    width: 100%;
    max-width: none;
  }
  #overlay .modal-body {
    overflow: visible;
    padding: 0;
  }
  .confirmation-sheet {
    padding: 15px;
  }
  .confirmation-sheet,
  .modal-body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .sheet-heading {
    margin-top: 10px;
  }
  .modal-body .btn,
  .form-error {
    display: none !important;
  }
  .modal-body table {
    white-space: normal;
  }
  .modal-body .table-wrap {
    overflow: visible;
  }
  .modal-body input {
    border: 0;
  }
  .receipt-list {
    break-inside: avoid;
  }
  @page {
    size: A4;
    margin: 15mm;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Blue for navigation and primary actions; green for service and confirmation. */
.nav-item.active {
  color: #1e5fc5;
  background: #e7efff;
}
.nav-item.active:before {
  background: #2b6ee2;
}
.nav-count {
  color: #1e5fc5;
  background: #d4e4ff;
}
.btn.primary {
  background: #2469d7;
  border-color: #2469d7;
  box-shadow: 0 3px 9px #2469d71a;
}
.btn.primary:hover {
  background: #1958ba;
  border-color: #1958ba;
}
.mobile-confirm-form .btn.primary {
  background: #14866b;
  border-color: #14866b;
}
.stat-icon.blue {
  background: #e5eeff;
  color: #2869d5;
}
.stat-icon.teal {
  background: #dff6eb;
  color: #16865e;
}
.mobile-shortcuts > a:first-child span {
  background: #e2ecff;
  color: #2869d5;
}
.mobile-shortcuts > a:nth-child(2) span {
  background: #dff5eb;
  color: #14866b;
}
.mobile-shortcuts > button span {
  background: #e4f0ff;
  color: #347ac1;
}
.mobile-nav a.active {
  color: #2567cf;
}
.client-promo {
  background: linear-gradient(120deg, #e1ecff, #e2f5e9);
}
.eyebrow {
  color: #577da8;
}

.brand {
  font-size: 23px;
}
.brand-en {
  letter-spacing: 1.15px;
}
@media (min-width: 761px) and (max-width: 1000px) {
  .sidebar .brand {
    font-size: 18px;
  }
}

/* Actual customer confirmation form, matched to the existing system. */
.modal.confirmation-modal {
  width: 980px;
  max-height: calc(100dvh - 40px);
}
.confirmation-modal .modal-body {
  padding: 12px 16px;
  overflow: hidden;
  min-height: 0;
}
.confirmation-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--muted);
}
.confirmation-toolbar .btn {
  margin-left: auto;
}
.confirmation-viewport {
  height: max(180px, calc(100dvh - 265px));
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  background: #f4f6f8;
}
.confirmation-viewport[data-fit="width"] {
  height: auto;
}
.confirmation-frame {
  position: relative;
  flex-shrink: 0;
}
.actual-confirmation-sheet {
  box-sizing: border-box;
  width: 880px;
  transform-origin: top left;
  padding: 20px 28px;
  background: #fff;
  color: #202124;
  font-family: "Songti SC", SimSun, serif;
  line-height: 1.45;
}
.actual-sheet-header {
  margin-bottom: 10px;
  text-align: center;
}
.actual-sheet-header h1 {
  margin: 0;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: #202124;
}
.actual-sheet-subtitle {
  margin-top: 2px;
  font-size: 12px;
}
.actual-order-number {
  margin-top: 4px;
  text-align: right;
  font-size: 13px;
}
.actual-form-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  line-height: 1.45;
  white-space: normal;
}
.actual-form-table th,
.actual-form-table td {
  border: 1px solid #777;
  padding: 4px 8px;
  overflow-wrap: anywhere;
  white-space: normal;
  vertical-align: middle;
  font-size: 14px;
  color: #202124;
  height: auto;
  text-align: left;
}
.actual-form-table th {
  background: #fafafa;
  font-weight: 500;
}
.actual-form-table td {
  background: #fff;
}
.actual-form-table td > div {
  white-space: pre-wrap;
}
.actual-sheet-notes {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
}
.actual-sheet-notes p {
  margin: 0;
}
.confirmation-viewport.document-zoomed {
  display: block;
  overflow: auto;
  overscroll-behavior: contain;
}
.mobile-document-preview {
  padding: 8px;
  margin-bottom: 18px;
  border: 1px solid #e0e6ec;
  border-radius: 10px;
  background: #fff;
}
.mobile-document-preview > .btn {
  margin-top: 8px;
  font-size: 11px;
}
@media (max-width: 760px) {
  .confirmation-modal .modal-body {
    padding: 10px;
  }
  .confirmation-toolbar {
    flex-wrap: wrap;
    gap: 7px;
  }
  .confirmation-toolbar > span:not(.badge) {
    font-size: 9px;
  }
  .confirmation-viewport {
    height: max(180px, calc(100dvh - 245px));
  }
}
@media print {
  .confirmation-toolbar {
    display: none !important;
  }
  .confirmation-modal .modal-body {
    overflow: visible;
    padding: 0;
  }
  .confirmation-viewport,
  .confirmation-viewport.document-zoomed {
    display: block;
    height: auto;
    overflow: visible;
    background: #fff;
  }
  .confirmation-frame {
    width: 100% !important;
    height: auto !important;
  }
  .actual-confirmation-sheet {
    transform: none !important;
    zoom: var(--document-print-scale, 0.79);
    break-inside: avoid;
    margin: 0;
  }
  @page {
    size: A4 portrait;
    margin: 12mm;
  }
}
.actual-form-table tbody tr:last-child th,
.actual-form-table tbody tr:last-child td {
  border-bottom: 1px solid #777;
}
@media print {
  body.modal-open {
    overflow: visible !important;
  }
}

.finance-tabs {
  margin-bottom: 20px;
}
.settlement-view-tabs,
.order-type-tabs {
  margin: 0 0 18px;
}
.order-type-tabs .tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.order-type-tabs .tab small {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #edf4f8;
  color: #527083;
  text-align: center;
  font-size: 11px;
}
.order-type-tabs .tab.selected small {
  background: #dcebf7;
  color: #2368ae;
}
.order-finance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.order-finance-panel {
  border: 1px solid var(--line, #dce7ed);
  border-radius: 12px;
  padding: 20px;
  background: #f8fbfd;
}
.order-finance-panel h3 {
  margin: 0 0 18px;
  color: #175584;
}
.order-finance-record {
  border-bottom: 1px solid #dce7ed;
  padding: 12px 0 18px;
  margin-bottom: 14px;
}
.order-finance-record small,
.settlement-heading small {
  display: block;
  margin-top: 8px;
}
.order-finance-panel details {
  margin-top: 18px;
}
@media (max-width: 700px) {
  .order-finance-grid {
    grid-template-columns: 1fr;
  }
}

.order-settlement-tabs {
  margin: -4px 0 22px;
  border-bottom: 1px solid #dce7ed;
}
.order-settlement-tabs .tab {
  min-width: 130px;
  padding: 12px 24px;
}
.settlement-paper {
  color: #111;
  background: #fff;
  font-family: SimSun, "Songti SC", serif;
  padding: 18px 0;
}
.settlement-paper h2 {
  color: #111;
  text-align: center;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 3px;
  margin: 0 0 16px;
}
.sheet-number {
  font-size: 11px;
  text-align: right;
  margin-bottom: 8px;
  word-break: break-all;
}
.actual-settlement-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  white-space: normal;
  font-size: 14px;
}
.actual-settlement-table th,
.actual-settlement-table td {
  border: 1px solid #242424;
  padding: 10px 6px;
  text-align: center;
  background: #fff;
  color: #111;
  font-weight: 400;
  white-space: normal;
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.actual-settlement-table tbody tr:hover {
  background: #fff;
}
.actual-settlement-table input {
  display: inline-block;
  font: inherit;
  color: #111;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 29px;
  padding: 2px 3px;
  border: 0;
  border-bottom: 1px dashed #a7bac6;
  border-radius: 0;
  background: #f6faff;
  text-align: center;
  box-shadow: none;
}
.actual-settlement-table input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.actual-settlement-table input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.actual-settlement-table input[name="doc-tripDays"],
.actual-settlement-table input[name="doc-fieldDays"] {
  width: 65px;
}
.actual-settlement-table .sheet-section {
  font-size: 17px;
  padding: 15px;
  letter-spacing: 6px;
}
.sheet-unit {
  display: inline-block;
  font-size: 12px;
  margin-top: 5px;
}
.sheet-price-row td {
  height: 68px;
}
.sheet-quantity-row td {
  height: 54px;
}
.sheet-amount-row td {
  height: 50px;
}
.sheet-signature-row {
  height: 185px;
}
.sheet-signature-row td > div {
  text-align: left;
  padding: 8px 2px;
}
.sheet-signature-row td > div:last-child {
  text-align: right;
}
.sheet-signature-row input {
  width: 105px;
}
.sheet-signature-space {
  height: 115px;
}
.sheet-remark {
  height: 80px;
}
.sheet-nonprint {
  margin-top: 12px;
  font-family: var(--font, sans-serif);
}
@media (max-width: 700px) {
  .settlement-paper {
    overflow-x: auto;
  }
  .actual-settlement-table,
  .sheet-number {
    min-width: 640px;
  }
}
@media print {
  .settlement-document-modal .modal-body > :not(form),
  .settlement-document-modal #settlement-form > :not(.settlement-paper),
  .sheet-nonprint {
    display: none !important;
  }
  .settlement-paper {
    padding: 0;
    overflow: visible;
  }
  .actual-settlement-table {
    font-size: 12pt;
    min-width: 0;
  }
  .actual-settlement-table input {
    background: #fff;
    border: none;
  }
  .sheet-number {
    min-width: 0;
  }
  .settlement-paper {
    break-inside: avoid;
  }
}
.sheet-price-row input {
  width: 62px;
}
.sheet-quantity-row input {
  width: 52px;
}
.sheet-price-row .sheet-unit,
.sheet-quantity-row .sheet-unit {
  margin-top: 0;
  margin-left: 3px;
}
.settlement-history {
  margin-bottom: 16px;
  color: #526c7d;
}
.settlement-history button {
  display: block;
}
.sheet-signature-row td:nth-child(2) > div:last-child {
  text-align: left;
}
.group-list {
  margin-bottom: 22px;
}
.long-order-entry {
  border-top: 1px solid #e2eaf0;
}
.long-order-entry:first-of-type {
  border-top: 0;
}
.group-row {
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 76px;
  padding: 14px 20px;
  list-style: none;
  cursor: pointer;
}
.group-row::-webkit-details-marker {
  display: none;
}
.group-chevron {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 6px;
  background: #eef5f7;
  color: #277a76;
  transition: transform 160ms ease;
}
.group-chevron .icon {
  width: 15px;
  height: 15px;
}
.long-order-entry[open] .group-chevron {
  transform: rotate(180deg);
}
.group-customer {
  flex: 1 1 270px;
  min-width: 220px;
}
.group-count,
.group-status,
.group-money,
.group-summary-actions {
  flex: 0 0 auto;
}
.group-count {
  color: #49616e;
  font-size: 13px;
}
.group-row small {
  display: block;
  margin-top: 6px;
  color: #758c98;
}
.group-money {
  min-width: 150px;
  color: #24445b;
  font-size: 13px;
  font-weight: 600;
}
.group-summary-actions {
  display: inline-flex;
  align-items: center;
}
.group-summary-actions .btn {
  white-space: nowrap;
}
.long-order-entry[open] .group-row {
  background: #fbfdfd;
}
.group-child-table {
  padding: 0 20px 14px;
  border-bottom: 1px solid #e2eaf0;
}
.group-child-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 0 0 8px;
  color: #385767;
  font-size: 12px;
}
.group-child-heading span {
  color: #758c98;
  font-size: 11px;
}
.group-child-table table {
  min-width: 900px;
}
.group-child-table th,
.group-child-table td {
  padding: 11px 12px;
}
.group-child-table th:last-child,
.group-child-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  background: #fff;
}
.group-child-table th:last-child {
  background: #f8fafb;
}
.split-preview {
  max-height: 350px;
  overflow: auto;
}
.split-summary {
  padding: 14px;
  background: #edf7fa;
  color: #175584;
}
.profit-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 4px;
  padding: 16px;
  border: 1px solid #dce7ed;
  border-radius: 8px;
  background: #f7fbfc;
}
.profit-strip div {
  min-width: 0;
}
.profit-strip span,
.profit-strip strong {
  display: block;
}
.profit-strip span {
  color: #69818e;
  font-size: 13px;
}
.profit-strip strong {
  margin-top: 7px;
  color: #175584;
  font-size: 18px;
}
.profit-strip .negative {
  color: #b5473c;
}
.profit-note {
  margin: 6px 0 16px;
  font-size: 12px;
}
.document-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}
.document-category {
  display: grid;
  grid-template-columns: 34px auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  min-width: 150px;
  padding: 14px;
  border: 1px solid #dce7ed;
  border-radius: 8px;
  background: white;
  color: #24445b;
  text-align: left;
}
.document-category span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #e8f4f3;
  color: #1e7d78;
}
.document-category small {
  color: #718793;
}
.file-picker {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px dashed #a8bbc5;
  border-radius: 8px;
  color: #49616e;
}
.file-picker input {
  max-width: 100%;
}
.full-field {
  grid-column: 1/-1;
}
@media (max-width: 900px) {
  .profit-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .analytics-grid {
    gap: 12px;
  }
  .donut-layout {
    gap: 16px;
    padding-right: 12px;
    padding-left: 12px;
  }
  .donut-chart {
    width: 126px;
    height: 126px;
    flex-basis: 126px;
  }
  .donut-chart > div {
    width: 78px;
    height: 78px;
  }
}
@media (max-width: 700px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }
  .chart-wide {
    grid-column: auto;
  }
  .analytics-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .analytics-kpis .stat-card {
    min-width: 0;
    padding: 14px;
  }
  .analytics-kpis .stat-card strong {
    font-size: 20px;
  }
  .stats-month-control {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .stats-month-control input {
    width: 100%;
  }
  .donut-layout {
    justify-content: space-around;
    gap: 12px;
  }
  .donut-chart {
    width: 116px;
    height: 116px;
    flex-basis: 116px;
  }
  .donut-chart > div {
    width: 72px;
    height: 72px;
  }
  .horizontal-bars {
    padding-right: 14px;
    padding-left: 14px;
  }
  .horizontal-bars .chart-bar-item {
    grid-template-columns: minmax(78px, 1fr) minmax(58px, 1.5fr) auto;
    gap: 8px;
  }
  .group-row {
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 14px 12px;
  }
  .group-customer {
    flex-basis: calc(100% - 40px);
    min-width: 0;
  }
  .group-count {
    margin-left: 36px;
  }
  .group-money {
    min-width: 0;
    margin-left: auto;
  }
  .group-status {
    order: 3;
  }
  .group-summary-actions {
    margin-left: auto;
  }
  .group-child-table {
    padding-right: 12px;
    padding-left: 12px;
  }
}
.order-file-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #dce7ed;
}
.order-file-block > h3 {
  margin: 0 0 14px;
  color: #24445b;
}
.order-files-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.order-file-section {
  min-width: 0;
  border: 1px solid #dce7ed;
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}
.order-file-section .panel-head {
  align-items: center;
}
.order-file-section .panel-head h3 {
  margin: 0;
  font-size: 16px;
}
.order-file-section .panel-head p {
  margin: 5px 0 0;
  font-size: 12px;
}
.order-file-section .empty {
  padding: 20px 8px;
}
.order-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #e7edf1;
}
.order-file-row > div {
  flex: 1;
  min-width: 0;
}
.order-file-row > div > strong,
.order-file-row small {
  display: block;
  overflow-wrap: anywhere;
}
.order-file-row small {
  margin-top: 5px;
  color: #718793;
}
@media (max-width: 760px) {
  .order-files-grid {
    grid-template-columns: 1fr;
  }
}

.order-change-panel { margin: 20px 0; padding: 18px; border: 1px solid #dbe8ee; border-radius: 10px; background: #f8fbfd; }
.order-change-panel h3 { margin-bottom: 12px; }
.order-change-panel h3:not(:first-child) { margin-top: 18px; }
.change-history { padding: 12px 0; border-top: 1px solid #dfe8ee; }
.change-history summary { cursor: pointer; font-size: 13px; color: #22677b; }
.change-history p, .change-preview p { margin: 8px 0; font-size: 12px; overflow-wrap: anywhere; }
.change-preview { padding: 14px 0; border-bottom: 1px solid #dfe8ee; }
.change-warning { padding: 8px 12px; border-radius: 6px; background: #fff3db; color: #8c6424; }
.change-adjustment { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #dfe8ee; }
.change-adjustment small { display: block; color: #718793; }
.driver-settlement-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.driver-settlement-choices > span { font-size: 12px; color: #718793; margin-right: 8px; }
.group-summary-actions { gap: 8px; }
@media (max-width: 700px) { .order-change-panel { padding: 12px; } .change-adjustment { flex-wrap: wrap; } }

.confirmation-modal.has-order-changes .modal-body { overflow: auto; }