:root {
  --bg: #eef4f1;
  --panel: rgba(255, 255, 255, 0.90);
  --panel-solid: #ffffff;
  --ink: #15231f;
  --muted: #63746f;
  --line: #d7e3df;
  --primary: #0b7a68;
  --primary-2: #1f6f8b;
  --cyan: #1ba6a6;
  --danger: #b4232a;
  --warning: #b7791f;
  --success: #168a5f;
  --nav: #101b18;
  --gold: #b58b3b;
  --shadow: 0 18px 42px rgba(21, 35, 31, 0.09);
  --glow: 0 0 0 1px rgba(11, 122, 104, 0.10), 0 18px 48px rgba(11, 122, 104, 0.14);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, "Microsoft YaHei", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  scroll-behavior: smooth;
}

[hidden] {
  display: none !important;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}

input:focus,
select:focus {
  outline: 3px solid rgba(15, 118, 110, 0.14);
  border-color: var(--primary);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.primary-btn,
.ghost-btn,
.danger-btn {
  border: 0;
  border-radius: 8px;
  padding: 12px 16px;
  font-weight: 900;
}

.primary-btn {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #0e9f8f);
  box-shadow: 0 14px 26px rgba(15, 118, 110, 0.22);
}

.primary-btn:hover {
  filter: brightness(0.96);
}

.primary-btn.small {
  width: auto;
  padding: 10px 14px;
}

.ghost-btn {
  color: var(--ink);
  background: #eef3f8;
}

.ghost-btn.small {
  padding: 10px 14px;
}

.danger-btn {
  color: #fff;
  background: var(--danger);
}

.danger-btn.small {
  padding: 10px 14px;
}

.ops-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
  background:
    radial-gradient(circle at 18% 10%, rgba(11, 122, 104, 0.16), transparent 24%),
    radial-gradient(circle at 88% 16%, rgba(181, 139, 59, 0.12), transparent 28%),
    linear-gradient(135deg, #eef4f1, #f8fbfa);
}

.ops-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(21, 35, 31, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 35, 31, 0.030) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.62), transparent 78%);
}

.ops-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 28px 22px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(16, 27, 24, 0.98), rgba(5, 17, 14, 0.98)),
    #101b18;
  overflow-y: auto;
  box-shadow: inset -1px 0 0 rgba(125, 211, 252, 0.12);
}

.ops-sidebar::after {
  content: "";
  position: absolute;
  top: 110px;
  right: 0;
  width: 2px;
  height: 220px;
  background: linear-gradient(180deg, transparent, #22d3ee, transparent);
  box-shadow: 0 0 18px rgba(27, 166, 166, 0.8);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 34px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 0 30px rgba(27, 166, 166, 0.22);
  font-weight: 950;
}

.brand-block strong {
  display: block;
  font-size: 20px;
}

.brand-block small,
.sidebar-status small {
  display: block;
  margin-top: 4px;
  color: #9aa8ba;
}

.ops-nav {
  display: grid;
  gap: 8px;
}

.ops-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 8px;
  color: #cbd5e1;
  text-decoration: none;
  font-weight: 800;
}

.ops-nav a span {
  color: #7dd3fc;
  color: #a7d8cf;
  font-size: 12px;
}

.ops-nav a.active,
.ops-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.ops-nav a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(181, 139, 59, 0.72);
}

.sidebar-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 0 7px rgba(16, 185, 129, 0.14);
  animation: pulse 1.8s infinite;
}

.ops-main {
  min-width: 0;
  padding: 28px;
}

.ops-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.ops-topbar h1 {
  margin: 0;
  font-size: 34px;
  letter-spacing: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ops-chip {
  padding: 10px 12px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 8px;
  color: #1d4ed8;
  background: rgba(219, 234, 254, 0.76);
  font-weight: 900;
}

.ops-chip.success {
  color: #047857;
  border-color: rgba(16, 185, 129, 0.20);
  background: rgba(220, 252, 231, 0.84);
}

.system-clock {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  font-weight: 900;
}

.ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: start;
}

.ops-content {
  display: grid;
  gap: 20px;
}

.command-hero,
.ops-panel,
.rail-card,
.metric-card {
  border: 1px solid rgba(215, 227, 223, 0.92);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.command-hero {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding: 28px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(10, 24, 20, 0.95), rgba(11, 122, 104, 0.78)),
    linear-gradient(90deg, #101b18, #0b7a68);
}

.command-hero::after {
  content: "";
  position: absolute;
  inset: auto -70px -120px auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.32);
  box-shadow: inset 0 0 44px rgba(167, 216, 207, 0.14);
}

.command-hero h2 {
  margin: 0 0 12px;
  font-size: 34px;
}

.command-hero p:not(.eyebrow) {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
}

.command-hero .eyebrow {
  color: rgba(255, 255, 255, 0.66);
}

.hero-signal {
  position: relative;
  min-width: 150px;
  min-height: 150px;
  display: grid;
  place-items: center;
  text-align: center;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.hero-tags span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 900;
}

.hero-signal strong {
  display: block;
  font-size: 42px;
}

.hero-signal small {
  display: block;
  color: rgba(255, 255, 255, 0.7);
}

.signal-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(125, 211, 252, 0.46);
  border-radius: 999px;
  animation: rotateRing 8s linear infinite;
}

.signal-ring::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #7dd3fc;
  box-shadow: 0 0 22px #a7d8cf;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.metric-card {
  padding: 18px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.metric-card:hover,
.ops-panel:hover,
.rail-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 54px rgba(16, 24, 40, 0.13);
}

.metric-card span {
  color: var(--muted);
  font-weight: 800;
}

.metric-card strong {
  display: block;
  margin-top: 12px;
  font-size: 34px;
  letter-spacing: 0;
}

.metric-card.premium {
  position: relative;
}

.metric-card.premium::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.12), transparent);
}

.metric-card.danger strong {
  color: var(--danger);
}

.trend {
  display: inline-block;
  margin-top: 12px;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.trend.up {
  color: var(--success);
}

.trend.down {
  color: var(--danger);
}

.trend.stable {
  color: var(--primary-2);
}

.insight-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr 0.8fr;
  gap: 14px;
}

.ops-panel,
.rail-card {
  padding: 20px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.panel-title.compact {
  align-items: flex-start;
}

.panel-title h2 {
  margin: 0;
  font-size: 22px;
}

.panel-badge {
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--primary);
  background: rgba(15, 118, 110, 0.10);
  font-size: 12px;
  font-weight: 900;
}

.revenue-chart {
  height: 210px;
  display: flex;
  align-items: end;
  gap: 12px;
  padding-top: 20px;
}

.revenue-chart span {
  position: relative;
  flex: 1;
  min-height: 28px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #06b6d4, #0f766e);
  box-shadow: 0 10px 24px rgba(6, 182, 212, 0.22);
  transition: height 0.35s ease;
}

.revenue-chart em {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.heat-map {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.heat-map span {
  aspect-ratio: 1;
  border-radius: 6px;
  background: #e2e8f0;
}

.heat-1 { background: rgba(15, 118, 110, 0.22) !important; }
.heat-2 { background: rgba(15, 118, 110, 0.38) !important; }
.heat-3 { background: rgba(37, 99, 235, 0.48) !important; }
.heat-4 { background: rgba(225, 29, 72, 0.56) !important; }

.risk-donut {
  --risk: 0deg;
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
  margin: 12px auto 0;
  border-radius: 999px;
  background: conic-gradient(var(--danger) var(--risk), #e5edf5 0deg);
  box-shadow: 0 12px 36px rgba(225, 29, 72, 0.16);
}

.map-panel {
  overflow: hidden;
}

.fleet-map {
  position: relative;
  height: 260px;
  border: 1px solid rgba(37, 99, 235, 0.10);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(37, 99, 235, 0.08)),
    radial-gradient(circle at 25% 35%, rgba(15, 118, 110, 0.18), transparent 18%),
    radial-gradient(circle at 70% 62%, rgba(37, 99, 235, 0.16), transparent 20%),
    #f8fbfd;
  overflow: hidden;
}

.fleet-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(100, 116, 139, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 116, 139, 0.10) 1px, transparent 1px);
  background-size: 34px 34px;
}

.map-node {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--primary-2);
  box-shadow: 0 0 0 10px rgba(37, 99, 235, 0.12), 0 0 22px rgba(37, 99, 235, 0.40);
}

.map-node.active {
  background: var(--success);
  box-shadow: 0 0 0 12px rgba(16, 185, 129, 0.14), 0 0 24px rgba(16, 185, 129, 0.42);
  animation: pulse 1.8s infinite;
}

.map-node.warning {
  background: var(--danger);
  box-shadow: 0 0 0 12px rgba(225, 29, 72, 0.14), 0 0 24px rgba(225, 29, 72, 0.42);
}

.node-a { left: 18%; top: 30%; }
.node-b { left: 48%; top: 48%; }
.node-c { left: 72%; top: 34%; }
.node-d { left: 82%; top: 70%; }

.map-route {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.48), transparent);
  transform-origin: left center;
}

.route-a {
  left: 20%;
  top: 35%;
  width: 34%;
  transform: rotate(22deg);
}

.route-b {
  left: 51%;
  top: 53%;
  width: 33%;
  transform: rotate(-18deg);
}

.donut-core {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  font-size: 28px;
  font-weight: 950;
}

.inline-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 120px 130px 120px;
  gap: 12px;
  margin-bottom: 18px;
}

.elevated-form {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

th,
td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
}

th {
  color: var(--muted);
  background: #f5f8fb;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.mono {
  font-family: Consolas, monospace;
  color: var(--muted);
}

.vehicle-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vehicle-light {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #94a3b8;
}

.vehicle-light.active {
  background: var(--primary-2);
  box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.16);
  animation: pulse 1.6s infinite;
}

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 950;
}

.pill.available,
.pill.completed {
  color: #047857;
  background: #dcfce7;
}

.pill.approved {
  color: #047857;
  background: #dcfce7;
}

.pill.pending {
  color: #92400e;
  background: #fef3c7;
}

.pill.rejected {
  color: #be123c;
  background: #ffe4e6;
}

.pill.in_use,
.pill.renting {
  color: #1d4ed8;
  background: #dbeafe;
}

.pill.risk {
  color: #be123c;
  background: #ffe4e6;
  box-shadow: 0 0 22px rgba(225, 29, 72, 0.14);
}

tr.risk-row td {
  background: #fff1f2;
}

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

.audit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.audit-actions .small {
  padding: 7px 10px;
  font-size: 12px;
}

.verify-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid rgba(182, 138, 53, 0.24);
  border-radius: 999px;
  color: #76551d;
  background: rgba(182, 138, 53, 0.10);
  font-size: 12px;
  font-weight: 950;
}

.search-bar {
  display: flex;
  gap: 10px;
  min-width: 360px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.ranking-list {
  display: grid;
  gap: 10px;
}

.ranking-item {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}

.finance-grid,
.notice-grid,
.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.finance-grid article,
.notice-grid article,
.settings-grid article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #f8fbfd);
}

.finance-grid span,
.settings-grid span {
  color: var(--muted);
  font-weight: 900;
}

.finance-grid strong {
  display: block;
  margin-top: 10px;
  font-size: 30px;
}

.finance-grid small,
.notice-grid span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.6;
}

.notice-grid strong,
.settings-grid strong {
  display: block;
  font-size: 17px;
}

.notice-console {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.9fr;
  gap: 14px;
}

.notice-console > article,
.settings-column,
.settings-audit {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(11, 122, 104, 0.055), transparent),
    #fff;
}

.notice-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.channel-list {
  display: grid;
  gap: 10px;
}

.channel-list div,
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border-radius: 8px;
  background: #f8fbfd;
}

.channel-list span,
.setting-row span,
.settings-audit span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.channel-list em,
.setting-row em {
  color: var(--primary);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.template-card {
  margin-top: 12px;
  padding: 13px;
  border-radius: 8px;
  background: #f8fbfd;
}

.template-card span {
  display: block;
  color: var(--primary-2);
  font-weight: 900;
}

.template-card p {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.notice-log ul {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.notice-log li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  padding: 10px;
  border-radius: 8px;
  background: #f8fbfd;
  cursor: pointer;
}

.notice-log li.read {
  opacity: 0.48;
  text-decoration: line-through;
}

.notice-log li.new {
  color: var(--ink);
  background: rgba(11, 122, 104, 0.08);
}

.warning-dot {
  background: var(--warning);
  box-shadow: 0 0 0 7px rgba(245, 158, 11, 0.14);
}

.settings-console {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.settings-column h3 {
  margin: 0 0 14px;
}

.settings-column {
  display: grid;
  align-content: start;
  gap: 10px;
}

.merchant-settings label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.password-field {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.store-qr-preview {
  display: grid;
  gap: 8px;
  place-items: center;
  min-height: 150px;
  padding: 12px;
  border: 1px dashed rgba(182, 138, 53, 0.42);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(255, 248, 234, 0.62);
  text-align: center;
}

.store-qr-preview img {
  width: 116px;
  height: 116px;
  object-fit: cover;
  border-radius: 10px;
  background: #fff;
}

.qr-print-name {
  margin: -4px 0 12px;
  padding: 14px 16px;
  border: 1px solid rgba(182, 138, 53, 0.26);
  border-radius: 10px;
  text-align: center;
  color: var(--ink);
  background: rgba(255, 248, 234, 0.84);
  font-size: 34px;
  font-weight: 950;
  letter-spacing: 0;
}

.setting-row strong {
  display: block;
  margin-bottom: 2px;
}

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: #cbd5e1;
}

.switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.switch.on {
  background: linear-gradient(135deg, var(--primary), var(--cyan));
}

.switch.on::after {
  left: 24px;
}

.settings-audit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.settings-audit div {
  padding: 12px;
  border-radius: 8px;
  background: #f8fbfd;
}

.settings-audit strong {
  display: block;
  margin-top: 6px;
}

.page-feature {
  min-height: 620px;
}

.page-feature > .panel-title {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.module-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin: -6px 0 18px;
}

.ops-panel.page-feature,
.ops-panel[data-view="bikes"],
.ops-panel[data-view="orders"],
.ops-panel[data-view="ranking"] {
  box-shadow: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 250, 0.96));
}

.ops-panel.page-feature::before {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, var(--primary), var(--gold));
}

.rank-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-2), var(--cyan));
  font-weight: 950;
}

.hint,
.empty,
.empty-state {
  color: var(--muted);
}

.ops-rail {
  position: sticky;
  top: 24px;
  align-self: start;
  display: grid;
  gap: 12px;
  min-width: 0;
}

.feed-list,
.risk-list {
  display: grid;
  gap: 10px;
}

.feed-item,
.risk-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}

.feed-item {
  position: relative;
  padding-left: 18px;
}

.feed-item::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 18px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

.feed-item.entering {
  animation: slideIn 0.3s ease;
}

.feed-item strong,
.risk-item strong {
  display: block;
  margin-bottom: 6px;
}

.feed-item span,
.risk-item span,
.system-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.risk-item {
  border-color: #fecdd3;
  background: #fff1f2;
}

.system-card {
  display: grid;
  gap: 8px;
}

.agreement-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 8px;
  padding: 12px;
  border: 1px solid rgba(222, 212, 191, 0.96);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 252, 244, 0.92);
  font-size: 13px;
  line-height: 1.55;
}

.agreement-check input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: 0 0 auto;
}

.inline-link {
  display: inline;
  width: auto;
  padding: 0;
  border: 0;
  color: var(--primary);
  background: transparent;
  font-weight: 950;
}

.agreement-sheet article {
  max-height: 86vh;
}

.agreement-body {
  max-height: 68vh;
  overflow-y: auto;
  padding-right: 8px;
  color: var(--ink);
  line-height: 1.8;
}

.agreement-body h3 {
  margin: 18px 0 8px;
  font-size: 18px;
}

.agreement-body p {
  margin: 0 0 10px;
  color: var(--muted);
}

.qr-dialog {
  width: min(92vw, 420px);
  border: 0;
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--shadow);
}

.qr-dialog::backdrop {
  background: rgba(15, 23, 42, 0.52);
}

.qr-dialog img {
  width: 100%;
  max-width: 280px;
  display: block;
  margin: 14px auto;
}

.qr-dialog p {
  word-break: break-all;
  color: var(--muted);
}

.dialog-close {
  float: right;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: #eef3f8;
  font-size: 22px;
}

.user-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.14), transparent 40%),
    linear-gradient(315deg, rgba(37, 99, 235, 0.14), transparent 42%),
    #eef3f8;
}

.mobile-panel {
  width: min(100%, 460px);
}

.app-hero,
.brand-hero {
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  padding: 26px;
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(7, 30, 46, 0.88), rgba(15, 118, 110, 0.62)),
    url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1000&q=80") center/cover;
  box-shadow: var(--shadow);
}

.brand-hero.compact,
.app-hero.compact {
  min-height: 170px;
}

.brand-hero h1,
.app-hero h1 {
  margin: 6px 0 8px;
  font-size: 32px;
  letter-spacing: 0;
}

.brand-hero p,
.app-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
}

.panel,
.ride-card {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}

.ride-card .primary-btn,
.panel .primary-btn {
  width: 100%;
  margin-top: 14px;
}

.panel h2,
.ride-card h2 {
  margin: 0 0 16px;
  font-size: 20px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.section-title h2 {
  margin: 0;
}

.form-grid {
  display: grid;
  gap: 12px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.status-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.order-list {
  display: grid;
  gap: 10px;
}

.order-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.order-card.risk {
  border-color: #fecdd3;
  background: #fff1f2;
}

.order-card strong {
  display: block;
  margin-bottom: 8px;
}

.order-card dl {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 14px;
}

.order-card dt {
  color: var(--muted);
}

.bottom-nav {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
}

.bottom-nav a {
  color: var(--primary);
  font-weight: 900;
  text-decoration: none;
}

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

.ride-stat {
  padding: 16px;
  border-radius: 8px;
  background: #f8fbfd;
}

.ride-stat strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
}

.success-burst {
  animation: successPop 0.42s ease;
}

.ride-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -10%, rgba(11, 122, 104, 0.22), transparent 34%),
    linear-gradient(180deg, #eaf4f0 0%, #f8fbfa 42%, #eef4f1 100%);
  color: var(--ink);
}

.ride-app {
  width: min(100%, 480px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 16px 14px 28px;
}

.ride-hero {
  position: relative;
  overflow: hidden;
  min-height: 290px;
  padding: 20px;
  border-radius: 18px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(16, 27, 24, 0.96), rgba(11, 122, 104, 0.82)),
    #101b18;
  box-shadow: 0 24px 54px rgba(16, 27, 24, 0.22);
}

.ride-hero::after {
  content: "";
  position: absolute;
  inset: auto -60px -95px auto;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(167, 216, 207, 0.22);
  border-radius: 999px;
}

.ride-topline,
.vehicle-meta,
.dashboard-head,
.ride-money,
.mobile-order > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ride-topline {
  position: relative;
  z-index: 1;
  font-weight: 950;
}

.ride-status {
  padding: 6px 10px;
  border-radius: 999px;
  color: #dffbf4;
  background: rgba(255, 255, 255, 0.12);
  font-size: 12px;
}

.ride-status.available {
  color: #dffbf4;
}

.ride-status.in_use {
  color: #bfdbfe;
}

.vehicle-visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 175px;
}

.vehicle-orbit {
  position: absolute;
  width: 154px;
  height: 154px;
  border: 1px solid rgba(167, 216, 207, 0.28);
  border-radius: 999px;
  animation: rotateRing 9s linear infinite;
}

.vehicle-orbit::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(181, 139, 59, 0.86);
}

.vehicle-shape {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 12px;
}

.vehicle-shape span {
  width: 108px;
  height: 70px;
  border-radius: 36px 36px 18px 18px;
  background:
    linear-gradient(180deg, #f8fffc, #cfe8e0);
  box-shadow:
    inset 0 -10px 22px rgba(11, 122, 104, 0.18),
    0 22px 34px rgba(0, 0, 0, 0.25);
}

.vehicle-shape span::before,
.vehicle-shape span::after {
  content: "";
  position: absolute;
  bottom: 22px;
  width: 24px;
  height: 24px;
  border: 6px solid #101b18;
  border-radius: 999px;
  background: #fff;
}

.vehicle-shape span::before {
  left: calc(50% - 64px);
}

.vehicle-shape span::after {
  right: calc(50% - 64px);
}

.vehicle-shape strong {
  font-size: 28px;
  letter-spacing: 0;
}

.vehicle-meta {
  position: relative;
  z-index: 1;
}

.vehicle-meta p,
.vehicle-meta strong {
  margin: 0;
}

.vehicle-meta p {
  color: rgba(255, 255, 255, 0.68);
}

.vehicle-meta strong {
  color: #f7e9c7;
}

.client-quick-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.client-quick-grid article {
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid rgba(255, 248, 234, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.client-quick-grid span,
.client-quick-grid strong {
  display: block;
}

.client-quick-grid span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 900;
}

.client-quick-grid strong {
  margin-top: 5px;
  color: #fff8ea;
  font-size: 13px;
  white-space: nowrap;
}

.ride-dashboard,
.mobile-sheet {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid rgba(215, 227, 223, 0.95);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 40px rgba(21, 35, 31, 0.10);
}

.dashboard-head h1 {
  margin: 4px 0 0;
  font-size: 24px;
}

.ride-pulse {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 8px rgba(148, 163, 184, 0.16);
}

.ride-pulse.active {
  background: var(--success);
  box-shadow: 0 0 0 8px rgba(22, 138, 95, 0.16), 0 0 20px rgba(22, 138, 95, 0.42);
  animation: pulse 1.4s infinite;
}

.time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.time-grid div {
  padding: 14px 8px;
  border-radius: 14px;
  text-align: center;
  background:
    linear-gradient(180deg, #f8fbfa, #eef6f3);
  border: 1px solid #dce9e5;
}

.time-grid strong {
  display: block;
  font-family: Consolas, monospace;
  font-size: 32px;
  letter-spacing: 0;
}

.time-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.ride-money {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #101b18, #0b7a68);
}

.ride-money span {
  color: rgba(255, 255, 255, 0.68);
  font-weight: 900;
}

.ride-money strong {
  font-size: 26px;
}

.ride-live-note {
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(182, 138, 53, 0.20);
  border-radius: 14px;
  color: var(--muted);
  background:
    linear-gradient(135deg, rgba(182, 138, 53, 0.10), transparent),
    rgba(255, 250, 240, 0.76);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

.ride-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 14px;
}

.ride-progress span {
  padding: 8px 4px;
  border-radius: 999px;
  text-align: center;
  color: var(--muted);
  background: #eef4f1;
  font-size: 12px;
  font-weight: 900;
}

.ride-progress span.done {
  color: #fff;
  background: var(--primary);
}

.sheet-badge {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.rent-action {
  width: 100%;
  margin-top: 16px;
  border: 0;
  border-radius: 16px;
  padding: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 18px 30px rgba(11, 122, 104, 0.22);
  font-size: 17px;
  font-weight: 950;
}

.rent-action:disabled {
  opacity: 0.58;
}

.mobile-order {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(11, 122, 104, 0.05), transparent),
    #fff;
}

.mobile-order.risk {
  border-color: #fecdd3;
  background: #fff1f2;
}

.mobile-order > div strong {
  font-size: 18px;
}

.mobile-order > div span {
  color: var(--primary);
  font-weight: 900;
}

.mobile-order dl {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 8px 10px;
  margin: 12px 0 0;
  font-size: 14px;
}

.mobile-order dt {
  color: var(--muted);
}

.mobile-order dd {
  margin: 0;
  text-align: right;
}

.mini-text-btn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 7px 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  font-weight: 900;
}

.hero-status-row {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.identity-sheet {
  border-color: rgba(181, 139, 59, 0.28);
  background:
    linear-gradient(145deg, rgba(181, 139, 59, 0.10), transparent 42%),
    rgba(255, 255, 255, 0.96);
}

.sheet-copy {
  margin: -4px 0 14px;
  color: var(--muted);
  line-height: 1.8;
  font-size: 14px;
}

.profile-line {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(215, 227, 223, 0.95);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(11, 122, 104, 0.07), transparent),
    #f8fbfa;
}

.avatar-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--gold));
  font-weight: 950;
}

.profile-line strong,
.profile-line span {
  display: block;
}

.profile-line span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.profile-line em {
  color: var(--primary);
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.profile-actions {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 10px;
  margin-top: 14px;
}

.review-status-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(182, 138, 53, 0.24);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(182, 138, 53, 0.10), transparent),
    rgba(255, 250, 240, 0.92);
}

.review-status-card strong,
.review-status-card span {
  display: block;
}

.review-status-card span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.review-status-card em {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  color: #76551d;
  background: rgba(182, 138, 53, 0.12);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.review-status-card.approved {
  border-color: rgba(15, 118, 110, 0.34);
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.12), transparent),
    rgba(255, 250, 240, 0.92);
}

.review-status-card.rejected {
  border-color: rgba(183, 52, 47, 0.34);
  background:
    linear-gradient(135deg, rgba(183, 52, 47, 0.12), transparent),
    rgba(255, 250, 240, 0.92);
}

.merchant-contact-card,
.merchant-wechat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(182, 138, 53, 0.24);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.08), transparent),
    #fffaf0;
}

.merchant-contact-card strong,
.merchant-contact-card span,
.merchant-wechat-card strong,
.merchant-wechat-card span {
  display: block;
}

.merchant-contact-card span,
.merchant-wechat-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.merchant-contact-card .ghost-btn {
  flex: 0 0 auto;
  text-decoration: none;
  white-space: nowrap;
}

.merchant-wechat-card {
  justify-content: flex-start;
}

.merchant-wechat-card img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(222, 212, 191, 0.96);
}

.profile-actions .primary-btn,
.profile-actions .ghost-btn {
  width: 100%;
}

.rent-action.secondary {
  background: linear-gradient(135deg, var(--nav), var(--primary));
}

#rentBtn {
  min-height: 52px;
  font-size: 16px;
  box-shadow: 0 18px 38px rgba(15, 118, 110, 0.24);
}

#rentBtn:disabled {
  color: #8b8374;
  background: linear-gradient(135deg, #e6dcc7, #d9cdb5);
  box-shadow: none;
  cursor: not-allowed;
}

.identity-sheet .rent-action,
.settings-sheet .rent-action {
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  font-size: 16px;
}

.settings-sheet {
  border-color: rgba(11, 122, 104, 0.22);
}

.sub-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 22px 0 12px;
}

.sub-panel-title h3 {
  margin: 0;
  font-size: 18px;
}

.user-registry table {
  min-width: 1080px;
}

.user-audit-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}

.ops-filter-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}

.order-filter-board {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ops-filter {
  min-height: 78px;
  padding: 14px;
  border: 1px solid rgba(222, 212, 191, 0.96);
  border-radius: 12px;
  text-align: left;
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(255, 252, 244, 0.96), rgba(248, 243, 232, 0.94));
}

.ops-filter span,
.ops-filter strong {
  display: block;
}

.ops-filter span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
}

.ops-filter strong {
  margin-top: 7px;
  font-size: 26px;
}

.ops-filter.active {
  border-color: rgba(15, 118, 110, 0.46);
  box-shadow: var(--glow);
  background:
    linear-gradient(145deg, rgba(15, 118, 110, 0.14), rgba(255, 252, 244, 0.96));
}

.ops-filter.danger.active {
  border-color: rgba(183, 52, 47, 0.42);
  background:
    linear-gradient(145deg, rgba(183, 52, 47, 0.12), rgba(255, 252, 244, 0.96));
}

.audit-filter {
  position: relative;
  overflow: hidden;
  min-height: 86px;
  padding: 16px;
  border: 1px solid rgba(222, 212, 191, 0.96);
  border-radius: 12px;
  text-align: left;
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(255, 252, 244, 0.96), rgba(248, 243, 232, 0.94));
  box-shadow: 0 10px 26px rgba(37, 30, 18, 0.06);
}

.audit-filter::after {
  content: "";
  position: absolute;
  right: -24px;
  top: -24px;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: rgba(182, 138, 53, 0.10);
}

.audit-filter span,
.audit-filter strong {
  position: relative;
  z-index: 1;
  display: block;
}

.audit-filter span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
}

.audit-filter strong {
  margin-top: 8px;
  font-size: 30px;
}

.audit-filter.active {
  border-color: rgba(15, 118, 110, 0.46);
  background:
    linear-gradient(145deg, rgba(15, 118, 110, 0.14), rgba(255, 252, 244, 0.96));
  box-shadow: var(--glow);
}

.audit-filter[data-user-review-filter="rejected"].active {
  border-color: rgba(183, 52, 47, 0.42);
  background:
    linear-gradient(145deg, rgba(183, 52, 47, 0.12), rgba(255, 252, 244, 0.96));
}

.audit-filter[data-user-review-filter="pending"].active {
  border-color: rgba(182, 138, 53, 0.52);
  background:
    linear-gradient(145deg, rgba(182, 138, 53, 0.15), rgba(255, 252, 244, 0.96));
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  70% { transform: scale(1.08); opacity: 0.72; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes rotateRing {
  to { transform: rotate(360deg); }
}

@keyframes slideIn {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes successPop {
  0% { transform: scale(0.98); }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@media (max-width: 1500px) {
  .ops-grid {
    grid-template-columns: 1fr;
  }

  .ops-rail {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rail-card {
    min-height: 0;
  }
}

@media (max-width: 1280px) {
  .metric-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .ops-rail {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 920px) {
  .ops-shell {
    grid-template-columns: 1fr;
  }

  .ops-sidebar {
    position: static;
    height: auto;
  }

  .ops-nav {
    grid-template-columns: repeat(2, 1fr);
  }

  .insight-grid,
  .ops-rail,
  .finance-grid,
  .notice-grid,
  .settings-grid,
  .notice-console,
  .settings-console,
  .settings-audit,
  .user-audit-board,
  .ops-filter-board,
  .order-filter-board {
    grid-template-columns: 1fr;
  }

  .rail-card {
    padding: 16px;
  }

  .rail-card .panel-title {
    margin-bottom: 10px;
  }

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

@media (max-width: 640px) {
  .ops-main,
  .user-shell {
    padding: 14px;
  }

  .ops-topbar,
  .panel-title,
  .section-title {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .topbar-actions .system-clock,
  .topbar-actions button {
    width: 100%;
    text-align: center;
  }

  .metric-grid,
  .inline-form,
  .status-panel,
  .ride-status-card {
    grid-template-columns: 1fr;
  }

  .search-bar {
    min-width: 0;
    flex-direction: column;
  }

  .topbar-actions {
    grid-template-columns: 1fr;
  }

  .ops-rail {
    gap: 10px;
  }
}

.finance-board,
.settings-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.settings-board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.finance-board article,
.settings-board article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.06), transparent),
    #fff;
}

.finance-board h3 {
  margin: 0 0 12px;
}

.finance-board ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.9;
}

.cash-bars {
  display: grid;
  gap: 12px;
}

.cash-bars span {
  position: relative;
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #0f172a;
  background: #eef3f8;
  overflow: hidden;
  font-weight: 900;
  isolation: isolate;
}

.cash-bars span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: var(--w);
  background: linear-gradient(90deg, rgba(15, 118, 110, 0.22), rgba(37, 99, 235, 0.18));
}

.settings-board span,
.settings-board small {
  display: block;
  color: var(--muted);
}

.settings-board strong {
  display: block;
  margin: 8px 0;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 14%, rgba(6, 182, 212, 0.18), transparent 24%),
    radial-gradient(circle at 78% 72%, rgba(15, 118, 110, 0.18), transparent 28%),
    linear-gradient(135deg, #0b1324, #10243a);
}

.login-card {
  width: min(100%, 980px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(18px);
}

.login-visual {
  padding: 44px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.30), rgba(37, 99, 235, 0.18)),
    rgba(255, 255, 255, 0.04);
}

.login-visual h1 {
  margin: 18px 0 12px;
  font-size: 40px;
}

.login-visual p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.72);
}

.login-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.login-signals span {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 900;
}

.login-panel {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: 44px;
  background: rgba(255, 255, 255, 0.96);
}

.login-panel h2 {
  margin: 0;
  font-size: 30px;
}

.login-panel p,
.login-hint {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.login-panel .primary-btn {
  width: 100%;
  margin-top: 8px;
}

@media (max-width: 920px) {
  .finance-board,
  .settings-board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .login-card {
    grid-template-columns: 1fr;
  }
}

/* Chinese classical x modern operating system polish */
:root {
  --bg: #f3f0e8;
  --panel: rgba(255, 252, 244, 0.92);
  --panel-solid: #fffaf0;
  --ink: #17211c;
  --muted: #706b5e;
  --line: #ded4bf;
  --primary: #0f766e;
  --primary-2: #155e75;
  --cyan: #1f8a84;
  --danger: #a8272d;
  --warning: #a76f1c;
  --success: #167355;
  --nav: #111714;
  --gold: #b68a35;
  --paper: #fff8ea;
  --cinnabar: #b7342f;
  --shadow: 0 22px 56px rgba(37, 30, 18, 0.10);
  --glow: 0 0 0 1px rgba(182, 138, 53, 0.16), 0 24px 58px rgba(15, 118, 110, 0.16);
}

.ops-shell,
.ride-shell {
  background:
    linear-gradient(120deg, rgba(15, 118, 110, 0.10), transparent 30%),
    linear-gradient(300deg, rgba(182, 138, 53, 0.14), transparent 36%),
    repeating-linear-gradient(90deg, rgba(23, 33, 28, 0.025) 0, rgba(23, 33, 28, 0.025) 1px, transparent 1px, transparent 34px),
    #f3f0e8;
}

.ops-shell::before,
.ride-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(182, 138, 53, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 118, 110, 0.055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 82%);
}

.ops-sidebar {
  background:
    linear-gradient(180deg, rgba(17, 23, 20, 0.98), rgba(8, 12, 10, 0.99)),
    #111714;
}

.brand-mark,
.avatar-mark {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(183, 52, 47, 0.95), rgba(15, 118, 110, 0.95)),
    var(--primary);
  box-shadow: inset 0 0 0 1px rgba(255, 248, 234, 0.24), 0 18px 40px rgba(15, 23, 20, 0.28);
}

.ops-nav a {
  border: 1px solid transparent;
}

.ops-nav a.active,
.ops-nav a:hover {
  border-color: rgba(182, 138, 53, 0.22);
  background:
    linear-gradient(90deg, rgba(182, 138, 53, 0.14), rgba(15, 118, 110, 0.08)),
    rgba(255, 255, 255, 0.06);
}

.command-hero,
.ride-hero {
  border: 1px solid rgba(255, 248, 234, 0.18);
  background:
    linear-gradient(135deg, rgba(17, 23, 20, 0.98), rgba(15, 118, 110, 0.82)),
    linear-gradient(90deg, #111714, #0f766e);
}

.command-hero::before,
.ride-hero::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 248, 234, 0.14);
  pointer-events: none;
}

.command-hero h2,
.ops-topbar h1,
.ride-dashboard h1,
.vehicle-shape strong {
  font-family: "Microsoft YaHei", "SimSun", serif;
  font-weight: 950;
}

.metric-card {
  position: relative;
  border-color: rgba(222, 212, 191, 0.92);
  background:
    linear-gradient(145deg, rgba(255, 252, 244, 0.98), rgba(246, 239, 222, 0.90)),
    var(--paper);
}

.metric-card[data-drill],
#revenueChart span,
#heatMap span,
.risk-donut,
.ranking-item,
#userRows tr[data-phone],
.feed-item,
.risk-item {
  cursor: pointer;
}

.metric-card[data-drill]::after {
  content: "查看";
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 4px 8px;
  border: 1px solid rgba(182, 138, 53, 0.24);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(182, 138, 53, 0.08);
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
  transform: translateY(4px);
  transition: 0.18s ease;
}

.metric-card[data-drill]:hover,
.metric-card[data-drill]:focus-visible {
  border-color: rgba(182, 138, 53, 0.48);
  box-shadow: var(--glow);
  outline: none;
}

.metric-card[data-drill]:hover::after,
.metric-card[data-drill]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.metric-card strong,
.finance-grid strong,
.ride-money strong {
  color: #101815;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.metric-card.danger strong,
.pill.risk {
  color: var(--cinnabar);
}

.ops-panel,
.rail-card,
.mobile-sheet,
.ride-dashboard {
  border-color: rgba(222, 212, 191, 0.96);
  background:
    linear-gradient(145deg, rgba(255, 252, 244, 0.96), rgba(248, 243, 232, 0.94)),
    var(--paper);
}

.ops-panel::after,
.rail-card::after,
.mobile-sheet::after,
.ride-dashboard::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin-top: 16px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: 0.55;
}

.panel-badge,
.sheet-badge,
.ride-status {
  border: 1px solid rgba(182, 138, 53, 0.20);
  color: #76551d;
  background: rgba(182, 138, 53, 0.10);
}

.primary-btn,
.rent-action {
  background:
    linear-gradient(135deg, #0f766e, #155e75);
  box-shadow: 0 16px 34px rgba(15, 118, 110, 0.24);
}

.ghost-btn {
  border: 1px solid rgba(222, 212, 191, 0.96);
  color: var(--ink);
  background: rgba(255, 248, 234, 0.78);
}

input,
select {
  border-color: rgba(222, 212, 191, 0.96);
  background: rgba(255, 252, 244, 0.95);
}

th {
  color: #655b4a;
  background: linear-gradient(180deg, #f8f1e2, #f3ead7);
}

tbody tr,
.ranking-item,
.feed-item,
.risk-item,
.mobile-order {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

tbody tr:hover,
.ranking-item:hover,
#userRows tr[data-phone]:hover,
.feed-item:hover,
.risk-item:hover,
.mobile-order:hover {
  border-color: rgba(182, 138, 53, 0.42);
  background: rgba(255, 248, 234, 0.82);
  box-shadow: 0 14px 34px rgba(37, 30, 18, 0.08);
}

tr.focus-row td {
  background: rgba(182, 138, 53, 0.18) !important;
  box-shadow: inset 3px 0 0 var(--gold);
}

.revenue-chart span {
  background:
    linear-gradient(180deg, #caa24f, #0f766e);
}

.revenue-chart span:hover,
#heatMap span:hover {
  filter: brightness(1.05);
  transform: translateY(-3px);
}

.heat-map span {
  border: 1px solid rgba(182, 138, 53, 0.12);
}

.ride-app {
  max-width: 500px;
}

.ride-hero {
  border-radius: 22px 22px 10px 10px;
}

.vehicle-shape span {
  background:
    linear-gradient(180deg, #fff8ea, #d9c79e);
}

.ride-dashboard,
.mobile-sheet {
  border-radius: 18px 18px 10px 10px;
}

.time-grid div {
  border-color: rgba(182, 138, 53, 0.20);
  background:
    linear-gradient(180deg, #fffaf0, #f2ead7);
}

.time-grid strong {
  color: var(--primary);
}

.ride-money {
  border: 1px solid rgba(255, 248, 234, 0.16);
  background:
    linear-gradient(135deg, #111714, #0f766e);
}

.profile-line {
  border-color: rgba(182, 138, 53, 0.24);
  background:
    linear-gradient(135deg, rgba(182, 138, 53, 0.10), transparent),
    #fffaf0;
}

.mini-text-btn:hover,
.profile-actions button:hover,
.rent-action:hover,
.primary-btn:hover,
.ghost-btn:hover {
  transform: translateY(-1px);
}

.vehicle-visual,
.time-grid,
.ride-money,
.mobile-order {
  cursor: pointer;
}

.vehicle-visual:hover .vehicle-orbit {
  border-color: rgba(182, 138, 53, 0.54);
  box-shadow: inset 0 0 36px rgba(182, 138, 53, 0.10);
}

.time-grid div:hover {
  border-color: rgba(15, 118, 110, 0.36);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.10);
}

.finance-periods {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.finance-periods article {
  padding: 16px;
  border: 1px solid rgba(222, 212, 191, 0.96);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(255, 252, 244, 0.96), rgba(248, 243, 232, 0.94));
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.finance-periods article:hover,
.finance-periods article.active {
  transform: translateY(-2px);
  border-color: rgba(182, 138, 53, 0.52);
  box-shadow: var(--glow);
}

.finance-periods span,
.finance-periods small {
  display: block;
  color: var(--muted);
  font-weight: 900;
}

.finance-periods strong {
  display: block;
  margin: 9px 0 4px;
  font-size: 24px;
}

.finance-ledger table {
  min-width: 920px;
}

.cash-bars span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.cash-bars em {
  color: var(--primary);
  font-style: normal;
}

.app-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 40;
  width: min(92vw, 420px);
  transform: translateX(-50%);
  padding: 14px 16px;
  border: 1px solid rgba(222, 212, 191, 0.96);
  border-radius: 14px;
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(255, 252, 244, 0.98), rgba(248, 243, 232, 0.96));
  box-shadow: 0 18px 48px rgba(37, 30, 18, 0.18);
  font-weight: 900;
  animation: slideIn 0.2s ease;
}

.app-toast.success {
  border-color: rgba(15, 118, 110, 0.34);
  color: var(--primary);
}

.app-toast.error {
  border-color: rgba(183, 52, 47, 0.34);
  color: var(--cinnabar);
}

.detail-sheet {
  position: fixed;
  inset: 0;
  z-index: 35;
}

.detail-mask {
  position: absolute;
  inset: 0;
  background: rgba(17, 23, 20, 0.42);
}

.detail-sheet article {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(100%, 500px);
  transform: translateX(-50%);
  padding: 18px;
  border: 1px solid rgba(222, 212, 191, 0.96);
  border-radius: 22px 22px 0 0;
  background:
    linear-gradient(145deg, rgba(255, 252, 244, 0.98), rgba(248, 243, 232, 0.98));
  box-shadow: 0 -20px 54px rgba(17, 23, 20, 0.20);
  animation: sheetUp 0.22s ease;
}

.detail-body {
  display: grid;
  gap: 10px;
}

.detail-body p {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(222, 212, 191, 0.72);
  border-radius: 10px;
  background: rgba(255, 248, 234, 0.72);
  color: var(--muted);
  font-weight: 800;
}

@keyframes sheetUp {
  from { transform: translate(-50%, 22px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

@media (max-width: 1100px) {
  .finance-periods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .finance-periods {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ride-app {
    padding: 12px 10px 24px;
  }

  .ride-hero {
    min-height: 318px;
    padding: 18px 16px;
  }

  .client-quick-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .client-quick-grid article {
    padding: 9px 6px;
  }

  .client-quick-grid strong {
    font-size: 12px;
  }

  .profile-actions {
    grid-template-columns: 1fr;
  }

  .hero-status-row {
    flex-wrap: wrap;
  }
}

/* Electric scooter silhouette for campus shared e-bike rental */
.vehicle-visual {
  height: 190px;
}

.vehicle-shape {
  width: 210px;
  min-height: 142px;
}

.vehicle-shape span {
  position: relative;
  display: block;
  width: 184px;
  height: 118px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.vehicle-shape::before {
  content: "";
  position: absolute;
  left: 48px;
  top: 76px;
  width: 118px;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff8ea, #d6bd7a);
  box-shadow:
    0 12px 22px rgba(0, 0, 0, 0.22),
    inset 0 -3px 0 rgba(15, 118, 110, 0.24);
}

.vehicle-shape::after {
  content: "";
  position: absolute;
  left: 83px;
  top: 49px;
  width: 58px;
  height: 34px;
  border-radius: 18px 26px 12px 12px;
  background:
    linear-gradient(145deg, #fffaf0, #cfa957);
  box-shadow:
    inset -10px -8px 18px rgba(15, 118, 110, 0.18),
    0 12px 26px rgba(0, 0, 0, 0.20);
}

.vehicle-shape span::before,
.vehicle-shape span::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 36px;
  height: 36px;
  border: 7px solid #111714;
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff8ea 0 28%, #0f766e 30% 42%, transparent 44%);
  box-shadow:
    0 0 0 3px rgba(255, 248, 234, 0.20),
    0 13px 18px rgba(0, 0, 0, 0.24);
}

.vehicle-shape span::before {
  left: 20px;
}

.vehicle-shape span::after {
  right: 15px;
}

.vehicle-shape span {
  background:
    linear-gradient(115deg, transparent 0 44%, rgba(255, 248, 234, 0.86) 45% 50%, transparent 51%),
    linear-gradient(25deg, transparent 0 42%, rgba(255, 248, 234, 0.72) 43% 48%, transparent 49%),
    linear-gradient(90deg, transparent 0 63%, rgba(255, 248, 234, 0.90) 64% 68%, transparent 69%);
}

.vehicle-shape span i,
.vehicle-shape span b {
  display: none;
}

.vehicle-shape strong {
  position: relative;
  z-index: 2;
  margin-top: -6px;
}

.vehicle-shape .scooter-handle,
.vehicle-shape .scooter-seat {
  display: none;
}

.vehicle-shape span + strong::before {
  content: "";
  position: absolute;
  left: 58px;
  top: -86px;
  width: 42px;
  height: 9px;
  border-radius: 999px;
  background: #111714;
  transform: rotate(-5deg);
  box-shadow: 33px 33px 0 -2px rgba(255, 248, 234, 0.92);
}

.vehicle-shape span + strong::after {
  content: "";
  position: absolute;
  right: 32px;
  top: -108px;
  width: 42px;
  height: 9px;
  border-radius: 999px;
  background: #fff8ea;
  transform: rotate(9deg);
  box-shadow:
    -12px 10px 0 -3px #fff8ea,
    -18px 25px 0 -4px rgba(255, 248, 234, 0.88);
}

.status-select {
  min-width: 110px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.link-btn {
  border: 0;
  padding: 0;
  color: var(--primary);
  background: transparent;
  font-weight: 950;
}

.link-btn:hover {
  color: var(--gold);
}

.order-dialog {
  width: min(94vw, 760px);
  border: 1px solid rgba(222, 212, 191, 0.96);
  border-radius: 18px;
  padding: 24px;
  background:
    linear-gradient(145deg, rgba(255, 252, 244, 0.98), rgba(248, 243, 232, 0.98));
  box-shadow: 0 30px 80px rgba(17, 23, 20, 0.28);
}

.order-dialog::backdrop {
  background: rgba(17, 23, 20, 0.50);
}

.order-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.order-detail-grid div {
  padding: 14px;
  border: 1px solid rgba(222, 212, 191, 0.78);
  border-radius: 12px;
  background: rgba(255, 248, 234, 0.72);
}

.order-detail-grid span,
.notice-log li em {
  display: block;
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
  line-height: 1.5;
}

.order-detail-grid strong,
.notice-log li strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
}

.agreement-record {
  grid-column: span 2;
  position: relative;
}

.agreement-record em {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
}

.agreement-record.signed {
  border-color: rgba(15, 118, 110, 0.34);
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.10), rgba(255, 248, 234, 0.76));
}

.agreement-record.missing {
  border-color: rgba(183, 52, 47, 0.34);
  background: linear-gradient(135deg, rgba(183, 52, 47, 0.10), rgba(255, 248, 234, 0.76));
}

.agreement-record button {
  margin-top: 10px;
}

.agreement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.agreement-actions button {
  margin-top: 0;
}

.agreement-record button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.notice-log li {
  align-items: flex-start;
}

.notice-log li .live-dot {
  margin-top: 5px;
}

@media (max-width: 640px) {
  .order-detail-grid {
    grid-template-columns: 1fr;
  }

  .agreement-record {
    grid-column: span 1;
  }
}

/* Keep the live rail from covering tables on medium screens. */
.ops-grid {
  grid-template-columns: minmax(0, 1fr) clamp(240px, 18vw, 320px);
}

.ops-content {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

.ops-rail {
  position: sticky;
  top: 18px;
  align-self: start;
}

.ops-rail .rail-card {
  overflow-wrap: anywhere;
}

@media (max-width: 1320px) {
  .ops-grid {
    grid-template-columns: 1fr;
  }

  .ops-rail {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 900px) {
  .ops-rail {
    grid-template-columns: 1fr;
  }
}
.agreement-link {
  min-width: 72px;
  border: 1px solid rgba(21, 101, 88, 0.18);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.64);
}

.agreement-link.signed {
  color: #0f7b5f;
  background: rgba(33, 160, 126, 0.12);
}

.agreement-link.missing {
  color: #a63333;
  background: rgba(168, 45, 45, 0.1);
}

.live-duration {
  min-width: 92px;
  color: var(--primary);
  font-weight: 950;
  white-space: nowrap;
}

.vehicle-cell {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px 8px;
}

.vehicle-note {
  grid-column: 2;
  color: #8a6b38;
  font-size: 12px;
}

.sub-module {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid rgba(150, 119, 62, 0.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 252, 244, 0.94), rgba(247, 250, 245, 0.9));
  box-shadow: 0 20px 60px rgba(37, 46, 35, 0.08);
}

.danger-module {
  border-color: rgba(159, 45, 45, 0.22);
}

.agreement-admin-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) 1.1fr;
  gap: 18px;
}

.agreement-admin-grid article,
.archive-item {
  border: 1px solid rgba(150, 119, 62, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
  padding: 16px;
}

.agreement-admin-grid label {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  color: #5f5a4f;
  font-weight: 700;
}

.agreement-admin-grid input,
.agreement-admin-grid textarea {
  width: 100%;
  border: 1px solid rgba(150, 119, 62, 0.24);
  border-radius: 12px;
  padding: 12px;
  font: inherit;
  background: rgba(255, 255, 255, 0.88);
}

.archive-list {
  display: grid;
  gap: 10px;
  max-height: 460px;
  overflow: auto;
}

.archive-item {
  display: grid;
  gap: 6px;
}

.archive-item span,
.archive-item em {
  color: #6f695d;
  font-style: normal;
  font-size: 13px;
}

.qr-upload-box {
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
}

.qr-upload-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  border: 1px dashed rgba(19, 113, 98, 0.45);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(236, 248, 244, 0.86), rgba(255, 252, 244, 0.9));
  color: #0f7667;
  font-weight: 800;
  cursor: pointer;
}

.qr-upload-button input {
  display: none;
}

.qr-upload-box small {
  color: #756c60;
  line-height: 1.5;
}

.store-qr-preview img {
  width: min(180px, 100%);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
}

.store-qr-preview span {
  display: block;
  margin-top: 8px;
  color: #5f5a4f;
  font-size: 13px;
}

@media (max-width: 900px) {
  .agreement-admin-grid {
    grid-template-columns: 1fr;
  }
}

/* Production UI pass: prevent side content from covering data and give the
   console a finished operations-center feel. */
.ops-shell {
  background:
    linear-gradient(90deg, rgba(9, 20, 17, 0.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(9, 20, 17, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 16% 10%, rgba(14, 126, 109, 0.13), transparent 34%),
    radial-gradient(circle at 88% 4%, rgba(176, 122, 41, 0.14), transparent 32%),
    #f5f0e6;
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
}

.ops-main {
  max-width: none;
  padding: 28px clamp(18px, 2.4vw, 42px);
  overflow-x: hidden;
}

.ops-topbar {
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}

.ops-topbar h1 {
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.05;
  letter-spacing: 0;
}

.topbar-actions {
  position: sticky;
  top: 18px;
  z-index: 12;
  align-self: flex-start;
  padding: 8px;
  border: 1px solid rgba(178, 145, 82, 0.18);
  border-radius: 18px;
  background: rgba(255, 252, 244, 0.86);
  box-shadow: 0 18px 46px rgba(30, 34, 27, 0.10);
  backdrop-filter: blur(16px);
}

.ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px;
}

.ops-content {
  min-width: 0;
}

.ops-rail {
  position: static !important;
  order: -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
  margin-bottom: 4px;
}

.ops-rail .rail-card,
.ops-rail .system-card {
  min-height: 150px;
  padding: 20px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 254, 247, 0.94), rgba(241, 248, 242, 0.86)),
    #fffaf0;
  box-shadow: 0 18px 54px rgba(44, 48, 38, 0.10);
}

.feed-list,
.risk-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.feed-list > *,
.risk-list > *,
.notice-log li {
  min-width: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.66);
}

.metric-grid {
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 16px;
}

.metric-card,
.ops-panel,
.rail-card,
.command-hero {
  min-width: 0;
  border-color: rgba(152, 120, 61, 0.22);
  box-shadow:
    0 28px 80px rgba(28, 35, 30, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.metric-card[data-drill]::after {
  content: "查看";
  right: 18px;
  top: 18px;
  border-radius: 999px;
  background: rgba(15, 118, 105, 0.10);
  color: #0f7669;
}

.metric-card[data-drill]:hover,
.metric-card[data-drill]:focus-visible,
.ops-filter:hover,
.audit-filter:hover,
.finance-periods article:hover {
  transform: translateY(-2px);
}

.command-hero {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 85% 18%, rgba(211, 166, 76, 0.24), transparent 24%),
    linear-gradient(135deg, #10231d 0%, #0e5f54 56%, #173b48 100%);
}

.command-hero::after {
  content: "";
  position: absolute;
  inset: auto -8% -34% 42%;
  height: 220px;
  border: 1px solid rgba(255, 248, 222, 0.18);
  border-radius: 999px;
  transform: rotate(-9deg);
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

.table-wrap table {
  width: max-content;
  min-width: 100%;
  max-width: none;
  border-collapse: separate;
  border-spacing: 0;
}

.table-wrap th,
.table-wrap td {
  vertical-align: middle;
  white-space: nowrap;
}

#orders .table-wrap {
  padding-bottom: 10px;
  overscroll-behavior-x: contain;
  overflow-x: auto;
  padding-right: 12px;
}

#orders .table-wrap table {
  table-layout: fixed;
  min-width: 1500px;
}

#orders th:nth-child(1),
#orders td:nth-child(1) { width: 64px; }
#orders th:nth-child(2),
#orders td:nth-child(2) { width: 82px; }
#orders th:nth-child(3),
#orders td:nth-child(3) { width: 118px; }
#orders th:nth-child(4),
#orders td:nth-child(4) { width: 160px; }
#orders th:nth-child(5),
#orders td:nth-child(5) { width: 118px; }
#orders th:nth-child(6),
#orders td:nth-child(6) { width: 128px; }
#orders th:nth-child(7),
#orders td:nth-child(7),
#orders th:nth-child(8),
#orders td:nth-child(8) { width: 132px; }
#orders th:nth-child(9),
#orders td:nth-child(9) { width: 124px; }
#orders th:nth-child(10),
#orders td:nth-child(10) { width: 96px; }
#orders th:nth-child(11),
#orders td:nth-child(11) { width: 92px; }
#orders th:nth-child(12),
#orders td:nth-child(12) { width: 96px; }
#orders th:nth-child(13),
#orders td:nth-child(13) {
  width: 162px;
  min-width: 162px;
  position: sticky;
  right: 0;
  z-index: 3;
  overflow: visible !important;
  background: var(--yh-surface, var(--bg2));
  box-shadow: -14px 0 22px rgba(15, 23, 42, 0.08);
}

#orders td {
  overflow: hidden;
  text-overflow: ellipsis;
}

#orders .row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  min-width: 148px;
}

#orders .row-actions .small {
  min-width: 54px;
  padding-inline: 8px;
  font-size: 13px;
}

.table-wrap th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #f6ead3, #efe2c7);
}

.live-duration {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15, 118, 105, 0.10);
  color: #0f7669;
  font-variant-numeric: tabular-nums;
}

.search-bar,
.inline-form,
.elevated-form {
  align-items: stretch;
}

.search-bar input,
.inline-form input,
.inline-form select,
.agreement-admin-grid input,
.agreement-admin-grid textarea {
  min-height: 54px;
  border-radius: 14px;
}

.primary-btn,
.ghost-btn,
.danger-btn,
.inline-form button {
  min-height: 48px;
  border-radius: 14px;
}

.qr-dialog,
.order-dialog {
  border-radius: 24px;
  box-shadow: 0 34px 90px rgba(16, 27, 23, 0.24);
}

.qr-print-name {
  font-size: 28px;
  font-weight: 950;
  color: #10231d;
  text-align: center;
}

.settings-console,
.finance-board,
.notice-console {
  gap: 16px;
}

.settings-column,
.notice-main,
.notice-template,
.notice-log,
.finance-board article {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

@media (max-width: 1500px) {
  .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .feed-list,
  .risk-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .ops-shell {
    grid-template-columns: 1fr;
  }

  .ops-sidebar {
    position: static;
    min-height: auto;
  }

  .ops-nav {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }

  .ops-rail {
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    position: static;
  }
}

@media (max-width: 760px) {
  .ops-main {
    padding: 18px 12px 28px;
  }

  .ops-topbar {
    display: grid;
  }

  .topbar-actions,
  .inline-form,
  .search-bar,
  .module-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .metric-grid,
  .insight-grid,
  .finance-grid,
  .finance-periods,
  .ops-filter-board,
  .user-audit-board {
    grid-template-columns: 1fr;
  }

  .ops-nav {
    grid-template-columns: 1fr 1fr;
  }

  .ops-panel,
  .command-hero,
  .rail-card {
    border-radius: 18px;
  }
}

/* Unified commercial SaaS polish: blue-purple technology theme.
   This block intentionally sits at the end so old inline/admin styles keep
   behavior while the final visual/layout layer becomes consistent. */
:root {
  --yh-bg: #f5f7ff;
  --yh-bg-deep: #090b1a;
  --yh-panel: rgba(255, 255, 255, 0.9);
  --yh-panel-solid: #ffffff;
  --yh-border: rgba(99, 102, 241, 0.16);
  --yh-border-strong: rgba(99, 102, 241, 0.28);
  --yh-text: #111827;
  --yh-muted: #667085;
  --yh-blue: #2563eb;
  --yh-purple: #7c3aed;
  --yh-cyan: #06b6d4;
  --yh-green: #10b981;
  --yh-red: #ef4444;
  --yh-amber: #f59e0b;
  --yh-grad: linear-gradient(135deg, #2563eb 0%, #7c3aed 58%, #06b6d4 100%);
  --yh-shadow: 0 20px 60px rgba(30, 41, 59, 0.12);
  --yh-shadow-strong: 0 28px 90px rgba(37, 99, 235, 0.18);
}

html,
body {
  width: 100%;
  min-height: 100vh;
}

body {
  color: var(--yh-text);
  background:
    radial-gradient(circle at 12% 4%, rgba(37, 99, 235, 0.18), transparent 32%),
    radial-gradient(circle at 88% 0%, rgba(124, 58, 237, 0.16), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #eef2ff 100%);
}

.ops-shell {
  width: 100% !important;
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(37, 99, 235, 0.16), transparent 32%),
    radial-gradient(circle at 92% 0%, rgba(124, 58, 237, 0.14), transparent 30%),
    linear-gradient(135deg, #f8fbff, #eef2ff) !important;
}

.ops-main {
  width: auto !important;
  min-height: 100vh;
  flex: 1 1 auto;
  max-width: none !important;
}

.ops-content {
  width: 100%;
  max-width: none;
}

.ops-topbar,
.ride-nav {
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--yh-text) !important;
  border-bottom: 1px solid var(--yh-border) !important;
  box-shadow: 0 12px 36px rgba(37, 99, 235, 0.08);
}

.ops-sidebar {
  background:
    linear-gradient(180deg, rgba(13, 18, 40, 0.98), rgba(19, 13, 42, 0.98)),
    #0f172a !important;
  border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.brand-mark,
.nav-logo {
  background: var(--yh-grad) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.34) !important;
}

.command-hero,
.app-hero,
.vehicle-hero {
  color: #fff !important;
  background:
    radial-gradient(circle at 86% 18%, rgba(6, 182, 212, 0.32), transparent 26%),
    linear-gradient(135deg, #172554 0%, #4338ca 48%, #7c3aed 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 24px !important;
  box-shadow: var(--yh-shadow-strong) !important;
}

.ops-panel,
.rail-card,
.metric-card,
.ride-card,
.login-card,
.login-panel,
.user-card,
.orders-card,
.timer-card,
.fee-bar,
.settings-card,
.card {
  border: 1px solid var(--yh-border) !important;
  border-radius: 20px !important;
  background: var(--yh-panel) !important;
  box-shadow: var(--yh-shadow) !important;
  backdrop-filter: blur(18px);
}

.metric-card:hover,
.ops-panel:hover,
.rail-card:hover,
.ride-card:hover,
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 80px rgba(37, 99, 235, 0.16) !important;
  border-color: var(--yh-border-strong) !important;
}

.primary-btn,
.rent-action {
  color: #fff !important;
  background: var(--yh-grad) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.28) !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.primary-btn:hover:not(:disabled),
.rent-action:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 18px 44px rgba(37, 99, 235, 0.36) !important;
}

.primary-btn:active:not(:disabled),
.rent-action:active:not(:disabled),
.ghost-btn:active:not(:disabled),
.danger-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.ghost-btn,
.secondary-btn {
  color: #334155 !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid var(--yh-border) !important;
  border-radius: 14px !important;
  transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.ghost-btn:hover:not(:disabled),
.secondary-btn:hover:not(:disabled) {
  color: var(--yh-blue) !important;
  border-color: rgba(37, 99, 235, 0.42) !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.10);
}

.danger-btn {
  color: #fff !important;
  background: linear-gradient(135deg, #ef4444, #f97316) !important;
  border-radius: 14px !important;
}

input:not([type=checkbox]):not([type=radio]),
textarea,
select {
  color: var(--yh-text) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(99, 102, 241, 0.18) !important;
  border-radius: 14px !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--yh-blue) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
}

.table-wrap {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--yh-border);
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.86) !important;
}

.table-wrap table {
  width: 100%;
  min-width: 980px;
}

.qr-dialog {
  width: min(92vw, 420px) !important;
}

.qr-dialog img,
#qrImage {
  display: block !important;
  width: min(72vw, 280px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  image-rendering: pixelated;
  border-radius: 14px !important;
  background: #fff !important;
}

.qr-print-name {
  max-width: min(72vw, 280px);
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.2;
}

th {
  color: #475569 !important;
  background: linear-gradient(180deg, #eef2ff, #e0e7ff) !important;
}

td {
  color: var(--yh-text);
}

.pill,
.badge,
.vh-status,
.nav-user-pill,
.ops-chip {
  border-radius: 999px !important;
  border: 1px solid rgba(99, 102, 241, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.pill.available,
.pill.completed,
.badge-green,
.vh-status.available {
  color: #047857 !important;
  background: rgba(16, 185, 129, 0.12) !important;
}

.pill.in_use,
.pill.renting,
.vh-status.in_use {
  color: #1d4ed8 !important;
  background: rgba(37, 99, 235, 0.12) !important;
}

.pill.maintenance,
.pill.pending {
  color: #b45309 !important;
  background: rgba(245, 158, 11, 0.14) !important;
}

.pill.rejected,
.pill.risk {
  color: #be123c !important;
  background: rgba(244, 63, 94, 0.12) !important;
}

.ride-shell,
.user-shell,
.login-shell {
  min-height: 100vh;
  padding-bottom: 118px !important;
  background:
    radial-gradient(circle at 14% 6%, rgba(37, 99, 235, 0.18), transparent 34%),
    radial-gradient(circle at 90% 10%, rgba(124, 58, 237, 0.14), transparent 32%),
    linear-gradient(180deg, #f8fbff 0%, #eef2ff 100%) !important;
}

.floating-rent-bar {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 90;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: min(92vw, 520px);
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 54px rgba(15, 23, 42, 0.22);
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
}

.floating-rent-info {
  min-width: 0;
}

.floating-rent-info strong,
.floating-rent-info span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-rent-info strong {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.35;
}

.floating-rent-info span {
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
}

.floating-rent-bar .rent-action {
  width: auto !important;
  min-width: 118px;
  height: 46px;
  padding: 0 18px;
  white-space: nowrap;
}

.floating-rent-bar .rent-action:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  filter: grayscale(0.2);
  transform: none !important;
}

@media (max-width: 420px) {
  .floating-rent-bar {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .floating-rent-bar .rent-action {
    width: 100% !important;
  }
}

/* Admin V5: compact full-screen operations console */
body.ops-shell,
.ops-shell {
  --admin-sidebar: 208px;
  --admin-gap: 12px;
  --admin-radius: 18px;
  width: 100% !important;
  min-height: 100vh !important;
  display: block !important;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--blue, #4f7eff) 20%, transparent), transparent 30%),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--purple, #9b6dff) 18%, transparent), transparent 28%),
    linear-gradient(135deg, var(--bg, #0b0d17), var(--bg2, #161929)) !important;
}

body.ops-shell::before {
  opacity: 0.72;
  background-size: 26px 26px !important;
}

.ops-sidebar {
  width: var(--admin-sidebar) !important;
  padding: 20px 16px !important;
  background:
    radial-gradient(circle at 36% 0%, color-mix(in srgb, var(--blue, #4f7eff) 20%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg1, #111422) 92%, #000), color-mix(in srgb, var(--bg, #0b0d17) 92%, #000)) !important;
  box-shadow: 18px 0 64px rgba(2, 6, 23, 0.26), inset -1px 0 0 var(--border, rgba(255,255,255,.08)) !important;
}

.brand-block {
  gap: 12px !important;
  margin-bottom: 26px !important;
}

.brand-mark {
  width: 50px !important;
  height: 50px !important;
  border-radius: 15px !important;
  background: var(--grad, linear-gradient(135deg,#4f7eff,#9b6dff)) !important;
}

.brand-block strong {
  font-size: 19px !important;
  line-height: 1.12 !important;
}

.ops-nav {
  gap: 7px !important;
}

.ops-nav a {
  min-height: 44px !important;
  padding: 11px 13px !important;
  border-radius: 14px !important;
}

.sidebar-status {
  margin-top: 26px !important;
  padding: 13px !important;
  border-radius: 16px !important;
}

.ops-main {
  width: calc(100% - var(--admin-sidebar)) !important;
  min-height: 100vh !important;
  margin-left: var(--admin-sidebar) !important;
  padding: 0 !important;
  overflow: visible !important;
}

.ops-topbar {
  min-height: 58px !important;
  padding: 9px 18px !important;
  background: color-mix(in srgb, var(--bg1, #111422) 86%, transparent) !important;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08)) !important;
}

.ops-content {
  width: min(100%, 1480px) !important;
  margin: 0 auto !important;
  padding: 14px 18px 42px !important;
}

.ops-panel,
.rail-card,
.metric-card,
.settings-column,
.sub-module {
  border-radius: var(--admin-radius) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card, var(--bg1)) 88%, transparent), color-mix(in srgb, var(--card2, var(--bg2)) 82%, transparent)) !important;
  border-color: var(--border, rgba(255,255,255,.08)) !important;
  box-shadow: 0 16px 42px color-mix(in srgb, var(--bg, #0b0d17) 42%, transparent) !important;
}

.ops-panel {
  margin-bottom: 10px !important;
  overflow: hidden !important;
}

.panel-title {
  min-height: 56px !important;
  padding: 10px 14px !important;
  gap: 10px !important;
}

.panel-title h2,
.panel-title h3 {
  font-size: 18px !important;
  line-height: 1.22 !important;
}

.panel-badge {
  min-height: 28px !important;
  align-items: center !important;
  padding: 4px 10px !important;
  color: var(--text2, #8b92c4) !important;
}

.inline-form.elevated-form {
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) 128px 138px 148px !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  align-items: center !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue, #4f7eff) 7%, transparent), color-mix(in srgb, var(--purple, #9b6dff) 5%, transparent)),
    color-mix(in srgb, var(--bg1, #111422) 88%, transparent) !important;
}

.inline-form input,
.inline-form select,
.inline-form button {
  height: 44px !important;
  min-width: 0 !important;
  border-radius: 14px !important;
}

.ops-filter-board {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(128px, 1fr)) !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08)) !important;
}

.ops-filter {
  min-height: 70px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--blue, #4f7eff) 18%, transparent), transparent 38%),
    color-mix(in srgb, var(--bg2, #161929) 78%, transparent) !important;
  border: 1px solid var(--border, rgba(255,255,255,.08)) !important;
}

.ops-filter.active {
  border-color: color-mix(in srgb, var(--blue, #4f7eff) 50%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue, #4f7eff) 22%, transparent), 0 18px 40px color-mix(in srgb, var(--blue, #4f7eff) 13%, transparent) !important;
}

.ops-filter span {
  color: var(--text2, #8b92c4) !important;
}

.ops-filter strong {
  color: var(--blue2, #7b9fff) !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

.table-wrap {
  border-radius: 0 0 var(--admin-radius) var(--admin-radius) !important;
  border: 0 !important;
  background: transparent !important;
  overflow-x: auto !important;
}

.table-wrap table {
  min-width: 760px !important;
}

table {
  font-size: 13px !important;
}

th {
  height: 40px !important;
  padding: 8px 14px !important;
  color: var(--text2, #8b92c4) !important;
  background: color-mix(in srgb, var(--blue, #4f7eff) 10%, var(--bg2, #161929)) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

td {
  height: 58px !important;
  padding: 9px 14px !important;
}

#bikeRows tr:nth-child(even) td {
  background: color-mix(in srgb, var(--blue, #4f7eff) 3%, transparent);
}

.vehicle-cell {
  gap: 10px !important;
}

.vehicle-cell strong {
  font-size: 14px !important;
}

.status-select {
  width: 132px !important;
  min-width: 132px !important;
  height: 38px !important;
  padding: 0 32px 0 14px !important;
  line-height: 38px !important;
  border-radius: 999px !important;
  color: var(--text, #e8eaff) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg1, #111422) 94%, #fff), color-mix(in srgb, var(--bg2, #161929) 92%, #fff)) !important;
  border: 1px solid color-mix(in srgb, var(--blue, #4f7eff) 24%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue, #4f7eff) 7%, transparent) !important;
  appearance: auto !important;
}

.ghost-btn,
.danger-btn,
.primary-btn,
.secondary-btn {
  min-height: 40px !important;
  border-radius: 14px !important;
}

#bikeRows .ghost-btn {
  min-width: 116px !important;
}

#bikeRows .danger-btn {
  min-width: 72px !important;
  background: linear-gradient(135deg, #ff5a3d, #ff7849) !important;
}

.metric-grid {
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.metric-card {
  min-height: 92px !important;
  padding: 13px 14px !important;
}

.theme-picker-wrap {
  right: 18px !important;
  bottom: 18px !important;
}

.theme-fab {
  width: 52px !important;
  height: 52px !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--blue, #4f7eff) 32%, transparent) !important;
}

.theme-drawer {
  width: 292px !important;
  max-height: min(72vh, 520px) !important;
  overflow: auto !important;
  padding: 14px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--purple, #9b6dff) 22%, transparent), transparent 32%),
    color-mix(in srgb, var(--bg1, #111422) 94%, transparent) !important;
}

#themeOptionList {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
}

.theme-option {
  min-height: 64px !important;
  align-items: flex-start !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue, #4f7eff) 12%, transparent), color-mix(in srgb, var(--purple, #9b6dff) 10%, transparent)) !important;
}

.theme-option.active {
  border-color: color-mix(in srgb, var(--blue, #4f7eff) 48%, transparent) !important;
}

.theme-icon {
  font-size: 18px !important;
}

.theme-name {
  font-weight: 900 !important;
}

html[data-yh-theme="light"] .ops-sidebar,
html[data-yh-theme="sand"] .ops-sidebar {
  color: #0f172a !important;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.94), color-mix(in srgb, var(--bg2) 88%, #fff)) !important;
}

html[data-yh-theme="light"] .ops-nav a,
html[data-yh-theme="sand"] .ops-nav a,
html[data-yh-theme="light"] .brand-block small,
html[data-yh-theme="sand"] .brand-block small,
html[data-yh-theme="light"] .sidebar-status small,
html[data-yh-theme="sand"] .sidebar-status small {
  color: color-mix(in srgb, var(--text) 68%, transparent) !important;
}

html[data-yh-theme="light"] .ops-nav a.active,
html[data-yh-theme="sand"] .ops-nav a.active,
html[data-yh-theme="light"] .ops-nav a:hover,
html[data-yh-theme="sand"] .ops-nav a:hover {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--blue) 10%, transparent) !important;
}

html[data-yh-theme="midnight"] body.ops-shell {
  background:
    radial-gradient(circle at 84% 10%, rgba(96,165,250,.24), transparent 28%),
    linear-gradient(145deg, #030712, #08142a 44%, #111827) !important;
}

html[data-yh-theme="emerald"] body.ops-shell {
  background:
    radial-gradient(circle at 10% 90%, rgba(16,185,129,.25), transparent 30%),
    linear-gradient(145deg, #04110d, #0c241a 52%, #061812) !important;
}

html[data-yh-theme="purple"] body.ops-shell {
  background:
    radial-gradient(circle at 82% 12%, rgba(236,72,153,.22), transparent 30%),
    linear-gradient(145deg, #0c0818, #1b103a 48%, #10051f) !important;
}

html[data-yh-theme="rose"] body.ops-shell {
  background:
    radial-gradient(circle at 72% 10%, rgba(249,168,212,.18), transparent 32%),
    linear-gradient(145deg, #170c10, #2c1420 50%, #14070d) !important;
}

html[data-yh-theme="titanium"] .ops-panel,
html[data-yh-theme="titanium"] .metric-card,
html[data-yh-theme="titanium"] .rail-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(255,255,255,.018) 9px 10px) !important;
}

html[data-yh-theme="sand"] .ops-panel,
html[data-yh-theme="sand"] .metric-card,
html[data-yh-theme="sand"] .rail-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(217,119,6,.10), transparent 32%),
    rgba(255,255,255,.88) !important;
}

@media (max-width: 1100px) {
  .inline-form.elevated-form {
    grid-template-columns: 1fr 120px 120px !important;
  }

  .inline-form.elevated-form .primary-btn {
    grid-column: 1 / -1;
  }

  .ops-filter-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .ops-sidebar {
    width: min(82vw, 260px) !important;
  }

  .ops-main {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .ops-content {
    padding: 12px 10px 82px !important;
  }

  .inline-form.elevated-form {
    grid-template-columns: 1fr !important;
  }

  .ops-filter-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.ride-body,
.mobile-panel {
  width: 100%;
}

@media (min-width: 900px) {
  .ride-body,
  .mobile-panel {
    max-width: 720px;
  }
}

@media (max-width: 900px) {
  .ops-shell {
    display: block !important;
    width: 100% !important;
  }

  .ops-main {
    margin-left: 0 !important;
  }

  .ops-content {
    padding: 16px 12px 32px !important;
  }
}

/* Phase 1 unified app-grade visual layer. Keep this at the end. */
:root {
  --yh-bg: #eef3ff;
  --yh-bg-2: #f8fbff;
  --yh-surface: rgba(255,255,255,.88);
  --yh-surface-2: rgba(241,245,255,.92);
  --yh-text: #111827;
  --yh-muted: #64748b;
  --yh-line: rgba(99,102,241,.18);
  --yh-primary: #2563eb;
  --yh-secondary: #7c3aed;
  --yh-accent: #06b6d4;
  --yh-success: #10b981;
  --yh-danger: #ef4444;
  --yh-warning: #f59e0b;
  --yh-grad: linear-gradient(135deg,#2563eb 0%,#7c3aed 58%,#06b6d4 100%);
  --yh-app-bg: radial-gradient(circle at 12% 4%,rgba(37,99,235,.22),transparent 32%),radial-gradient(circle at 88% 2%,rgba(124,58,237,.18),transparent 30%),linear-gradient(180deg,#f8fbff 0%,#eef2ff 100%);
  --yh-admin-bg: radial-gradient(circle at 18% 10%,rgba(37,99,235,.18),transparent 32%),radial-gradient(circle at 92% 0%,rgba(124,58,237,.18),transparent 30%),linear-gradient(135deg,#f8fbff,#eef2ff);
  --yh-sidebar-bg: linear-gradient(180deg,#10172f,#160f35);
  --yh-shadow: 0 22px 70px rgba(37,99,235,.16);
}

html,
body {
  width: 100% !important;
  min-height: 100vh !important;
}

body {
  color: var(--yh-text) !important;
  background: var(--yh-app-bg) !important;
}

body.ops-shell,
.ops-shell {
  width: 100% !important;
  min-height: 100vh !important;
  background: var(--yh-admin-bg) !important;
}

.ops-sidebar {
  background: var(--yh-sidebar-bg) !important;
}

.ops-main {
  min-height: 100vh !important;
}

.ops-content {
  width: min(100%, 1560px) !important;
  max-width: none !important;
  margin: 0 auto !important;
}

.ops-panel,
.rail-card,
.metric-card,
.ride-card,
.login-card,
.user-card,
.orders-card,
.timer-card,
.fee-bar,
.settings-card,
.card,
.mobile-sheet article,
.detail-sheet article {
  color: var(--yh-text) !important;
  background: var(--yh-surface) !important;
  border: 1px solid var(--yh-line) !important;
  box-shadow: var(--yh-shadow) !important;
  backdrop-filter: blur(18px);
}

.ops-panel,
.rail-card,
.metric-card {
  border-radius: 18px !important;
}

.command-hero,
.app-hero,
.vehicle-hero {
  color: #fff !important;
  background:
    radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--yh-accent) 34%, transparent), transparent 28%),
    var(--yh-grad) !important;
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: var(--yh-shadow) !important;
}

.primary-btn,
.rent-action,
.theme-fab,
.yh-theme-fab {
  color: #fff !important;
  background: var(--yh-grad) !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 42px color-mix(in srgb, var(--yh-primary) 30%, transparent) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

.primary-btn:hover:not(:disabled),
.rent-action:hover:not(:disabled),
.yh-theme-fab:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.primary-btn:active:not(:disabled),
.rent-action:active:not(:disabled),
.ghost-btn:active:not(:disabled),
.danger-btn:active:not(:disabled),
.yh-theme-fab:active {
  transform: scale(.98);
}

.ghost-btn,
.secondary-btn {
  color: var(--yh-text) !important;
  background: color-mix(in srgb, var(--yh-surface) 86%, white) !important;
  border: 1px solid var(--yh-line) !important;
  border-radius: 14px !important;
}

.danger-btn {
  color: #fff !important;
  background: linear-gradient(135deg,var(--yh-danger),#f97316) !important;
  border-radius: 14px !important;
}

input:not([type=checkbox]):not([type=radio]),
textarea,
select {
  color: var(--yh-text) !important;
  background: color-mix(in srgb, var(--yh-surface) 88%, white) !important;
  border: 1px solid var(--yh-line) !important;
  border-radius: 14px !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--yh-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--yh-primary) 16%, transparent) !important;
}

th {
  color: color-mix(in srgb, var(--yh-text) 72%, transparent) !important;
  background: color-mix(in srgb, var(--yh-primary) 10%, var(--yh-surface-2)) !important;
}

td {
  color: var(--yh-text) !important;
}

.pill.available,
.pill.completed,
.pill.approved,
.vh-status.available {
  color: var(--yh-success) !important;
  background: color-mix(in srgb, var(--yh-success) 12%, transparent) !important;
}

.pill.in_use,
.pill.renting,
.vh-status.in_use {
  color: var(--yh-primary) !important;
  background: color-mix(in srgb, var(--yh-primary) 12%, transparent) !important;
}

.pill.pending,
.pill.maintenance {
  color: var(--yh-warning) !important;
  background: color-mix(in srgb, var(--yh-warning) 14%, transparent) !important;
}

.pill.risk,
.pill.rejected {
  color: var(--yh-danger) !important;
  background: color-mix(in srgb, var(--yh-danger) 12%, transparent) !important;
}

/* Admin layout tightening */
body.ops-shell {
  --admin-sidebar: 220px;
}

.ops-sidebar {
  width: var(--admin-sidebar) !important;
}

.ops-main {
  width: calc(100% - var(--admin-sidebar)) !important;
  margin-left: var(--admin-sidebar) !important;
}

.ops-content {
  padding: 16px 18px 36px !important;
}

.metric-grid {
  gap: 12px !important;
}

.ops-filter-board {
  gap: 10px !important;
  padding: 12px 14px !important;
}

.inline-form.elevated-form {
  gap: 10px !important;
}

.table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  border-radius: 18px !important;
}

.qr-dialog,
dialog:has(#qrImage) {
  width: min(92vw, 430px) !important;
  max-height: min(92vh, 680px) !important;
  overflow: auto !important;
}

#qrImage,
.qr-dialog img {
  display: block !important;
  width: min(72vw, 300px) !important;
  height: min(72vw, 300px) !important;
  max-width: 300px !important;
  max-height: 300px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  image-rendering: pixelated;
  background: #fff !important;
  border-radius: 16px !important;
  margin: 0 auto !important;
}

/* Mobile client polish */
.ride-shell,
.user-shell,
.login-shell {
  min-height: 100vh !important;
  background: var(--yh-app-bg) !important;
}

.ride-body,
.mobile-panel {
  width: 100% !important;
  max-width: 560px !important;
}

.rent-action {
  min-height: 54px !important;
  font-size: 17px !important;
}

.floating-rent-bar {
  background: color-mix(in srgb, var(--yh-surface) 92%, white) !important;
  border: 1px solid var(--yh-line) !important;
}

.agreement-modal,
.detail-sheet article {
  border-radius: 26px 26px 0 0 !important;
}

/* Unified theme switch */
.yh-theme-switch {
  position: fixed;
  right: 18px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 3000;
}

.yh-theme-fab {
  width: 56px;
  height: 56px;
  padding: 0;
  font-weight: 900;
}

.yh-theme-panel {
  position: absolute;
  right: 0;
  bottom: 68px;
  width: min(320px, calc(100vw - 28px));
  padding: 14px;
  border-radius: 22px;
  color: var(--yh-text);
  background: var(--yh-surface);
  border: 1px solid var(--yh-line);
  box-shadow: var(--yh-shadow);
  backdrop-filter: blur(18px);
}

.yh-theme-panel strong {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
}

.yh-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.yh-theme-grid button {
  min-height: 62px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 9px;
  color: var(--yh-text);
  background: color-mix(in srgb, var(--yh-surface-2) 90%, white);
  border: 1px solid var(--yh-line);
  border-radius: 16px;
}

.yh-theme-grid button.active {
  color: var(--yh-primary);
  border-color: color-mix(in srgb, var(--yh-primary) 52%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yh-primary) 18%, transparent);
}

.yh-theme-grid span {
  font-size: 18px;
  line-height: 1;
}

.yh-theme-grid em {
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.theme-picker-wrap,
.theme-drawer {
  display: none !important;
}

/* Hard theme overrides: make switching visibly affect old inline pages too. */
html[data-yh-theme] body,
html[data-yh-theme] body.ops-shell,
html[data-yh-theme] .ops-main,
html[data-yh-theme] .ops-content,
html[data-yh-theme] .ride-shell {
  background: var(--yh-admin-bg, var(--yh-app-bg, var(--bg))) !important;
  color: var(--yh-text, var(--text)) !important;
}

html[data-yh-theme] .ops-sidebar {
  background: var(--yh-sidebar-bg, var(--card)) !important;
  color: #fff !important;
}

html[data-yh-theme] .ops-topbar {
  background: color-mix(in srgb, var(--yh-bg, #fff) 80%, transparent) !important;
  border-bottom: 1px solid var(--yh-line, var(--border)) !important;
}

html[data-yh-theme] .ops-panel,
html[data-yh-theme] .metric-card,
html[data-yh-theme] .rail-card,
html[data-yh-theme] .settings-column,
html[data-yh-theme] .fee-bar,
html[data-yh-theme] .timer-card,
html[data-yh-theme] .login-card,
html[data-yh-theme] .user-card,
html[data-yh-theme] .orders-card,
html[data-yh-theme] .pricing-plan-box {
  background: var(--yh-surface, var(--card)) !important;
  border-color: var(--yh-line, var(--border)) !important;
  color: var(--yh-text, var(--text)) !important;
  box-shadow: var(--yh-shadow, var(--sh)) !important;
}

html[data-yh-theme] .dashboard-hero,
html[data-yh-theme] .vehicle-hero,
html[data-yh-theme] .primary-btn,
html[data-yh-theme] .rent-action,
html[data-yh-theme] .yh-theme-fab {
  background: var(--yh-grad, var(--grad)) !important;
}

html[data-yh-theme] .ops-nav a.active,
html[data-yh-theme] .ops-nav a:hover {
  background: color-mix(in srgb, var(--yh-primary, #2563eb) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--yh-primary, #2563eb) 34%, transparent) !important;
}

html[data-yh-theme="campus"] .ops-sidebar { background: linear-gradient(180deg,#063f35,#075c4d) !important; }
html[data-yh-theme="neon"] .ops-sidebar { background: linear-gradient(180deg,#020617,#111827) !important; }
html[data-yh-theme="white"] .ops-sidebar { background: linear-gradient(180deg,#ffffff,#f8fafc) !important; color: #0f172a !important; }
html[data-yh-theme="orange"] .ops-sidebar { background: linear-gradient(180deg,#431407,#7c2d12) !important; }

html[data-yh-theme="campus"] .dashboard-hero,
html[data-yh-theme="campus"] .vehicle-hero { background: linear-gradient(135deg,#059669,#14b8a6,#0ea5e9) !important; }
html[data-yh-theme="neon"] .dashboard-hero,
html[data-yh-theme="neon"] .vehicle-hero { background: linear-gradient(135deg,#050816,#22d3ee,#a855f7) !important; }
html[data-yh-theme="white"] .dashboard-hero,
html[data-yh-theme="white"] .vehicle-hero { background: linear-gradient(135deg,#2563eb,#475569) !important; }
html[data-yh-theme="orange"] .dashboard-hero,
html[data-yh-theme="orange"] .vehicle-hero { background: linear-gradient(135deg,#f97316,#facc15,#fb7185) !important; }

dialog:not([open]) {
  display: none !important;
}

#qrDialog[open]:not([data-intentional-open="1"]) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Phase 2: pricing package, timer and QR dialog fixes */
.pricing-plan-box {
  margin: 14px 0;
  padding: 14px;
  border-radius: 22px;
  background: var(--yh-surface, var(--card));
  border: 1px solid var(--yh-line, var(--border));
  box-shadow: 0 16px 42px rgba(15, 23, 42, .08);
}

.client-rent-package {
  margin-top: 16px;
  margin-bottom: 14px;
}

.client-rent-package[hidden] {
  display: none !important;
}

/* Client toast must stay compact on mobile. */
#appToast.app-toast {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important;
  z-index: 5000 !important;
  display: block !important;
  width: min(88vw, 360px) !important;
  min-width: 0 !important;
  max-width: 360px !important;
  min-height: 0 !important;
  max-height: 96px !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: hidden !important;
  color: var(--yh-text, #0f172a) !important;
  background: color-mix(in srgb, var(--yh-surface, #fff) 96%, transparent) !important;
  border: 1px solid var(--yh-line, rgba(148,163,184,.32)) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .22) !important;
  backdrop-filter: blur(16px) !important;
}

#appToast.app-toast.error {
  color: var(--yh-danger, #dc2626) !important;
  border-color: color-mix(in srgb, var(--yh-danger, #dc2626) 34%, transparent) !important;
}

#appToast.app-toast.success {
  color: var(--yh-success, #059669) !important;
  border-color: color-mix(in srgb, var(--yh-success, #059669) 34%, transparent) !important;
}

#appToast.app-toast[hidden] {
  display: none !important;
}

.pricing-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.pricing-plan-head > div {
  min-width: 0;
}

.pricing-plan-head strong {
  font-size: 14px;
  color: var(--yh-text, var(--text));
}

.pricing-plan-head span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--yh-muted, var(--text2));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pricing-toggle-btn {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--yh-primary, #2563eb) 28%, transparent);
  background: color-mix(in srgb, var(--yh-primary, #2563eb) 10%, white);
  color: var(--yh-primary, var(--blue));
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--yh-primary, #2563eb) 10%, transparent);
}

.pricing-plan-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pricing-plan {
  min-height: 96px;
  padding: 10px 8px;
  border-radius: 16px;
  text-align: left;
  color: var(--yh-text, var(--text));
  background: color-mix(in srgb, var(--yh-surface-2, #f8fafc) 86%, white);
  border: 1px solid var(--yh-line, var(--border));
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.pricing-plan:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--yh-primary, #2563eb) 38%, transparent);
}

.pricing-plan strong,
.pricing-plan span,
.pricing-plan em {
  display: block;
}

.pricing-plan strong {
  font-size: 13px;
  font-weight: 900;
}

.pricing-plan span {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 900;
  color: var(--yh-primary, var(--blue));
}

.pricing-plan em {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.35;
  font-style: normal;
  color: var(--yh-muted, var(--text2));
}

.pricing-plan.active {
  border-color: color-mix(in srgb, var(--yh-primary, #2563eb) 55%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--yh-primary, #2563eb) 16%, transparent);
  transform: translateY(-1px);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--yh-primary, #2563eb) 16%, white),
      color-mix(in srgb, var(--yh-accent, #8b5cf6) 12%, white)
    ) !important;
}

.pricing-plan-box.collapsed {
  margin-bottom: 8px;
  padding: 12px;
}

.pricing-plan-box.collapsed .pricing-plan-options {
  grid-template-columns: 1fr;
}

.pricing-plan-box.collapsed .pricing-plan:not(.active) {
  display: none;
}

.pricing-plan-box.collapsed .pricing-plan.active {
  min-height: 0;
  padding: 12px 14px;
  transform: none;
}

.pricing-plan-box.collapsed .pricing-plan.active em {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.time-grid {
  display: grid !important;
  place-items: center;
  gap: 0 !important;
}

.time-grid .tg-seg:not(:first-child),
.time-grid .tg-colon {
  display: none !important;
}

.time-grid .tg-seg:first-child {
  width: 100%;
}

.time-grid .tg-seg:first-child .tg-num {
  min-width: 0 !important;
  font-size: clamp(42px, 11vw, 72px) !important;
  letter-spacing: .02em;
}

.time-grid .tg-seg:first-child .tg-lbl {
  margin-top: 6px;
  font-size: 12px !important;
}

.qr-dialog {
  max-width: min(420px, calc(100vw - 32px)) !important;
  max-height: min(86vh, 720px) !important;
  overflow: auto !important;
}

.qr-dialog img,
#qrImage {
  width: min(300px, 72vw) !important;
  height: min(300px, 72vw) !important;
  object-fit: contain !important;
  image-rendering: pixelated;
}

dialog::backdrop {
  background: rgba(15, 23, 42, .48) !important;
  backdrop-filter: blur(8px);
}

.pricing-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.pricing-settings-grid label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  color: var(--yh-muted, #64748b);
}

.pricing-settings-grid input {
  width: 100%;
  min-height: 38px;
  border-radius: 12px;
}

@media (max-width: 460px) {
  .pricing-plan-options {
    grid-template-columns: 1fr;
  }

  .client-rent-package {
    margin-top: 12px;
  }
}

html[data-yh-theme="neon"] .ops-sidebar,
html[data-yh-theme="neon"] .yh-theme-panel,
html[data-yh-theme="neon"] .ops-panel,
html[data-yh-theme="neon"] .ride-card,
html[data-yh-theme="neon"] .timer-card {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--yh-primary) 24%, transparent), var(--yh-shadow) !important;
}

html[data-yh-theme="white"] .ops-sidebar {
  color: var(--yh-text) !important;
  border-right: 1px solid var(--yh-line) !important;
}

html[data-yh-theme="white"] .ops-nav a,
html[data-yh-theme="white"] .brand-block small,
html[data-yh-theme="white"] .sidebar-status small {
  color: var(--yh-muted) !important;
}

@media (max-width: 900px) {
  .ops-sidebar {
    width: min(82vw, 280px) !important;
  }

  .ops-main {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .ops-content {
    padding: 12px 10px 82px !important;
  }

  .yh-theme-switch {
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }
}

/* Dedicated pricing settings page */
.pricing-admin-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  padding: 16px;
}
.pricing-admin-card {
  border: 1px solid var(--yh-line, var(--border));
  border-radius: 22px;
  padding: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.62)), var(--yh-surface, var(--card));
  box-shadow: 0 18px 55px rgba(15,23,42,.08);
}
.pricing-admin-card.primary {
  border-color: color-mix(in srgb, var(--yh-primary, #2563eb) 34%, transparent);
  box-shadow: 0 22px 70px color-mix(in srgb, var(--yh-primary, #2563eb) 18%, transparent);
}
.pricing-admin-card.wide { grid-column: 1 / -1; }
.pricing-admin-card h3 { margin: 0 0 8px; color: var(--yh-text, var(--text)); font-size: 18px; }
.pricing-admin-card p,
.pricing-admin-card small { display: block; margin: 0 0 14px; color: var(--yh-muted, var(--text2)); line-height: 1.6; }
.pricing-admin-card label { display: grid; gap: 7px; margin-top: 10px; color: var(--yh-muted, var(--text2)); font-weight: 700; font-size: 13px; }
.pricing-admin-card input {
  height: 46px;
  border: 1px solid var(--yh-line, var(--border));
  border-radius: 14px;
  padding: 0 14px;
  background: rgba(255,255,255,.82);
  color: var(--yh-text, var(--text));
  font-size: 16px;
  font-weight: 800;
  outline: none;
}
.pricing-admin-card input:focus {
  border-color: var(--yh-primary, var(--blue));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--yh-primary, #2563eb) 16%, transparent);
}
html[data-yh-theme="neon"] .pricing-admin-card,
html[data-yh-theme="tech"] .pricing-admin-card { background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.045)), var(--yh-surface, var(--card)); }
html[data-yh-theme="neon"] .pricing-admin-card input,
html[data-yh-theme="tech"] .pricing-admin-card input { background: rgba(255,255,255,.1); }
@media (max-width: 760px) {
  .pricing-admin-board { grid-template-columns: 1fr; padding: 10px; }
  .pricing-admin-card { border-radius: 18px; padding: 14px; }
}

/* Order pricing package column */
.pricing-cell {
  min-width: 112px;
}
.pricing-cell strong,
.pricing-cell small {
  display: block;
  line-height: 1.35;
}
.pricing-cell strong {
  color: var(--yh-primary, var(--blue));
  font-weight: 900;
}
.pricing-cell small {
  color: var(--yh-muted, var(--text3));
  font-size: 11px;
  margin-top: 3px;
  white-space: nowrap;
}

/* Client mobile flow polish: login first, profile in top-right drawer */
.ride-body {
  gap: 12px !important;
}

#loginSheet { order: 1; }
.vehicle-hero { order: 2; }
.fee-bar { order: 3; }
.timer-card { order: 4; }
#pricingPlanBox { order: 5; }
#agreeRowWrap { order: 6; }
#rentBtnWrap { order: 7; }
.ride-steps { order: 8; }

#floatingRentBar {
  display: none !important;
}

body > .yh-theme-switch {
  display: none !important;
}

.client-profile-body .yh-theme-switch {
  display: block !important;
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  margin-top: 8px;
}

.client-profile-body .yh-theme-fab {
  width: 100% !important;
  height: 44px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}

.client-profile-body .yh-theme-panel {
  position: static !important;
  width: 100% !important;
  margin-top: 10px;
  box-shadow: none !important;
}

.client-theme-section {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  background: var(--yh-surface, var(--card));
  border: 1px solid var(--yh-line, var(--border));
}

.client-theme-section > strong {
  color: var(--yh-text, var(--text));
  font-size: 15px;
}

.client-theme-section > span {
  margin-top: -4px;
  color: var(--yh-muted, var(--text2));
  font-size: 12px;
}

#rentBtnWrap {
  display: block;
}

#rentBtnWrap[hidden] {
  display: none !important;
}

#rentBtnWrap .rent-action {
  height: 58px !important;
  border-radius: 22px !important;
  font-size: 18px !important;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--yh-primary, #2563eb) 28%, transparent) !important;
}

.timer-card {
  padding: 14px !important;
}

.timer-card .timer-head {
  margin-bottom: 8px !important;
}

.timer-card .time-grid {
  margin-top: 8px !important;
}

.timer-card .tg-num {
  font-size: 38px !important;
  color: var(--yh-text, var(--text)) !important;
}

.ride-money {
  margin-top: 10px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  color: var(--yh-text, var(--text)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--yh-primary, #2563eb) 10%, white),
      color-mix(in srgb, var(--yh-accent, #8b5cf6) 7%, white)
    ) !important;
  border: 1px solid var(--yh-line, var(--border)) !important;
  box-shadow: none !important;
}

.ride-money span {
  color: var(--yh-muted, var(--text2)) !important;
}

.ride-money strong {
  color: var(--yh-primary, var(--blue)) !important;
  font-size: 24px !important;
}

.ride-live-note {
  margin-top: 8px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  color: var(--yh-muted, var(--text2)) !important;
  background: color-mix(in srgb, var(--yh-surface-2, #f8fafc) 80%, white) !important;
  border-color: var(--yh-line, var(--border)) !important;
}

.client-profile-drawer {
  position: fixed;
  inset: 0;
  z-index: 4200;
}

.client-profile-drawer[hidden] {
  display: none !important;
}

.client-profile-mask {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(8px);
}

.client-profile-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(88vw, 390px);
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px calc(env(safe-area-inset-bottom, 0px) + 18px);
  overflow-y: auto;
  background: var(--yh-app-bg, var(--yh-surface, #fff));
  border-left: 1px solid var(--yh-line, rgba(148, 163, 184, .26));
  box-shadow: -24px 0 70px rgba(15, 23, 42, .22);
}

.client-profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.client-profile-head strong {
  display: block;
  font-size: 22px;
  color: var(--yh-text, var(--text));
}

.client-profile-head span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--yh-muted, var(--text2));
}

.client-profile-body {
  display: grid;
  gap: 12px;
}

.agreement-confirm-bar {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 10px;
  padding: 14px 18px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: color-mix(in srgb, var(--yh-surface, #fff) 94%, transparent);
  border-top: 1px solid var(--yh-line, var(--border));
  backdrop-filter: blur(14px);
}

.agreement-read-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--yh-text, var(--text));
  font-size: 13px;
  font-weight: 800;
}

.agreement-read-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--yh-primary, var(--blue));
}

@media (max-width: 520px) {
  .pricing-plan-options {
    grid-template-columns: 1fr !important;
  }

  .pricing-plan {
    min-height: 0 !important;
    padding: 14px !important;
  }

  .timer-card {
    padding: 14px !important;
  }
}

/* Final order table compression: keep actions visible without horizontal hunting */
#orders .quick-actions {
  align-items: center;
  flex-wrap: wrap;
}

.order-date-filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.order-date-filters input {
  height: 38px;
  min-width: 150px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--yh-line, var(--border));
  background: var(--yh-surface, #fff);
  color: var(--yh-text, var(--text));
  font-weight: 800;
}

.order-date-filters .quick-btn.active {
  color: #fff;
  background: linear-gradient(135deg, var(--yh-primary, #2563eb), var(--yh-accent, #8b5cf6));
  border-color: transparent;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--yh-primary, #2563eb) 22%, transparent);
}

#orders .table-wrap {
  overflow-x: auto;
}

#orders .table-wrap table {
  table-layout: fixed !important;
  min-width: 1220px !important;
}

#orders th,
#orders td {
  padding-inline: 10px !important;
  white-space: nowrap;
}

#orders th:nth-child(1), #orders td:nth-child(1) { width: 58px !important; }
#orders th:nth-child(2), #orders td:nth-child(2) { width: 76px !important; }
#orders th:nth-child(3), #orders td:nth-child(3) { width: 112px !important; }
#orders th:nth-child(4), #orders td:nth-child(4) { width: 78px !important; }
#orders th:nth-child(5), #orders td:nth-child(5) { width: 110px !important; }
#orders th:nth-child(6), #orders td:nth-child(6) { width: 118px !important; }
#orders th:nth-child(7), #orders td:nth-child(7) { width: 112px !important; }
#orders th:nth-child(8), #orders td:nth-child(8) { width: 112px !important; }
#orders th:nth-child(9), #orders td:nth-child(9) { width: 106px !important; }
#orders th:nth-child(10), #orders td:nth-child(10) { width: 82px !important; }
#orders th:nth-child(11), #orders td:nth-child(11) { width: 78px !important; }
#orders th:nth-child(12), #orders td:nth-child(12) { width: 70px !important; }
#orders th:nth-child(13), #orders td:nth-child(13) {
  width: 176px !important;
  min-width: 176px !important;
}

#orders .row-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(48px, 1fr));
  gap: 6px !important;
  min-width: 158px !important;
}

#orders .row-actions .small {
  min-width: 0 !important;
  width: 100%;
  padding-inline: 6px !important;
  font-size: 12px !important;
}

#orders .live-duration {
  padding-block: 10px !important;
  border-radius: 16px !important;
  text-align: center;
}

#orders .pricing-cell small {
  font-size: 10px !important;
}

/* Mobile customer timer card: full-width, clear, no cramped middle block */
body.client-page .timer-card,
.ride-body .timer-card {
  width: 100% !important;
  box-sizing: border-box !important;
}

body.client-page .timer-card .time-grid,
.ride-body .timer-card .time-grid {
  display: block !important;
  width: 100% !important;
}

body.client-page .timer-card .tg-seg,
.ride-body .timer-card .tg-seg {
  width: 100% !important;
  box-sizing: border-box !important;
}

body.client-page .timer-card .tg-num,
.ride-body .timer-card .tg-num {
  display: block !important;
  width: 100% !important;
  min-height: 92px !important;
  padding: 16px 10px 10px !important;
  border-radius: 20px !important;
  text-align: center !important;
  font-size: 54px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

body.client-page .timer-card .ride-money,
.ride-body .timer-card .ride-money,
body.client-page .timer-card .ride-live-note,
.ride-body .timer-card .ride-live-note {
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 430px) {
  body.client-page .timer-card .tg-num,
  .ride-body .timer-card .tg-num {
    font-size: 46px !important;
    min-height: 82px !important;
  }

  .order-date-filters {
    width: 100%;
    margin-left: 0;
  }

  .order-date-filters input {
    flex: 1 1 160px;
  }
}

/* 2026-06-11 admin order layout repair */
body.ops-shell > .yh-theme-switch {
  display: none !important;
}

.theme-settings-card {
  grid-column: 1 / -1;
}

.theme-settings-help {
  margin: 0 0 14px;
  color: var(--yh-muted, var(--text2));
  font-size: 13px;
}

.settings-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.settings-theme-grid button {
  min-height: 92px;
  padding: 16px;
  text-align: left;
  border: 1px solid var(--yh-line, var(--border));
  border-radius: 18px;
  color: var(--yh-text, var(--text));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--yh-primary, #2563eb) 11%, white), color-mix(in srgb, var(--yh-accent, #8b5cf6) 8%, white));
  box-shadow: 0 14px 34px rgba(15,23,42,.06);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.settings-theme-grid button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--yh-primary, #2563eb) 16%, transparent);
}

.settings-theme-grid button.active {
  color: #fff;
  border-color: transparent;
  background: var(--yh-grad, var(--grad));
  box-shadow: 0 20px 48px color-mix(in srgb, var(--yh-primary, #2563eb) 28%, transparent);
}

.settings-theme-grid strong,
.settings-theme-grid span {
  display: block;
}

.settings-theme-grid strong {
  font-size: 16px;
  font-weight: 900;
}

.settings-theme-grid span {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: color-mix(in srgb, currentColor 72%, transparent);
}

#orders .table-wrap {
  overflow-x: visible !important;
}

#orders .table-wrap table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
  border-collapse: separate;
  border-spacing: 0 8px;
}

#orders thead th {
  padding: 12px 10px !important;
  background: color-mix(in srgb, var(--yh-primary, #2563eb) 10%, white) !important;
}

#orders tbody tr {
  background: color-mix(in srgb, var(--yh-surface, #fff) 90%, transparent);
  box-shadow: 0 10px 26px rgba(15,23,42,.05);
}

#orders tbody td {
  padding: 12px 10px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  background: transparent !important;
}

#orders th:nth-child(1), #orders td:nth-child(1) { width: 62px !important; }
#orders th:nth-child(2), #orders td:nth-child(2) { width: 132px !important; }
#orders th:nth-child(3), #orders td:nth-child(3) { width: 82px !important; }
#orders th:nth-child(4), #orders td:nth-child(4) { width: 180px !important; }
#orders th:nth-child(5), #orders td:nth-child(5) { width: 106px !important; }
#orders th:nth-child(6), #orders td:nth-child(6) { width: 106px !important; }
#orders th:nth-child(7), #orders td:nth-child(7) { width: 104px !important; }
#orders th:nth-child(8), #orders td:nth-child(8) { width: 92px !important; }
#orders th:nth-child(9), #orders td:nth-child(9) { width: 86px !important; }
#orders th:nth-child(10), #orders td:nth-child(10) { width: 78px !important; }
#orders th:nth-child(11), #orders td:nth-child(11) {
  width: 230px !important;
  min-width: 230px !important;
  position: static !important;
}

#orders .user-cell strong,
#orders .user-cell small,
#orders .plate-cell strong,
#orders .plate-cell small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#orders .user-cell small,
#orders .plate-cell small {
  margin-top: 4px;
  color: var(--yh-muted, var(--text2));
  font-size: 11px;
}

#orders .row-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px !important;
  min-width: 0 !important;
  width: 100%;
}

#orders .row-actions .small {
  height: 42px;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 900;
}

#orders .row-actions .ghost-btn:first-child:last-child,
#orders .row-actions .ghost-btn:first-child:nth-last-child(2) {
  grid-column: auto;
}

#orders .money-cell strong {
  white-space: nowrap;
}

@media (max-width: 1280px) {
  #orders .table-wrap {
    overflow-x: auto !important;
  }

  #orders .table-wrap table {
    min-width: 1180px !important;
  }
}

.mobile-order-cards {
  display: none;
}

@media (max-width: 760px) {
  body.ops-shell {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.ops-shell .ops-layout,
  body.ops-shell .ops-main,
  body.ops-shell .ops-content,
  body.ops-shell .view {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.ops-shell .ops-sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 12px !important;
    border-radius: 0 0 24px 24px !important;
  }

  body.ops-shell .brand,
  body.ops-shell .ops-status {
    display: none !important;
  }

  body.ops-shell .ops-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.ops-shell .ops-nav a {
    min-height: 42px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    text-align: center !important;
  }

  body.ops-shell .ops-header,
  body.ops-shell .topbar {
    padding: 16px !important;
  }

  body.ops-shell h1 {
    font-size: 34px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  body.ops-shell .ops-content {
    padding: 12px !important;
  }

  #orders .panel {
    padding: 14px !important;
    border-radius: 22px !important;
  }

  #orders .panel-title,
  #orders .order-filter-board {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #orders .search-box,
  #orders .order-date-filters {
    width: 100% !important;
  }

  #orders .table-wrap {
    display: none !important;
  }

  #mobileOrderCards {
    display: grid !important;
    gap: 12px !important;
    margin-top: 14px !important;
  }

  .mobile-order-card {
    padding: 14px !important;
    border: 1px solid var(--yh-line, var(--border));
    border-radius: 20px;
    background: color-mix(in srgb, var(--yh-surface, #fff) 94%, transparent);
    box-shadow: 0 14px 34px rgba(15,23,42,.08);
  }

  .mobile-order-top,
  .mobile-order-user,
  .mobile-order-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-order-top strong {
    font-size: 17px;
    font-weight: 900;
  }

  .mobile-order-user {
    margin-top: 8px;
    color: var(--yh-muted, var(--text2));
  }

  .mobile-order-user span {
    color: var(--yh-text, var(--text));
    font-weight: 800;
  }

  .mobile-order-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  .mobile-order-grid div {
    padding: 10px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--yh-primary, #2563eb) 8%, white);
  }

  .mobile-order-grid small,
  .mobile-order-grid b {
    display: block;
  }

  .mobile-order-grid small {
    color: var(--yh-muted, var(--text2));
    font-size: 12px;
  }

  .mobile-order-grid b {
    margin-top: 4px;
    color: var(--yh-text, var(--text));
    font-size: 15px;
  }

  .mobile-order-plan {
    margin-top: 10px;
    padding: 10px;
    border-radius: 14px;
    color: var(--yh-muted, var(--text2));
    background: color-mix(in srgb, var(--yh-accent, #8b5cf6) 7%, white);
  }

  .mobile-order-actions {
    margin-top: 12px;
  }

  .mobile-order-actions .primary-btn,
  .mobile-order-actions .ghost-btn {
    flex: 1 1 0;
    height: 48px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
  }

  #bikes .table-wrap {
    display: none !important;
  }

  #bikeCardView {
    display: grid !important;
    gap: 12px !important;
  }

  #bikes .panel-title {
    gap: 10px !important;
  }

  #bikes .panel-title > div:last-child {
    width: 100% !important;
    justify-content: space-between !important;
  }

  #bikes .view-toggle {
    display: none !important;
  }

  #bikes .inline-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  #bikes .inline-form input,
  #bikes .inline-form button {
    width: 100% !important;
    height: 48px !important;
    border-radius: 16px !important;
  }

  #bikes .ops-filter-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #bikes .ops-filter {
    min-height: 76px !important;
    padding: 12px !important;
  }

  .bike-mobile-card {
    padding: 14px !important;
    border: 1px solid var(--yh-line, var(--border));
    border-radius: 22px;
    background: color-mix(in srgb, var(--yh-surface, #fff) 94%, transparent);
    box-shadow: 0 14px 34px rgba(15,23,42,.08);
  }

  .bike-mobile-top,
  .bike-mobile-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .bike-mobile-top small {
    display: block;
    color: var(--yh-muted, var(--text2));
    font-size: 12px;
  }

  .bike-mobile-top strong {
    display: block;
    margin-top: 2px;
    font-size: 20px;
    font-weight: 950;
    color: var(--yh-text, var(--text));
  }

  .bike-mobile-status {
    margin-top: 12px;
  }

  .bike-card-status,
  .bike-card-lock {
    display: block;
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 16px !important;
  }

  .bike-card-lock {
    padding: 13px 14px;
    color: var(--yh-muted, var(--text2));
    background: color-mix(in srgb, var(--yh-primary, #2563eb) 8%, white);
  }

  .bike-mobile-actions {
    margin-top: 12px;
  }

  .bike-mobile-actions .ghost-btn,
  .bike-mobile-actions .danger-btn {
    flex: 1 1 0;
    height: 48px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
  }

  .bike-mobile-note {
    margin: 10px 0 0;
    color: var(--yh-muted, var(--text2));
    line-height: 1.5;
  }
}

/* 2026-06-11: customer rental page compact one-screen layout */
.ride-body {
  max-width: 480px !important;
  padding: 10px 12px calc(var(--safe-bot, 0px) + 12px) !important;
  gap: 10px !important;
}

.ride-body > .orders-card {
  display: none !important;
}

.client-profile-body .orders-card {
  display: block !important;
}

.vehicle-hero {
  min-height: 118px !important;
  padding: 16px !important;
  border-radius: 24px !important;
}

.vehicle-hero .vh-icon,
.vh-icon {
  font-size: 26px !important;
}

.vehicle-hero .vh-plate,
.vh-plate {
  margin-top: 14px !important;
  font-size: clamp(30px, 9vw, 42px) !important;
  line-height: 1.05 !important;
}

.vehicle-hero .vh-meta,
.vh-meta {
  margin-top: 6px !important;
  font-size: 13px !important;
}

.fee-bar {
  min-height: 0 !important;
  padding: 12px 16px !important;
  border-radius: 20px !important;
}

.fee-amount {
  font-size: clamp(24px, 7vw, 34px) !important;
  line-height: 1.05 !important;
}

.fee-desc {
  margin-top: 4px !important;
  font-size: 13px !important;
}

#pricingPlanBox {
  order: 4 !important;
  padding: 10px 12px !important;
  border-radius: 20px !important;
}

#pricingPlanBox .pricing-plan-head {
  gap: 10px !important;
}

#pricingPlanBox .pricing-plan-head strong {
  font-size: 17px !important;
}

#pricingPlanRuleText {
  font-size: 13px !important;
}

#togglePricingPlans {
  min-width: 92px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
}

#pricingPlanBox.collapsed .pricing-plan-options {
  display: none !important;
}

#pricingPlanBox.expanded .pricing-plan-options {
  max-height: 214px !important;
  overflow-y: auto !important;
  margin-top: 10px !important;
}

#pricingPlanBox .pricing-plan {
  padding: 10px 12px !important;
  border-radius: 16px !important;
}

#pricingPlanBox .pricing-plan strong {
  font-size: 16px !important;
}

#pricingPlanBox .pricing-plan b {
  font-size: 20px !important;
}

#pricingPlanBox .pricing-plan em {
  font-size: 12px !important;
}

.timer-card {
  order: 5 !important;
  padding: 12px !important;
  border-radius: 24px !important;
}

.timer-card .timer-head {
  margin-bottom: 8px !important;
}

.timer-card .timer-head small {
  font-size: 13px !important;
}

.timer-card .timer-head h2 {
  font-size: 24px !important;
}

.timer-card .time-grid {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1fr !important;
  align-items: center !important;
  gap: 3px !important;
  margin: 0 !important;
}

.timer-card .tg-seg {
  width: auto !important;
}

.timer-card .tg-num {
  min-height: 56px !important;
  padding: 8px 4px !important;
  border-radius: 18px !important;
  font-size: clamp(28px, 10vw, 42px) !important;
  line-height: 1 !important;
}

.timer-card .tg-lbl {
  margin-top: 4px !important;
  font-size: 11px !important;
}

.timer-card .tg-colon {
  display: block !important;
  font-size: 25px !important;
  line-height: 1 !important;
  opacity: .7;
}

.ride-money {
  min-height: 50px !important;
  margin-top: 10px !important;
  padding: 10px 14px !important;
  border-radius: 18px !important;
}

.ride-money span {
  font-size: 14px !important;
}

.ride-money strong {
  font-size: clamp(26px, 8vw, 38px) !important;
  line-height: 1.05 !important;
}

.ride-live-note {
  margin-top: 8px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

#agreeRowWrap {
  order: 6 !important;
}

#agreeRowWrap .agree-row,
.agree-row {
  padding: 10px 12px !important;
  border-radius: 18px !important;
  font-size: 14px !important;
}

#rentBtnWrap {
  order: 7 !important;
}

#rentBtnWrap .rent-action {
  height: 54px !important;
  border-radius: 20px !important;
  font-size: 20px !important;
}

#rentBtnWrap .rent-hint {
  display: none !important;
}

.ride-steps {
  display: none !important;
}

.client-profile-panel {
  max-width: min(92vw, 430px) !important;
}

.client-profile-body .orders-card {
  margin-top: 12px !important;
}

.client-profile-body .orders-head-title {
  font-size: 18px !important;
  font-weight: 900 !important;
}

@media (max-height: 760px) and (max-width: 520px) {
  .ride-body {
    gap: 7px !important;
    padding-top: 7px !important;
  }

  .vehicle-hero {
    min-height: 92px !important;
    padding: 13px 15px !important;
  }

  .vehicle-hero .vh-icon,
  .vh-icon {
    font-size: 22px !important;
  }

  .vehicle-hero .vh-plate,
  .vh-plate {
    margin-top: 8px !important;
    font-size: clamp(28px, 8vw, 36px) !important;
  }

  .fee-bar,
  #pricingPlanBox,
  .timer-card,
  #agreeRowWrap .agree-row {
    padding: 9px 11px !important;
  }

  .timer-card .timer-head {
    margin-bottom: 5px !important;
  }

  .timer-card .tg-num {
    min-height: 46px !important;
    font-size: clamp(25px, 9vw, 34px) !important;
  }

  .ride-money {
    min-height: 44px !important;
    margin-top: 7px !important;
  }

  .ride-live-note {
    display: none !important;
  }

  #rentBtnWrap .rent-action {
    height: 50px !important;
  }
}

/* 2026-06-12: keep customer rent action visible on small mobile screens */
@media (max-width: 520px) {
  .ride-body {
    padding-top: 7px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 74px) !important;
    gap: 7px !important;
  }

  .vehicle-hero {
    min-height: 92px !important;
    padding: 12px 14px !important;
    border-radius: 22px !important;
  }

  .vehicle-hero .vh-plate,
  .vh-plate {
    margin-top: 7px !important;
    font-size: clamp(28px, 8vw, 36px) !important;
  }

  .fee-bar {
    padding: 10px 14px !important;
    border-radius: 18px !important;
  }

  .fee-amount {
    font-size: clamp(24px, 7vw, 30px) !important;
  }

  #pricingPlanBox {
    padding: 8px 10px !important;
    border-radius: 18px !important;
  }

  #pricingPlanBox .pricing-plan-head strong {
    font-size: 16px !important;
  }

  #pricingPlanRuleText {
    font-size: 12px !important;
  }

  .timer-card {
    padding: 10px !important;
    border-radius: 22px !important;
  }

  .timer-card .timer-head {
    margin-bottom: 5px !important;
  }

  .timer-card .timer-head h2 {
    font-size: 22px !important;
  }

  .timer-card .tg-num {
    min-height: 44px !important;
    font-size: clamp(26px, 9vw, 34px) !important;
  }

  .ride-money {
    min-height: 42px !important;
    margin-top: 6px !important;
    padding: 8px 12px !important;
  }

  .ride-money strong {
    font-size: clamp(25px, 8vw, 34px) !important;
  }

  .ride-live-note {
    display: none !important;
  }

  #agreeRowWrap .agree-row,
  .agree-row {
    padding: 8px 10px !important;
    border-radius: 16px !important;
  }

  #rentBtnWrap:not([hidden]) {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    z-index: 80 !important;
    display: block !important;
  }

  #rentBtnWrap .rent-action {
    height: 52px !important;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--yh-primary, #10b981) 28%, transparent) !important;
  }
}

/* 2026-06-13: repair agreement sheet and order duration/fee collision */
.agreement-modal.detail-sheet {
  align-items: stretch !important;
  z-index: 9999 !important;
}

body.agreement-open {
  overflow: hidden !important;
}

body.agreement-open #rentBtnWrap,
body.agreement-open #rentBtnWrap:not([hidden]) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.agreement-open .yh-theme-switch,
body.agreement-open .yh-theme-fab,
body.agreement-open .yh-theme-panel {
  display: none !important;
}

.agreement-modal.detail-sheet .detail-mask {
  z-index: 0 !important;
}

.agreement-modal.detail-sheet article {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  z-index: 1 !important;
  max-height: min(88dvh, 760px) !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

.agreement-modal .section-title {
  flex: 0 0 auto !important;
}

.agreement-modal .agreement-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 16px 18px 18px !important;
  -webkit-overflow-scrolling: touch;
}

.agreement-modal .agreement-confirm-bar {
  position: relative !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  padding: 12px 18px calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
  background: color-mix(in srgb, var(--yh-surface, #fff) 98%, transparent) !important;
}

.agreement-modal .agreement-read-check {
  min-height: 34px !important;
  line-height: 1.35 !important;
}

.agreement-modal #acceptAgreementBtn {
  height: 50px !important;
  margin: 0 !important;
}

#orders .table-wrap {
  overflow-x: auto !important;
}

#orders .table-wrap table {
  min-width: 1280px !important;
}

#orders th:nth-child(4), #orders td:nth-child(4) { width: 150px !important; }
#orders th:nth-child(7), #orders td:nth-child(7) {
  width: 150px !important;
  min-width: 150px !important;
}
#orders th:nth-child(8), #orders td:nth-child(8) {
  width: 112px !important;
  min-width: 112px !important;
}
#orders th:nth-child(11), #orders td:nth-child(11) {
  width: 210px !important;
  min-width: 210px !important;
}

#orders td.live-duration {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

#orders .live-duration {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 132px !important;
  max-width: 132px !important;
  padding: 10px 8px !important;
  box-sizing: border-box !important;
}

#orders .money-cell {
  padding-left: 14px !important;
  overflow: visible !important;
}

#orders .money-cell strong {
  display: inline-block !important;
  min-width: 74px !important;
  white-space: nowrap !important;
}

@media (max-width: 520px) {
  .agreement-modal.detail-sheet article {
    max-height: calc(100dvh - 18px) !important;
    border-radius: 22px 22px 0 0 !important;
  }

  .agreement-modal .agreement-body {
    padding: 12px 16px 14px !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
  }

  .agreement-modal .agreement-confirm-bar {
    padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    gap: 8px !important;
  }
}

/* 2026-06-13: compact customer timer so elapsed time and fee stay together */
body.client-page .timer-card .time-grid,
.ride-body .timer-card .time-grid {
  display: block !important;
  margin: 0 !important;
}

body.client-page .timer-card .time-grid > .tg-colon,
body.client-page .timer-card .time-grid > .tg-seg:not(:first-child),
.ride-body .timer-card .time-grid > .tg-colon,
.ride-body .timer-card .time-grid > .tg-seg:not(:first-child) {
  display: none !important;
}

body.client-page .timer-card .time-grid > .tg-seg:first-child,
.ride-body .timer-card .time-grid > .tg-seg:first-child {
  width: 100% !important;
}

body.client-page .timer-card .tg-num,
.ride-body .timer-card .tg-num {
  min-height: 70px !important;
  padding: 12px 8px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.client-page .timer-card .tg-lbl,
.ride-body .timer-card .tg-lbl {
  margin-top: 4px !important;
}

body.client-page .timer-card .ride-money,
.ride-body .timer-card .ride-money {
  margin-top: 8px !important;
}

body.client-page .timer-card .ride-live-note,
.ride-body .timer-card .ride-live-note {
  margin-top: 8px !important;
}

@media (max-width: 520px) {
  body.client-page .timer-card,
  .ride-body .timer-card {
    padding: 10px !important;
  }

  body.client-page .timer-card .timer-head,
  .ride-body .timer-card .timer-head {
    margin-bottom: 6px !important;
  }

  body.client-page .timer-card .tg-num,
  .ride-body .timer-card .tg-num {
    min-height: 62px !important;
    font-size: clamp(36px, 13vw, 58px) !important;
  }

  body.client-page .timer-card .ride-money,
  .ride-body .timer-card .ride-money {
    min-height: 48px !important;
    margin-top: 6px !important;
  }
}