:root {
  color-scheme: light;
  --bg: #f7f7f7;
  --panel: #ffffff;
  --panel-soft: #f1f1f1;
  --ink: #111111;
  --muted: #676767;
  --line: #d9d9d9;
  --brand: #e30613;
  --brand-dark: #b9000c;
  --accent: #ff2733;
  --danger: #9f000b;
  --ok: #d60012;
  --warn: #6f6f6f;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.14);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

[hidden] {
  display: none !important;
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
}

.login-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.login-panel {
  width: min(440px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 24px;
}

.login-brand {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 0 20px;
  color: var(--ink);
  text-align: center;
}

.login-brand span {
  color: var(--muted);
}

.login-brand .brand-mark {
  width: 252px;
  height: 252px;
}

.login-brand-copy {
  display: grid;
  gap: 2px;
  color: #a0a0a0;
  font-size: 11px;
  font-weight: 300;
  line-height: 1.45;
  text-align: center;
}

.login-brand-copy span {
  color: inherit;
}

.login-fields {
  display: grid;
  gap: 14px;
}

.login-role-select {
  text-align: center;
  text-align-last: center;
}

.login-beta {
  margin-top: -4px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
}

.link-button {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  padding: 2px 4px;
  text-decoration: underline;
}
.link-button:hover { color: var(--brand); }

.login-reset { gap: 12px; }
.login-reset-tabs { display: flex; gap: 8px; }
.reset-tab { flex: 1; border: 1px solid var(--line2); background: var(--panel); color: var(--muted); border-radius: 10px; padding: 9px 10px; font-weight: 700; font-size: 13px; cursor: pointer; }
.reset-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.reset-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 4px; }
#reset-request-panel, #reset-code-panel { display: grid; gap: 12px; }

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: clip;
  background: var(--bg);
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100vh;
  padding: 22px 16px;
  background: #111111;
  color: #ffffff;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 22px;
}

.brand-button {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.brand-button:hover .brand-mark,
.brand-button:focus-visible .brand-mark {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.brand-mark {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: #ffffff;
  object-fit: cover;
  padding: 1px;
}

.brand strong,
.brand span {
  display: block;
}

.brand span {
  color: #b8b8b8;
  font-size: 13px;
  margin-top: 2px;
}

.nav {
  display: grid;
  gap: 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 12px 14px;
  background: transparent;
  color: #d4d4d4;
  text-align: left;
}

.nav-item:hover,
.nav-item.active {
  background: rgb(var(--brand-rgb) / 0.18);
  color: #ffffff;
}

.nav-icon {
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--brand);
  font-size: 19px;
  line-height: 1;
}

.nav-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.nav-icon svg.filled-icon {
  fill: currentColor;
  stroke: none;
}

.sidebar-logout {
  width: calc(100% - 16px);
  min-height: 38px;
  margin: 18px 8px 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.sidebar-logout:hover {
  background: rgb(var(--brand-rgb) / 0.2);
}

.main {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  padding: 28px;
}

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

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

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 30px;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 4px;
  font-size: 22px;
}

h3 {
  margin-bottom: 12px;
  font-size: 17px;
}

.topbar-actions,
.row-actions,
.dialog-actions,
.filter-row,
.button-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.tenant-ad-slot {
  width: min(420px, 42vw);
  height: 92px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111111;
}

.tenant-ad-slot[hidden] {
  display: none;
}

.tenant-ad-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.role-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.role-select,
.tenant-select {
  width: auto;
  min-width: 112px;
}

.tenant-select {
  min-width: 140px;
}

.primary-button,
.ghost-button,
.danger-button,
.icon-button {
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 14px;
  font-weight: 750;
}

.primary-button {
  background: var(--brand);
  color: #fff;
}

.primary-button:hover {
  background: var(--brand-dark);
}

.ghost-button {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
}

.danger-button {
  background: #fff1f2;
  border-color: #f2b5bb;
  color: var(--danger);
}

.icon-button {
  width: 40px;
  padding: 0;
  background: var(--panel-soft);
  border-color: var(--line);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.view-root {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 18px;
}

.site-footer {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  margin-top: 0;
  padding: 28px;
  border-radius: 0;
  background: #111111;
  color: #ffffff;
}

.site-footer-logo {
  width: 182px;
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

.site-footer-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.site-footer-copy span {
  color: #b8b8b8;
  font-size: 12px;
  line-height: 1.35;
}

.grid {
  display: grid;
  gap: 16px;
}

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

.grid.two {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
}

.card {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 0;
}

.card-body {
  min-width: 0;
  padding: 18px;
}

.stat-card {
  padding: 16px;
}

.stat-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

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

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

.stat-card.is-ok strong {
  color: #11834b;
}

.stat-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.payment-signal-card strong {
  display: flex;
  align-items: center;
  gap: 10px;
}

.payment-signal-card strong i {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}

.payment-signal-card.is-unpaid strong {
  color: var(--brand);
}

.payment-signal-card.is-paid strong {
  color: #18814a;
}

.mini-stats {
  margin-bottom: 16px;
}

.revenue-insights {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  align-items: start;
  gap: 28px;
}

.revenue-insights .table-wrap table {
  min-width: 690px;
}

.revenue-insights th,
.revenue-insights td {
  padding: 11px 8px;
}

.revenue-summary-list {
  gap: 14px;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compact-table table {
  min-width: 420px;
}

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

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

th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

tr:last-child td {
  border-bottom: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.pill.ok {
  background: #fff0f1;
  color: var(--ok);
}

.pill.good {
  background: #e8f6ee;
  color: #11834b;
}

.pill.warn {
  background: #eeeeee;
  color: var(--warn);
}

.pill.danger {
  background: #ffe6e8;
  border: 0;
  color: var(--danger);
}

.compact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 0 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

.compact-button:hover {
  border-color: var(--brand);
}

.search,
.select,
.input,
.textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  padding: 8px 11px;
  outline: none;
}

.textarea {
  min-height: 96px;
  resize: vertical;
}

.search:focus,
.select:focus,
.input:focus,
.textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.12);
}

.filter-row > * {
  flex: 1 1 180px;
}

.empty {
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

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

.list-item {
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.list-item strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vendor-repair-update {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding-top: 8px;
}
.vendor-repair-update .field { flex: 1 1 130px; min-width: 0; }
.vendor-repair-update .field:nth-of-type(3) { flex-basis: 100%; }
.vendor-repair-update > button { flex: 1 1 auto; }

.rating-confirm {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.rating-confirm > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.star-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.star-button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: #b7791f;
  padding: 0 9px;
  font-weight: 900;
  cursor: pointer;
}

.star-button:hover {
  border-color: #b7791f;
  background: #fff7e6;
}

.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: #c9c9c9;
  font-size: 15px;
  line-height: 1;
  vertical-align: -2px;
}

.star-meter {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
}

.star-base,
.star-fill {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
}

.star-base {
  right: 0;
  color: #d5d5d5;
}

.star-fill {
  width: var(--fill);
  overflow: hidden;
  color: #f5b301;
  white-space: nowrap;
}

.profile-panel {
  display: grid;
  gap: 0;
}

.profile-panel.full {
  grid-column: 1 / -1;
}

.vendor-profile-card {
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: start;
  gap: 14px;
}

.vendor-profile-info {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.vendor-logo-panel {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 10px;
}

.vendor-logo,
.vendor-logo-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.vendor-logo {
  object-fit: contain;
  background: var(--panel);
}

.vendor-logo-placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-weight: 900;
}

.vendor-logo-placeholder span {
  color: var(--ink);
  font-size: 28px;
}

.vendor-logo-placeholder small {
  font-size: 12px;
}

.tenant-room-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tenant-ad-preview {
  width: min(100%, 520px);
  aspect-ratio: 16 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111111;
}

.tenant-ad-preview-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tenant-ad-controls {
  margin-top: 12px;
}

.tenant-ad-upload {
  cursor: pointer;
}

.month-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.month-chip-list span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--panel-soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
}

.chart-panel {
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 14px;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.chart-header span {
  color: var(--muted);
  font-size: 13px;
}

.line-chart {
  width: 100%;
  height: auto;
}

.line-chart line {
  stroke: var(--line);
  stroke-width: 2;
}

.line-chart polyline {
  fill: none;
  stroke: var(--brand);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-chart circle {
  fill: var(--accent);
  stroke: #ffffff;
  stroke-width: 2;
}

.line-chart text {
  fill: var(--muted);
  font-size: 11px;
  text-anchor: middle;
}

.property-stack {
  display: grid;
  min-width: 0;
  gap: 16px;
}

.property-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.property-status-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 132px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font-weight: 850;
}

.property-status-tab strong {
  font-size: 18px;
}

.property-status-tab.is-rented {
  color: var(--brand);
}

.property-status-tab.is-vacant {
  color: #1e7f45;
}

.property-status-tab.is-rented.is-active {
  border-color: var(--brand);
  background: #fff0f1;
  color: var(--brand);
}

.property-status-tab.is-vacant.is-active {
  border-color: #2f9e57;
  background: #e9f8ef;
  color: #1e7f45;
}

.property-card {
  overflow: hidden;
}

.property-card .card-header {
  align-items: flex-start;
}

.property-title {
  flex-wrap: wrap;
}

.property-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.property-occupancy-rate {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.property-occupancy-rate.is-low {
  border-color: #2f9e57;
  background: #e9f8ef;
  color: #1e7f45;
}

.property-occupancy-rate.is-mid {
  border-color: #d6d6d6;
  background: #eeeeee;
  color: #626262;
}

.property-occupancy-rate.is-high {
  border-color: #f4a3a9;
  background: #fff0f1;
  color: var(--brand);
}

.property-metrics {
  display: flex;
  min-width: 0;
  flex: 1 1 320px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.property-metrics span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
  gap: 4px;
}

.property-metrics strong {
  color: var(--ink);
}

.property-metric-rented,
.property-metric-rented strong {
  color: var(--brand);
}

.property-metric-vacant,
.property-metric-vacant strong {
  color: #1e7f45;
}

.floor-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px 0;
}

.floor-summary span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.floor-summary .floor-empty {
  border-color: #2f9e57;
  background: #e9f8ef;
  color: #1e7f45;
}

.floor-summary .floor-partial {
  border-color: #f4a3a9;
  background: #fff0f1;
  color: var(--brand);
}

.floor-summary .floor-full {
  border-color: #f4a3a9;
  background: #fff0f1;
  color: var(--brand);
}

.floor-builder {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel-soft);
}

.floor-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.floor-builder-header span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

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

.floor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 180px) 40px;
  align-items: end;
  gap: 10px;
}

.proof-analysis {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel-soft);
}

.proof-analysis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.proof-analysis-header span,
.proof-analysis-grid span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.proof-analysis-header strong {
  color: var(--ink);
  font-size: 13px;
}

.proof-analysis-grid {
  display: grid;
  grid-template-columns: minmax(96px, 0.32fr) minmax(0, 0.68fr);
  gap: 8px 12px;
  margin-bottom: 10px;
}

.proof-analysis-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.proof-analysis-grid strong[data-status] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 900;
}

.proof-analysis-grid strong[data-status]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

.proof-analysis-grid strong[data-status="ok"] {
  color: var(--ok);
  background: rgb(var(--brand-rgb) / 0.1);
}

.proof-analysis-grid strong[data-status="error"] {
  color: var(--danger);
  background: rgba(159, 0, 11, 0.12);
}

.proof-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.proof-confirmation input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--brand);
}

.proof-confirmation:has(input:disabled) {
  color: var(--muted);
}

.floor-row label {
  display: grid;
  gap: 7px;
}

.floor-row label span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.history-select {
  max-width: 180px;
}

.meta {
  color: var(--muted);
  font-size: 13px;
}

.bar-list {
  display: grid;
  gap: 13px;
}

.vendor-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.vendor-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.vendor-repair-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  align-items: start;
}

.vendor-repair-list .list-item {
  min-width: 0;
  gap: 7px;
  padding: 12px;
  overflow-wrap: anywhere;
}

.chat-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  display: grid;
  justify-items: end;
  gap: 10px;
  pointer-events: none;
}

.chat-dock > * {
  pointer-events: auto;
}

.chat-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  box-shadow: var(--shadow);
  font-size: 0;
  font-weight: 900;
}

.chat-toggle::before {
  content: "";
  position: absolute;
  inset: 13px 10px 16px;
  border-radius: 999px;
  background: #ffffff;
}

.chat-toggle::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: 10px;
  width: 13px;
  height: 14px;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.chat-toggle-icon {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.chat-toggle-icon i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--brand);
}

.chat-toggle:hover {
  background: var(--brand-dark);
}

.chat-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  border: 2px solid var(--panel);
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  padding: 0 5px;
  font-size: 11px;
  line-height: 16px;
}

.chat-panel {
  width: min(360px, calc(100vw - 28px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.chat-header strong {
  font-size: 15px;
}

.chat-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.chat-body {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.chat-thread {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 180px;
  max-height: 260px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.chat-message {
  display: grid;
  gap: 3px;
  max-width: 86%;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--panel);
  overflow-wrap: anywhere;
}

.chat-message.is-self {
  justify-self: end;
  background: #fff0f1;
}

.chat-message small {
  color: var(--muted);
  font-size: 11px;
}

.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.chat-form textarea {
  min-height: 40px;
  max-height: 96px;
  resize: vertical;
}

.bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 88px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.bar-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #dedede;
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}

.split-bar {
  display: flex;
}

.split-bar .bar-fill {
  border-radius: 0;
}

.split-bar .bar-fill:first-child {
  border-radius: 999px 0 0 999px;
}

.split-bar .bar-fill:last-child {
  border-radius: 0 999px 999px 0;
}

.paid-fill {
  background: var(--ok);
}

.unpaid-fill {
  background: #b8b8b8;
}

.bar-legend,
.pagination-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.bar-legend {
  justify-content: flex-start;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 999px;
}

.paid-dot {
  background: var(--ok);
}

.unpaid-dot {
  background: #8d8d8d;
}

.paid-rate {
  color: var(--brand);
  font-weight: 850;
}

.unpaid-rate {
  color: var(--muted);
  font-weight: 850;
}

.metric-signal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  min-height: 30px;
  border: 1px solid currentColor;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.1;
  white-space: nowrap;
}

.metric-signal.is-high {
  background: #fff0f1;
  color: var(--brand);
}

.metric-signal.is-low {
  background: #e8f6ee;
  color: #11834b;
}

.pagination-row {
  margin-top: 14px;
}

.page-indicator {
  align-self: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

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

.lane {
  min-height: 220px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f1f1f1;
}

.lane h3 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.repair-card {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.dialog {
  width: min(680px, calc(100vw - 28px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: var(--shadow);
}

.dialog.profile-dialog {
  width: min(520px, calc(100vw - 28px));
}

.dialog::backdrop {
  background: rgba(0, 0, 0, 0.52);
}

.dialog-panel {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

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

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

.field {
  display: grid;
  gap: 7px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.dialog-actions {
  justify-content: flex-end;
}

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

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

.settings-form-grid + .meta,
.settings-note {
  margin-top: 14px;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.switch-row:last-child {
  border-bottom: 0;
}

.switch-row input {
  width: 20px;
  height: 20px;
  accent-color: var(--brand);
}

@media (max-width: 960px) {
  .app-shell {
    grid-template-columns: 1fr;
    background: var(--bg);
  }

  .sidebar {
    position: sticky;
    z-index: 20;
    height: auto;
    min-height: 68px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
  }

  .brand {
    min-width: 156px;
    padding: 0;
    gap: 9px;
  }

  .brand-mark {
    width: 46px;
    height: 46px;
  }

  .brand strong {
    font-size: 16px;
  }

  .nav {
    display: flex;
    min-width: 0;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0;
    scrollbar-width: thin;
  }

  .nav-item {
    flex: 0 0 44px;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .nav-item span:last-child {
    display: none;
  }

  .nav-icon {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    font-size: 19px;
  }

  .sidebar-logout {
    width: auto;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    white-space: nowrap;
  }

  .main {
    padding: 20px;
  }

  .site-footer {
    padding: 22px 20px;
  }

  .site-footer-logo {
    width: 154px;
    flex-basis: auto;
  }

  .grid.stats,
  .grid.two,
  .revenue-insights,
  .kanban,
  .settings-grid {
    grid-template-columns: 1fr;
  }

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

  .property-metrics {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .sidebar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .brand {
    min-width: 0;
  }

  .nav {
    grid-column: 1 / -1;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

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

  .tenant-ad-slot {
    grid-column: 1 / -1;
    width: 100%;
    height: 82px;
  }

  .site-footer {
    align-items: flex-start;
    padding: 18px;
  }

  .site-footer-logo {
    width: min(154px, 100%);
    flex-basis: auto;
  }

  .filter-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .vendor-repair-list {
    grid-template-columns: 1fr;
  }

  .filter-row > *,
  .topbar-actions > *,
  .row-actions > * {
    min-width: 0;
  }

  .row-actions {
    align-items: stretch;
  }

  .row-actions .compact-button {
    flex: 1 1 112px;
  }

  .chat-dock {
    right: 12px;
    bottom: 12px;
  }

  .chat-panel {
    width: calc(100vw - 24px);
  }

  .role-controls {
    grid-column: 1 / -1;
  }

  .role-select,
  .tenant-select {
    width: 100%;
  }

  .primary-button,
  .ghost-button,
  .danger-button,
  .filter-row > .primary-button,
  .filter-row > .ghost-button {
    width: 100%;
  }

  .property-title {
    display: grid;
    grid-template-columns: 1fr;
  }

  .property-metrics {
    flex: none;
    justify-content: flex-start;
  }

  .dialog-fields {
    grid-template-columns: 1fr;
  }

  .bar-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .tenant-room-grid {
    grid-template-columns: 1fr;
  }

  .vendor-repair-update {
    grid-template-columns: 1fr;
  }

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

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

  .floor-row {
    grid-template-columns: 1fr;
  }

  .floor-row .icon-button {
    width: 100%;
  }
}


/* ============================================================
   UTSINN 暗色聚光主題 (Dark Spotlight) — 2026
   黑底 + 紅色 #e30613 聚焦重點。取代原淺色 editorial ledger。
   ============================================================ */
:root {
  color-scheme: dark;
  --bg: #0e0e0f;
  --panel: #161617;
  --panel-soft: #1c1c1e;
  --ink: #f4f4f3;
  --muted: #8e8e92;
  --faint: #5f5f63;
  --line: #2a2a2d;
  --line2: #343438;
  --brand: #e30613;
  --brand-dark: #b00410;
  --accent: #ff3a48;
  --accent-soft: #ff3a48;
  --danger-soft: #ff3a48;
  --danger-line: #e30613;
  --brand-rgb: 227 6 19;
  --accent-rgb: 255 58 72;
  --danger: #ff5a66;
  --ok: #36d07f;
  --warn: #ffb020;
  --info: #4aa3ff;
  --shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.8);
  font-family: "Figtree", "PingFang TC", "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
  font-synthesis: none;
}
body { background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; }
button, input, select, textarea { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .5; }
button:active:not(:disabled) { transform: translateY(1px); }

/* ---------- shell + sidebar ---------- */
.app-shell { grid-template-columns: 248px minmax(0, 1fr); background: var(--bg); }
.sidebar {
  display: flex; flex-direction: column;
  padding: 28px 16px; background: #000; color: var(--ink);
  border-right: 1px solid var(--line);
  height: 100vh; height: 100dvh; overflow-y: auto;
}
.brand { padding: 2px 4px 24px; gap: 10px; align-items: flex-start; }
.brand-button { align-items: flex-start; }
.brand-mark { width: 152px; height: auto; border-radius: 0; background: transparent; object-fit: contain; padding: 0; }
.brand-button:hover .brand-mark, .brand-button:focus-visible .brand-mark { outline: none; }
.brand strong { display: none; }
.brand span { color: var(--faint); font-size: 11px; letter-spacing: 3px; margin-top: 10px; margin-left: 2px; }
.nav { gap: 4px; }
.nav-item {
  min-height: 0; gap: 15px; padding: 13px 16px; border-radius: 12px;
  color: var(--muted); font-weight: 600; font-size: 16.5px;
}
.nav-item:hover { background: var(--panel); color: var(--ink); }
.nav-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgb(var(--brand-rgb) / 0.22), rgb(var(--brand-rgb) / 0.04));
  box-shadow: inset 0 0 0 1px rgb(var(--brand-rgb) / 0.35);
}
.nav-icon { color: currentColor; }
.nav-item.active .nav-icon { color: var(--accent-soft); }
.nav-icon, .nav-icon svg { width: 22px; height: 22px; flex-basis: 22px; }
.nav-icon svg { stroke-width: 1.8; }
.menu-toggle { display: none; }

.sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 20px; }
.sidebar-logout {
  flex: 0 0 auto; width: auto; min-height: 0; margin: 0; padding: 10px 14px;
  border: 0; background: transparent; color: var(--faint);
  font-size: 13px; font-weight: 600; border-radius: 10px;
}
.sidebar-logout:hover { background: var(--panel); color: var(--accent-soft); }
.sidebar-version {
  margin-left: auto; font-size: 11px; letter-spacing: 2px; color: var(--muted);
  border: 1px solid var(--line2); padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}

/* ---------- main + topbar ---------- */
.main { padding: 34px 40px 60px; }
.topbar { margin-bottom: 28px; }
.workspace-label { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: 6px; }
.eyebrow { display: none; }
h1 { font-size: 40px; font-weight: 900; letter-spacing: -.5px; color: var(--ink); }
h2 { font-size: 18px; font-weight: 800; letter-spacing: -.2px; }
h3 { font-size: 16px; font-weight: 700; }

/* ---------- buttons ---------- */
.primary-button, .ghost-button, .danger-button, .compact-button, .icon-button { border-radius: 10px; font-weight: 700; }
.primary-button, .ghost-button { min-height: 44px; }
.primary-button { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 10px 26px -10px rgb(var(--brand-rgb) / 0.7); }
.primary-button:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.ghost-button { background: var(--panel); border-color: var(--line2); color: var(--ink); }
.ghost-button:hover, .compact-button:hover { background: var(--panel-soft); border-color: var(--faint); }
.compact-button { background: var(--panel); border-color: var(--line2); color: var(--ink); }
.danger-button { background: rgba(227, 6, 19, 0.14); border-color: rgba(227, 6, 19, 0.4); color: var(--danger-soft); }
.icon-button { background: var(--panel-soft); border-color: var(--line2); color: var(--ink); }

/* ---------- overview / layout ---------- */
.overview-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.overview-heading p { margin: 0; font-size: 15px; font-weight: 600; }
.overview-heading p span { margin-left: 14px; color: var(--muted); font-size: 13px; font-weight: 400; }
.view-root, .grid, .dashboard-main { gap: 20px; }
.dashboard-main { display: grid; min-width: 0; }
.grid.two { align-items: start; }
.dashboard-columns { grid-template-columns: minmax(0, 1.3fr) minmax(300px, .85fr); }

/* ---------- cards ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: none; }
.card-header { padding: 22px 24px 0; }
.card-body { padding: 20px 24px 24px; }
.section-note { margin: 5px 0 0; color: var(--muted); font-size: 12px; }

/* ---------- stat cards (紅色頂條) ---------- */
.grid.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.stats .stat-card { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); position: relative; overflow: hidden; }
.stats .stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--brand); }
.stat-card span { font-size: 13px; color: var(--muted); font-weight: 600; }
.stat-card strong { display: block; margin-top: 14px; font-size: clamp(28px, 2.6vw, 40px); font-weight: 900; line-height: 1.1; letter-spacing: -1px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--ink); }
.stat-card small { display: block; margin-top: 9px; color: var(--muted); font-size: 12px; }
.stat-card.is-danger strong { color: var(--danger-soft); }
.stat-card.is-ok strong { color: var(--ok); }
.payment-signal-card.is-unpaid strong { color: var(--danger-soft); }
.payment-signal-card.is-paid strong { color: var(--ok); }

/* ---------- collection / task lists ---------- */
.collection-list { display: grid; }
.collection-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 16px 0; color: var(--ink); text-align: left; }
.collection-row:last-child { border-bottom: 0; }
.collection-row:hover { background: var(--panel-soft); }
.collection-row strong, .collection-row small { display: block; }
.collection-row strong { font-size: 15px; font-weight: 600; }
.collection-row small { margin-top: 5px; color: var(--muted); font-size: 12px; }
.collection-amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.task-panel .list { gap: 0; }
.task-panel .list-item { padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.task-panel .list-item:first-child { padding-top: 0; }
.task-panel .list-item:last-child { padding-bottom: 0; border: 0; }
.task-panel .list-item strong { font-size: 14px; font-weight: 600; }

/* ---------- pills / status ---------- */
.pill { min-height: 24px; padding: 3px 10px; font-size: 12px; font-weight: 700; border-radius: 999px; background: var(--panel-soft); color: var(--muted); }
.pill.good { background: rgba(54, 208, 127, 0.16); color: var(--ok); }
.pill.ok { background: rgb(var(--brand-rgb) / 0.16); color: var(--accent-soft); }
.pill.warn { background: rgba(255, 176, 32, 0.16); color: var(--warn); }
.pill.danger { background: rgba(227, 6, 19, 0.22); color: var(--danger-soft); }

/* ---------- forms ---------- */
.search, .select, .input, .textarea { min-height: 44px; border-radius: 10px; border: 1px solid var(--line2); background: var(--panel-soft); color: var(--ink); }
.search::placeholder, .input::placeholder, .textarea::placeholder { color: var(--faint); }
.search:focus, .select:focus, .input:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.18); }
.field label { color: var(--muted); font-weight: 700; }

/* ---------- tables ---------- */
th { font-size: 12px; font-weight: 700; color: var(--faint); letter-spacing: 1px; text-transform: uppercase; }
td { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
th, td { border-bottom: 1px solid var(--line); }
tbody tr:hover { background: var(--panel-soft); }

/* ---------- charts / bars ---------- */
.chart-panel { background: var(--panel-soft); border-color: var(--line); }
.chart-header span { color: var(--muted); }
.line-chart line { stroke: var(--line); }
.line-chart polyline { stroke: var(--brand); }
.line-chart circle { fill: var(--accent); stroke: var(--panel); }
.line-chart text { fill: var(--muted); }
.bar-track { height: 8px; border-radius: 999px; background: var(--panel-soft); }
.bar-fill { background: var(--brand); }
.paid-fill, .paid-dot { background: var(--brand); }
.unpaid-fill, .unpaid-dot { background: #4a4a4e; }
.paid-rate { color: var(--accent-soft); }
.bar-legend { color: var(--muted); }
.metric-signal.is-high { background: rgb(var(--brand-rgb) / 0.16); color: var(--accent-soft); }
.metric-signal.is-low { background: rgba(54, 208, 127, 0.14); color: var(--ok); }
.page-indicator { color: var(--muted); }

/* ---------- property views ---------- */
.property-status-tab { background: var(--panel-soft); border-color: var(--line); color: var(--muted); }
.property-status-tab.is-rented, .property-status-tab.is-vacant { color: var(--muted); }
.property-status-tab.is-active, .property-status-tab.is-rented.is-active, .property-status-tab.is-vacant.is-active { background: rgb(var(--brand-rgb) / 0.14); border-color: rgb(var(--brand-rgb) / 0.4); color: var(--accent-soft); }
.property-occupancy-rate { background: var(--panel-soft); border-color: var(--line); color: var(--muted); }
.property-occupancy-rate.is-low { background: rgba(54, 208, 127, 0.14); border-color: rgba(54, 208, 127, 0.4); color: var(--ok); }
.property-occupancy-rate.is-mid { background: var(--panel-soft); border-color: var(--line2); color: var(--muted); }
.property-occupancy-rate.is-high { background: rgb(var(--brand-rgb) / 0.16); border-color: rgb(var(--brand-rgb) / 0.4); color: var(--accent-soft); }
.property-metrics span { background: var(--panel-soft); border-color: var(--line); color: var(--muted); }
.property-metrics strong { color: var(--ink); }
.property-metric-rented, .property-metric-rented strong { color: var(--accent-soft); }
.property-metric-vacant, .property-metric-vacant strong { color: var(--ok); }
.floor-summary span, .month-chip-list span { background: var(--panel-soft); border-color: var(--line); color: var(--muted); }
.floor-summary .floor-empty { background: rgba(54, 208, 127, 0.14); border-color: rgba(54, 208, 127, 0.4); color: var(--ok); }
.floor-summary .floor-partial, .floor-summary .floor-full { background: rgb(var(--brand-rgb) / 0.16); border-color: rgb(var(--brand-rgb) / 0.4); color: var(--accent-soft); }
.floor-builder, .proof-analysis, .rating-confirm, .vendor-card { background: var(--panel-soft); border-color: var(--line); }
.vendor-logo-panel { background: var(--panel-soft); border-color: var(--line); }
.vendor-logo { background: var(--panel); }
.vendor-logo-placeholder { border-color: var(--line2); color: var(--muted); }
.vendor-logo-placeholder span { color: var(--ink); }
.proof-analysis-grid strong[data-status="ok"] { background: rgba(54, 208, 127, 0.14); color: var(--ok); }
.proof-analysis-grid strong[data-status="error"] { background: rgba(227, 6, 19, 0.16); color: var(--accent-soft); }
.proof-confirmation { border-top-color: var(--line); color: var(--ink); }
.proof-confirmation:has(input:disabled) { color: var(--muted); }

/* ---------- star rating ---------- */
.star-button { background: var(--panel-soft); border-color: var(--line); color: var(--warn); }
.star-button:hover { background: rgba(255, 176, 32, 0.14); border-color: var(--warn); }
.star-rating, .star-base { color: #4a4a4e; }
.star-fill { color: var(--warn); }

/* ---------- ads ---------- */
.tenant-ad-slot, .tenant-ad-preview { background: #000; border-color: var(--line); }

/* ---------- repairs kanban ---------- */
.lane { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; }
.lane h3 { font-weight: 800; }
.repair-card { background: var(--panel-soft); border: 1px solid var(--line2); border-radius: 14px; }

/* ---------- chat dock ---------- */
.chat-toggle { width: 60px; height: 60px; border: 0; background: var(--brand); box-shadow: 0 16px 40px -10px rgb(var(--brand-rgb) / 0.8); }
.chat-toggle:hover { background: var(--accent-soft); }
.chat-toggle::before, .chat-toggle::after { background: #fff; }
.chat-toggle-icon i { background: var(--brand); }
.chat-badge { background: #fff; color: var(--brand); border: 2px solid var(--bg); }
.chat-panel { width: min(360px, calc(100vw - 28px)); border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); }
.chat-header { padding: 16px 18px; border-bottom: 1px solid var(--line); background: #121213; }
.chat-header strong { font-size: 15px; font-weight: 800; }
.chat-close { background: var(--panel-soft); border: 1px solid var(--line); color: var(--muted); border-radius: 10px; }
.chat-close:hover { color: var(--ink); border-color: var(--faint); }
.chat-thread { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; }
.chat-message { background: var(--panel-soft); border: 1px solid var(--line); border-radius: 14px; border-bottom-left-radius: 5px; }
.chat-message.is-self { background: var(--brand); color: #fff; border: 0; border-bottom-right-radius: 5px; border-bottom-left-radius: 14px; }
.chat-message small { color: var(--muted); }
.chat-message.is-self small { color: rgba(255, 255, 255, 0.78); }

/* ---------- dialog ---------- */
.dialog { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; }
.dialog-panel { background: var(--panel); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.62); }

/* ---------- footer ---------- */
.site-footer { grid-column: 2; padding: 22px 40px 34px; background: var(--bg); border-top: 1px solid var(--line); }
.site-footer-logo { display: none; }
.site-footer-copy span { color: var(--faint); font-size: 12px; }
.site-footer-copy span:first-child { color: var(--muted); font-weight: 600; }

/* ---------- login (暗色聚光) ---------- */
.login-screen { --panel-w: 500px; position: relative; display: block; min-height: 100vh; overflow: hidden; }
.login-intro {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px 64px; color: var(--ink); background: var(--bg); overflow: hidden;
  padding-right: calc(var(--panel-w) + 64px);
}
.login-intro::after {
  content: "57"; position: absolute; left: 50%; top: 50%; z-index: 0; transform: translate(-50%, -50%);
  font-size: clamp(280px, 40vw, 640px); font-weight: 800; letter-spacing: -16px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--line); pointer-events: none;
  animation: loginFade 1.4s ease .1s both;
}
.login-stage { position: relative; z-index: 1; margin: auto; text-align: center; }
.login-rule { display: block; width: 56px; height: 3px; margin: 0 auto 32px; background: var(--brand); transform-origin: center; animation: loginRule .7s ease .3s both; }
.login-stage .login-title { font-size: clamp(40px, 5vw, 76px); font-weight: 800; letter-spacing: -1px; line-height: 1.15; margin: 0 0 24px; text-wrap: balance; }
.login-stage p { font-size: 16px; line-height: 1.9; color: var(--muted); text-wrap: pretty; }
.login-wordmark, .login-edition { text-wrap: balance; }
.login-panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; width: var(--panel-w); max-width: 100%;
  display: flex; flex-direction: column; justify-content: center; padding: 32px 56px; overflow-y: auto;
  background: var(--bg); border-left: 1px solid var(--line); border-radius: 0; box-shadow: -30px 0 60px rgba(0,0,0,.35);
}
@keyframes loginShift { to { padding-right: calc(var(--panel-w) + 64px); } }
@keyframes loginSlide { from { transform: translateX(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes loginRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes loginFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes loginRule { from { transform: scaleX(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .login-intro { padding-right: calc(var(--panel-w) + 64px); }
}
.login-wordmark { font-size: 22px; font-weight: 800; letter-spacing: 6px; position: relative; z-index: 1; }
.login-wordmark span { font-size: 16px; vertical-align: top; margin-left: 4px; }
.login-edition { font-size: 12px; letter-spacing: 1px; color: var(--faint); position: relative; z-index: 1; }
.login-edition b { color: var(--accent-soft); font-weight: 700; }
.login-brand { align-items: flex-start; padding: 0 0 20px; }
.login-brand { display: block; flex: none; width: 132px; height: 109px; overflow: hidden; padding: 0; margin-bottom: 36px; }
.login-brand .brand-mark { display: block; width: 211px; height: 211px; max-width: none; margin: -46px 0 0 -39px; background: transparent; }
.login-heading h2 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); }
.login-heading p { color: var(--muted); margin: 10px 0 30px; }
.login-fields { gap: 18px; }
.login-role-select { text-align: left; text-align-last: left; }
.login-fields .primary-button { min-height: 50px; }
.login-brand-copy { text-align: left; color: var(--faint); font-size: 12px; margin-top: 22px; }
.login-beta { text-align: left; margin-top: 14px; color: var(--muted); font-weight: 400; font-size: 11px; letter-spacing: 2px; border: 1px solid var(--line2); padding: 5px 14px; border-radius: 999px; width: max-content; }

/* ---------- subtle entrance ---------- */
@keyframes utsinnRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view-root .card, .view-root .stat-card, .view-root .lane { animation: utsinnRise .5s ease both; }

/* ============================================================
   Responsive (置於桌機規則之後，行動裝置才能正確覆寫)
   ============================================================ */
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: sticky; z-index: 20; top: 0; min-height: 72px; height: auto;
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
    padding: 12px 24px; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .sidebar .brand { padding: 0; }
  .sidebar .brand-mark { width: 128px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 16px; background: var(--panel); border: 1px solid var(--line2); color: var(--ink); border-radius: 10px; min-height: 40px; padding: 0 14px; }
  .sidebar-foot { display: contents; }
  .sidebar-version { display: none; }
  .sidebar-logout { width: auto; margin: 0; padding: 0 14px; min-height: 40px; border: 1px solid var(--line2); }
  .sidebar .nav { display: flex; flex-wrap: nowrap; gap: 6px; grid-column: 1 / -1; grid-row: 2; padding-top: 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .sidebar .nav::-webkit-scrollbar { display: none; }
  .sidebar .nav-item { flex: 0 0 auto; width: auto; justify-content: flex-start; gap: 8px; min-height: 44px; height: 44px; padding: 0 14px; font-size: 15px; white-space: nowrap; }
  .sidebar .nav-item span:last-child { display: inline; }
  .main { padding: 28px 24px; }
  .site-footer { grid-column: 1; padding: 20px 24px 34px; }
  .grid.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.two, .revenue-insights, .kanban, .settings-grid, .settings-form-grid, .dashboard-columns { grid-template-columns: minmax(0, 1fr); }
  .login-intro { padding: 40px 32px; }
}
@media (max-width: 640px) {
  .sidebar { padding: 10px 16px; gap: 8px; grid-template-columns: minmax(0, 1fr) auto auto; }
  .sidebar .brand-mark { width: 112px; }
  .main { padding: 24px 16px 40px; }
  .topbar { flex-direction: row; align-items: center; margin-bottom: 24px; gap: 12px; }
  .topbar-actions { display: flex; }
  .topbar:has(.tenant-ad-slot:not([hidden])) { flex-wrap: wrap; }
  .topbar:has(.tenant-ad-slot:not([hidden])) .topbar-actions { width: 100%; }
  h1 { font-size: 28px; }
  h2 { font-size: 17px; }
  .overview-heading p span { display: none; }
  .overview-heading p { font-size: 14px; white-space: nowrap; }
  .overview-heading .primary-button { width: auto; flex-shrink: 0; }
  .grid.stats { grid-template-columns: 1fr; }
  .stats .stat-card { padding: 20px 18px; }
  .card-header { padding: 20px 16px 0; gap: 8px; }
  .card-body { padding: 16px; }
  .card-header .compact-button { flex-shrink: 0; }
  .compact-button { min-height: 44px; }
  .collection-row { gap: 10px; grid-template-columns: minmax(0, 1fr) auto; }
  .collection-row .pill { justify-self: start; }
  .collection-row small { overflow-wrap: anywhere; }
  .site-footer { padding: 20px 16px 80px; }
  .search, .select, .input, .textarea { font-size: 16px; }
  .dialog-fields, .vendor-repair-list, .tenant-room-grid, .vendor-repair-update, .vendor-profile-card, .floor-row, .filter-row { grid-template-columns: minmax(0, 1fr); }
  .dialog { max-height: calc(100dvh - 24px); }
  .dialog-panel { padding: 18px 16px 0; }
  .dialog-header { position: sticky; top: 0; z-index: 1; margin: -18px -16px 0; padding: 16px 16px 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
  .dialog-actions { position: sticky; bottom: 0; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); }
  .login-screen { overflow: visible; }
  .login-intro { position: relative; inset: auto; min-height: 56vh; padding: 28px 24px; animation: none; border: 0; }
  .login-intro::after { display: none; }
  .login-stage .login-title { font-size: 34px; }
  .login-stage p { font-size: 14px; }
  .login-edition { display: none; }
  .login-panel { position: relative; width: auto; padding: 28px 24px; box-shadow: none; border-left: 0; border-top: 1px solid var(--line); animation: loginRise .8s ease 1s both; }
  .login-heading h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
/* .row-actions in a <td> must stay a table cell. */
td.row-actions { display: table-cell; white-space: normal; }
td.row-actions > * { display: inline-flex; vertical-align: middle; margin: 3px 6px 3px 0; }
.renewal-select { width: auto; flex: 1 1 160px; }

/* 狀態燈號：藍燈（一般） */
.pill.info { background: rgba(74, 163, 255, 0.16); color: var(--info); }

/* 房客廣告：多素材上傳、統一尺寸預覽、拖曳定位 */
.tenant-ad-status { color: var(--ok); font-weight: 700; }
.tenant-ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 12px 0 4px; }
.tenant-ad-item { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-soft); }
.tenant-ad-item .tenant-ad-preview { position: relative; width: 100%; max-width: 100%; aspect-ratio: 420 / 92; margin: 0; overflow: hidden; border-radius: 10px; background: #000; border: 1px solid var(--line2); cursor: grab; touch-action: none; }
.tenant-ad-item .tenant-ad-preview.is-dragging { cursor: grabbing; }
.tenant-ad-preview-media { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.tenant-ad-ok { position: absolute; top: 6px; left: 6px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(54, 208, 127, 0.92); padding: 2px 8px; border-radius: 999px; pointer-events: none; }
.tenant-ad-drag-hint { position: absolute; bottom: 6px; right: 6px; font-size: 10px; color: rgba(255, 255, 255, 0.9); background: rgba(0, 0, 0, 0.5); padding: 2px 7px; border-radius: 999px; pointer-events: none; }
.tenant-ad-link { display: block; width: 100%; height: 100%; }
.tenant-ad-link-field { gap: 5px; }
.tenant-ad-link-field span { font-size: 12px; color: var(--muted); font-weight: 700; }
.tenant-ad-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tenant-ad-item-foot .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 管理員：帳號管理卡 */
.avatar-chip.is-zoomable { cursor: zoom-in; }
.avatar-chip.is-zoomable img { cursor: zoom-in; }
.img-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(8, 8, 9, 0.88); backdrop-filter: blur(4px); }
.img-lightbox[hidden] { display: none; }
.img-lightbox img { max-width: min(90vw, 720px); max-height: 86vh; border-radius: 16px; border: 1px solid var(--line2); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); object-fit: contain; }
.img-lightbox-close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
.img-lightbox-close:hover { border-color: var(--brand); color: var(--brand); }
.account-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
/* 篩選列與下方帳號卡片使用同一組欄寬：兩個下拉合起來剛好等於一張卡片的寬度 */
.account-filter-toolbar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); align-items: center; gap: 10px; margin-bottom: 14px; }
.account-filter-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.account-filter-selects .select { width: 100%; min-width: 0; }
.account-filter-extra { display: flex; align-items: center; gap: 12px; min-width: 0; }
.account-filter-count { white-space: nowrap; }
.account-carousel { display: flex; align-items: stretch; gap: 10px; }
.account-track { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; flex: 1; min-width: 0; padding-bottom: 4px; }
.account-track > .account-card { flex: 0 0 max(300px, calc((100% - 42px) / 4)); scroll-snap-align: start; min-width: 0; }
.carousel-arrow { flex: 0 0 auto; width: 38px; align-self: stretch; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); border-radius: 10px; cursor: pointer; font-size: 22px; line-height: 1; }
.carousel-arrow:hover { border-color: var(--brand); color: var(--brand); }
.carousel-arrow[hidden] { display: none; }
@media (max-width: 1100px) { .account-track > .account-card { flex-basis: max(300px, calc((100% - 14px) / 2)); } }
@media (max-width: 640px) { .account-track > .account-card { flex-basis: 100%; } }
.account-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-soft); min-width: 0; overflow-wrap: break-word; }
.account-card > * { min-width: 0; }
.account-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.account-card-head .pill { flex: none; }
.account-card-head strong { display: block; font-size: 15px; font-weight: 700; }
.account-card-head .meta { display: block; margin-top: 2px; }
.account-backend { margin: 0; line-height: 1.5; }
.account-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.account-fields .field span { font-size: 12px; color: var(--muted); font-weight: 700; }
.account-actions { flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) { .account-fields { grid-template-columns: 1fr; } }

/* 房東/房客：圓框大頭照上傳(可拖曳位置+縮放) */
.avatar-editor { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.avatar-frame { position: relative; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: var(--panel-soft); border: 2px solid var(--line2); flex: none; cursor: grab; touch-action: none; display: grid; place-items: center; }
.avatar-frame.is-empty { cursor: default; color: var(--faint); font-size: 12px; }
.avatar-frame.is-dragging { cursor: grabbing; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; transform-origin: center; }
.avatar-side { flex: 1; min-width: 180px; display: grid; gap: 10px; }
.avatar-side .field span { font-size: 12px; color: var(--muted); font-weight: 700; }
.avatar-side input[type="range"] { width: 100%; accent-color: var(--brand); }

/* 修繕頁：兩欄(內容｜地圖) + 合作店家地圖 */
.repair-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.repair-main { display: grid; gap: 18px; min-width: 0; }
.repair-layout .kanban { grid-template-columns: 1fr; }
.repair-map-card { position: sticky; top: 20px; }
.repair-store-search { margin-bottom: 14px; }
.repair-map-frame { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: var(--panel-soft); border: 1px solid var(--line2); display: grid; place-items: center; }
.repair-map-placeholder { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 24px; max-width: 320px; }
.repair-map-placeholder strong { font-size: 15px; }
.repair-map-placeholder span { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.repair-store-list { margin-top: 14px; display: grid; gap: 8px; max-height: 260px; overflow-y: auto; }
.store-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); }
.store-info strong { display: block; font-size: 14px; font-weight: 700; }
.store-dist { display: grid; gap: 2px; text-align: right; white-space: nowrap; }
.store-km { font-size: 13px; font-weight: 700; color: var(--accent-soft); }
.store-eta { font-size: 12px; color: var(--muted); }
@media (max-width: 1100px) { .repair-layout { grid-template-columns: 1fr; } .repair-map-card { position: static; } }

/* 修正：修繕頁店家搜尋框的放大鏡圖示尺寸 */
.repair-store-search { display: flex; align-items: center; gap: 10px; }
.repair-store-search svg { width: 16px; height: 16px; flex: none; color: var(--faint); }
.repair-store-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink); font: inherit; min-height: 0; padding: 0; }
.repair-store-search input::placeholder { color: var(--faint); }

/* 廣告：固定寬度輪播(一次 4 組)+ 左右箭頭 + 分類標籤 */
.tenant-ad-carousel { position: relative; display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 4px; }
.tenant-ad-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 10px; flex: 1; min-width: 0; scrollbar-width: thin; }
.tenant-ad-track .tenant-ad-item { flex: 0 0 calc((100% - 42px) / 4); scroll-snap-align: start; min-width: 0; }
.ad-nav { flex: none; align-self: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.ad-nav:hover { border-color: var(--faint); }
.ad-cat-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-cat { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--muted); cursor: pointer; }
.ad-cat.on { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 1100px) { .tenant-ad-track .tenant-ad-item { flex-basis: calc((100% - 14px) / 2); } }
@media (max-width: 640px) { .tenant-ad-track .tenant-ad-item { flex-basis: 84%; } }

/* 廣告：每個素材框完全包住內容，欄位不超出 */
.tenant-ad-item { display: grid; gap: 10px; overflow: hidden; }
.tenant-ad-item > * { max-width: 100%; min-width: 0; }
.tenant-ad-item .input, .tenant-ad-item .select { width: 100%; max-width: 100%; min-width: 0; }
.tenant-ad-item .tenant-ad-preview { max-width: 100%; }
.tenant-ad-item .tenant-ad-link-field { min-width: 0; }
.tenant-ad-item-foot { min-width: 0; }
.tenant-ad-item-foot .meta { flex: 1 1 auto; min-width: 0; }

/* 側欄品牌：管理平台 平放在 logo 下方 */
.sidebar .brand, .sidebar .brand-button { flex-direction: column; align-items: flex-start; gap: 6px; }
.sidebar .brand span { margin: 6px 0 0 2px; letter-spacing: 4px; white-space: nowrap; }

/* 房客列表：姓名左側大頭貼(無照片顯示姓氏) */
.name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.name-cell > span { min-width: 0; }
.avatar-chip { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--panel-soft); border: 1px solid var(--line2); flex: none; font-size: 14px; font-weight: 800; color: var(--muted); }
.avatar-chip img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: center; }
.avatar-upload-field .avatar-upload-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.avatar-upload-field .avatar-chip { width: 64px; height: 64px; font-size: 22px; }
.delete-record-field .danger-button { width: 100%; }

/* 按鈕文字永遠致中、無多餘上下空間 */
.primary-button, .ghost-button, .danger-button, .compact-button, .icon-button { display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; }

/* 大頭照：縮放拉條縮短、與圓框同寬、放在圓框下方 */
.avatar-col { display: grid; gap: 10px; justify-items: center; }
.avatar-range { width: 120px; max-width: 120px; accent-color: var(--brand); }
.profile-saved { color: var(--ok); font-weight: 700; }

/* 管理員帳號卡：頭像、標籤、類型、橫式帳號狀態 */
.account-id { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 140px; }
.account-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-tag { display: inline-flex; align-items: center; line-height: 1; min-height: 24px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgb(var(--brand-rgb) / .14); color: var(--accent-soft); }
.field-label { font-size: 12px; color: var(--muted); font-weight: 700; display: block; margin-bottom: 6px; }
.type-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.type-chip { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--muted); cursor: pointer; }
.type-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.report-tabs { display: flex; gap: 8px; padding: 14px 18px 0; flex-wrap: wrap; }
.report-tab { border: 1px solid var(--line2); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 8px 18px; font-weight: 750; font-size: 14px; cursor: pointer; }
.report-tab:hover { border-color: var(--faint); color: var(--ink); }
.report-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.other-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; cursor: pointer; }
.other-link:hover { color: var(--brand); text-decoration: underline; }
.other-link .other-hint { font-size: 12px; color: var(--faint); }
.other-link:hover .other-hint { color: var(--brand); }
.property-report-table table .num { text-align: right; white-space: nowrap; }
.property-report-table table tfoot td, .building-total-row { border-top: 1px solid var(--line2); }
.building-total-row strong { color: var(--ink); }
.reset-request-list { display: grid; gap: 10px; }
.reset-request-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); }
.reset-request-main { display: grid; gap: 3px; min-width: 240px; }
.reset-request-main .meta { display: block; }
.reset-code-line code { font-size: 14px; font-weight: 800; color: var(--accent-soft); letter-spacing: 2px; }
.status-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.status-row-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.backend-stats { margin-bottom: 18px; }
.backend-sub { font-size: 14px; font-weight: 800; margin: 16px 0 10px; }
.backend-list { display: grid; gap: 8px; max-height: 240px; overflow-y: auto; }
.backend-list .list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); }
.backend-list .list-item .meta { display: block; }
.backend-groups { display: grid; gap: 10px; }
.backend-group { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); overflow: hidden; }
.backend-group > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.backend-group > summary::-webkit-details-marker { display: none; }
.backend-group .bg-name { flex: 1; font-weight: 700; font-size: 14px; }
.backend-group > summary::after { content: "▸"; color: var(--faint); font-size: 14px; transition: transform .15s ease; }
.backend-group[open] > summary::after { transform: rotate(90deg); }
.backend-group .backend-list { padding: 0 12px 12px; max-height: none; }
.status-chip { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); min-width: 220px; }
.status-chip-info strong { display: block; font-size: 14px; font-weight: 700; }

/* 總收益表：固定高度約 5 列，可捲動看更早年份 */
.revenue-year-table { max-height: 320px; overflow-y: auto; }
.revenue-year-table thead th { position: sticky; top: 0; z-index: 1; background: #121213; }
.revenue-year-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }

/* 管理員帳號：唯讀顯示、停權理由、編輯表單 */
.account-readonly { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.account-readonly > div { display: grid; gap: 3px; min-width: 0; }
.account-readonly .ro-label { font-size: 12px; color: var(--muted); font-weight: 700; }
.account-readonly > div > span:last-child { font-size: 14px; word-break: break-all; }
.suspend-reason { color: var(--danger-soft); font-weight: 600; }
.suspend-box { display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(227,6,19,.4); border-radius: 12px; background: rgba(227,6,19,.08); }
.suspend-box .textarea { min-height: 70px; }
.account-editor-modal { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8,8,9,.82); backdrop-filter: blur(4px); overflow-y: auto; }
.account-editor-card { border-color: rgb(var(--brand-rgb) / .4); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; margin: auto; }
.account-editor-card .card-header { align-items: flex-start; }
.status-search input::placeholder { color: var(--faint); }

/* ---------- 交租進度：橫條式月份欄位 ---------- */
.rent-progress { display: grid; gap: 14px; }
.rent-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: center; }
.rent-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rent-who strong { display: block; font-size: 14px; font-weight: 700; }
.rent-who .meta { display: block; font-size: 12px; }
.rent-strip-wrap { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.rent-arrow { width: 32px; border-radius: 10px; }
.rent-strip { position: relative; display: flex; flex: 1; min-width: 0; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: thin; }
.rent-month { position: relative; flex: 0 0 112px; display: grid; gap: 2px; align-content: center; justify-items: center; min-height: 78px; padding: 8px 6px; margin-left: -1px; border: 1px solid var(--line2); border-radius: 0; background: var(--panel-soft); color: #fff; font: inherit; text-align: center; cursor: pointer; }
.rent-month:first-child { margin-left: 0; border-radius: 12px 0 0 12px; }
.rent-month:last-child { border-radius: 0 12px 12px 0; }
.rent-month:only-child { border-radius: 12px; }
.rent-month:hover:not(:disabled) { z-index: 4; border-color: #fff; }
.rm-month { font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.rm-due { font-size: 12px; opacity: .85; }
.rm-state { font-size: 12px; font-weight: 700; }
.rent-month.is-current .rm-month { text-decoration: underline; text-underline-offset: 4px; }
.rent-month.is-future { color: #fff; }
.rent-month.is-paid { z-index: 1; background: rgba(54, 208, 127, .18); border-color: rgba(54, 208, 127, .75); color: var(--ok); }
.rent-month.is-due { z-index: 1; background: rgba(255, 176, 32, .16); border-color: rgba(255, 176, 32, .75); color: var(--warn); }
.rent-month.is-overdue { z-index: 1; background: rgba(227, 6, 19, .3); border-color: var(--danger-line); color: #ff8a92; }
.rent-month.is-pending { z-index: 2; border-color: var(--brand); color: #fff; animation: rentBlink 1.1s ease-in-out infinite; }
.rent-month.is-beyond { background: #19191a; border-color: var(--line); color: #5a5a5e; opacity: 1; cursor: not-allowed; }
@keyframes rentBlink {
  0%, 100% { background: rgba(227, 6, 19, .12); box-shadow: 0 0 0 rgba(227, 6, 19, 0); }
  50% { background: rgba(227, 6, 19, .5); box-shadow: 0 0 16px 2px rgba(227, 6, 19, .75); }
}
@keyframes rentDot { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .rent-month.is-pending { animation: none; background: rgba(227, 6, 19, .4); }
  .rl-pending { animation: none; }
}
.rent-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; font-size: 12px; color: var(--muted); }
.rent-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rl { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line2); }
.rl-paid { background: rgba(54, 208, 127, .5); border-color: var(--ok); }
.rl-pending { background: var(--brand); border-color: var(--brand); animation: rentDot 1.1s ease-in-out infinite; }
.rl-due { background: rgba(255, 176, 32, .5); border-color: var(--warn); }
.rl-overdue { background: rgba(227, 6, 19, .55); border-color: var(--danger-line); }
.rl-future { background: transparent; border-color: #fff; }
.rl-beyond { background: #19191a; border-color: var(--line); }
@media (max-width: 900px) { .rent-row { grid-template-columns: minmax(0, 1fr); } }

.rent-dialog { display: grid; gap: 16px; }
.rent-info { display: grid; gap: 8px; }
.rent-info-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); }
.rent-info-row span { color: var(--muted); }
.rent-actions { display: grid; gap: 12px; }
.rent-actions .primary-button, .rent-actions .ghost-button { width: 100%; }
.rent-method { display: flex; gap: 10px; }
.rent-method-option { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid var(--line2); border-radius: 10px; background: var(--panel); font-weight: 700; cursor: pointer; }
.rent-method-option:has(input:checked) { border-color: var(--brand); background: rgb(var(--brand-rgb) / .14); }
.rent-method-option input { accent-color: var(--brand); }

.collapsible-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; }
.collapsible-card > summary::-webkit-details-marker { display: none; }
.collapse-chevron { color: var(--faint); font-size: 16px; transition: transform .15s ease; }
.collapsible-card[open] .collapse-chevron { transform: rotate(90deg); }
.collapsible-card > summary:hover .collapse-chevron { color: var(--brand); }

/* 交租進度：房源分組 + 已繳月份 hover 顯示繳交日期 */
.rent-groups { display: grid; gap: 12px; }
.rent-group { border: 1px solid var(--line); border-radius: 14px; background: var(--panel-soft); }
.rent-group > summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; list-style: none; cursor: pointer; }
.rent-group > summary::-webkit-details-marker { display: none; }
.rent-group-name { flex: 1; font-size: 15px; font-weight: 800; }
.rent-group[open] > summary .collapse-chevron { transform: rotate(90deg); }
.rent-group > summary:hover .collapse-chevron { color: var(--brand); }
.rent-group > .rent-progress { padding: 4px 16px 16px; }
.rm-paid { display: none; gap: 2px; justify-items: center; }
.rm-paid small { font-size: 12px; opacity: .85; }
.rm-paid b { font-size: 13px; font-weight: 800; }
.rent-month.is-paid:hover:not(:disabled) .rm-month,
.rent-month.is-paid:hover:not(:disabled) .rm-due,
.rent-month.is-paid:hover:not(:disabled) .rm-state { display: none; }
.rent-month.is-paid:hover:not(:disabled) .rm-paid { display: grid; }

/* 房源收益表現：環形圖 */
.donut-card { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: center; }
.donut-figure { position: relative; width: 190px; height: 190px; }
.donut-figure svg { width: 100%; height: 100%; display: block; overflow: visible; }
.donut-slice { transition: stroke-width .15s ease, opacity .15s ease; cursor: pointer; }
.donut-card.has-active .donut-slice:not(.is-active) { opacity: .3; }
.donut-slice.is-active { stroke-width: 20; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; padding: 0 34px; pointer-events: none; }
.donut-center-label { font-size: 12px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-center strong { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.donut-center-sub { font-size: 11px; color: var(--muted); }
.donut-legend { display: grid; gap: 6px; }
.donut-legend-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 44px; gap: 4px 10px; align-items: center; padding: 9px 12px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: background-color .15s, border-color .15s; }
.donut-legend-row.is-active, .donut-legend-row:hover, .donut-legend-row:focus-visible { background: var(--panel-soft); border-color: var(--line2); outline: none; }
.donut-dot { width: 10px; height: 10px; border-radius: 50%; }
.donut-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-amount { font-weight: 700; }
.donut-pct { text-align: right; color: var(--muted); font-size: 13px; }
.donut-owed { grid-column: 2 / -1; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .donut-card { grid-template-columns: minmax(0, 1fr); justify-items: center; } .donut-legend { width: 100%; } }

/* ---------- 雲端模式：同步狀態、密碼視窗、臨時密碼 ---------- */
.sync-status { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
.sync-status[data-state="error"], .sync-status[data-state="offline"] { color: var(--warn); }
.sync-status[hidden] { display: none; }
body.is-booting .login-screen { visibility: hidden; }
.pw-overlay { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8, 8, 9, .88); backdrop-filter: blur(4px); }
.pw-overlay[hidden] { display: none; }
.pw-card { width: 100%; max-width: 420px; display: grid; gap: 14px; padding: 26px; border: 1px solid var(--line2); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.pw-card h2 { font-size: 20px; font-weight: 800; }
.pw-error { color: var(--danger-soft); }
.temp-password { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; letter-spacing: 2px; user-select: all; color: var(--accent-soft); }
.temp-password-panel { display: grid; gap: 12px; }

/* 視窗縮放時，卡片內的標題與按鈕換行而不是跑出卡片 */
.card, .card-body { min-width: 0; }
.card-header { flex-wrap: wrap; gap: 10px 14px; }
.card-header > div { min-width: 0; }
.reset-request-main, .rent-who > div { min-width: 0; overflow-wrap: break-word; }

/* ---------- 房東帳號：依城市分組的簡潔列表 ---------- */
.city-groups { display: grid; gap: 22px; }
.city-group > h3 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 15px; font-weight: 800; }
.city-group > h3 span { font-size: 12px; font-weight: 600; color: var(--muted); }
.landlord-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 10px; }
.landlord-chip { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); color: var(--ink); text-align: left; cursor: pointer; }
.landlord-chip:hover, .landlord-chip:focus-visible { border-color: var(--brand); }
.landlord-chip.is-suspended { opacity: .65; }
.landlord-chip-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.landlord-chip-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
.landlord-chip-main .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landlord-chip-count { flex: none; color: var(--accent-soft); font-size: 13px; font-weight: 700; white-space: nowrap; }
.landlord-chip .pill { flex: none; }
.landlord-detail { display: grid; gap: 14px; }
.landlord-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reset-form { display: grid; gap: 12px; }
.reset-password-row { display: flex; gap: 8px; }
.reset-password-row .input { flex: 1; min-width: 0; }
.reset-password-row .ghost-button { flex: none; white-space: nowrap; }

/* ---------- 表頭排序按鈕 ---------- */
.sort-head { display: inline-flex; align-items: center; gap: 6px; }
.sort-button { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--faint); cursor: pointer; }
.sort-button:hover { background: var(--panel-soft, rgba(255,255,255,.08)); color: var(--ink); }
.sort-button path { fill: currentColor; opacity: .45; }
.sort-button.is-desc .sort-down, .sort-button.is-asc .sort-up { opacity: 1; fill: var(--accent-soft, #ff5a5f); }
.sort-button.is-desc, .sort-button.is-asc { color: var(--accent-soft, #ff5a5f); }

/* ---------- 房源卡片收合 ---------- */
.property-title { align-items: center; }
.property-title-main { flex: 1 1 260px; min-width: 0; }
.property-toggle { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line2); border-radius: 10px; background: var(--panel-soft, transparent); color: var(--muted); cursor: pointer; }
.property-toggle:hover { color: var(--brand); border-color: var(--brand); }
.property-toggle .collapse-chevron { transform: rotate(90deg); }
.property-card.is-collapsed .property-toggle .collapse-chevron { transform: none; }
.property-card.is-collapsed > .floor-summary, .property-card.is-collapsed > .card-body { display: none; }
.property-toggle-all { margin-left: auto; display: inline-flex; gap: 8px; }
.property-status-tabs { align-items: center; }

/* ---------- 房源拖拉排序 ---------- */
.property-drag { flex: none; display: inline-grid; place-items: center; width: 28px; height: 36px; color: var(--faint); cursor: grab; touch-action: none; user-select: none; border-radius: 8px; }
.property-drag:hover { color: var(--ink); background: var(--panel-soft, rgba(255,255,255,.06)); }
.property-drag svg { fill: currentColor; }
.property-stack.is-sorting, .property-stack.is-sorting * { cursor: grabbing; user-select: none; }
.property-card.is-dragging { opacity: .35; border: 2px dashed var(--brand); box-shadow: none; position: relative; z-index: 2; }
.property-card.is-dragging > * { visibility: hidden; }
.property-card.is-dragging { min-height: 84px; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 3000; margin: 0; opacity: .6; pointer-events: none; max-height: 240px; overflow: hidden; border: 1px solid var(--brand); border-radius: 18px; background: var(--panel); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .6); -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }

.property-card .property-title { cursor: grab; touch-action: pan-y; }
.property-card .property-title button { cursor: pointer; }

/* ---------- 室格局 ---------- */
.layout-fieldset { border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px 14px; margin: 0; min-width: 0; }
.layout-fieldset legend { padding: 0 6px; font-size: 13px; color: var(--muted); }
.layout-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.layout-grid .field span { font-size: 12px; }
@media (max-width: 640px) { .layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.room-name.has-layout { cursor: url("./assets/cursor-logo-32.png") 16 16, pointer; cursor: image-set(url("./assets/cursor-logo-32.png") 1x, url("./assets/cursor-logo-64.png") 2x) 16 16, pointer; outline: none; }
.layout-tip { white-space: pre-line; position: fixed; z-index: 200; max-width: 280px; padding: 7px 11px; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel); color: var(--muted); font-size: 12px; line-height: 1.5; box-shadow: 0 10px 28px rgba(0,0,0,.45); pointer-events: none; }

/* 出租率標籤：高度不超過左邊房源名稱的文字行高 */
.property-name-row > span:first-child { line-height: 1.3; }
.property-occupancy-rate { min-height: 0; height: 20px; padding: 0 9px; font-size: 12px; line-height: 1; white-space: nowrap; }

/* ---------- 帳款清單標題內的新增按鈕、租金到期日鎖定 ---------- */
.summary-actions { display: inline-flex; align-items: center; gap: 14px; }
.compact-add { min-height: 36px; padding: 0 16px; font-size: 14px; }
.field.is-locked .input { opacity: .65; cursor: not-allowed; }
.field[hidden] { display: none; }

.task-panel .list { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.task-panel .list-item:last-child { padding-bottom: 16px; border-bottom: 0; }

/* ---------- 繳費提醒：導覽徽章與彈出提醒 ---------- */
.nav-item { position: relative; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
#toast-stack { position: fixed; top: 18px; right: 18px; z-index: 300; display: grid; gap: 10px; width: min(360px, calc(100vw - 36px)); }
.toast { text-align: left; padding: 14px 16px; border: 1px solid var(--line2); border-left: 4px solid var(--brand); border-radius: 12px; background: var(--panel); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.5; box-shadow: 0 16px 40px rgba(0,0,0,.5); cursor: pointer; animation: toastIn .35s cubic-bezier(.22,.8,.2,1) both; }
.toast.good { border-left-color: var(--ok, #36d07f); }
.toast.is-leaving { opacity: 0; transform: translateX(20px); transition: all .25s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) { .nav-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; margin: 0; } }

/* 背景自動更新造成的重繪不要重播進場動畫（避免畫面閃動） */
body.is-refreshing .view-root .card, body.is-refreshing .view-root .stat-card, body.is-refreshing .view-root .lane,
body.no-enter .view-root .card, body.no-enter .view-root .stat-card, body.no-enter .view-root .lane { animation: none !important; }

/* ---------- 線上合約 ---------- */
.tip-target { cursor: url("./assets/cursor-logo-32.png") 16 16, pointer; cursor: image-set(url("./assets/cursor-logo-32.png") 1x, url("./assets/cursor-logo-64.png") 2x) 16 16, pointer; outline: none; }
.dialog.contract-dialog { width: min(860px, calc(100vw - 28px)); }
.contract-paper { background: #fff; color: #111; border-radius: 12px; padding: 28px 32px; max-height: 56vh; overflow: auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.contract-paper-short { max-height: 30vh; }
.contract-doc { font-size: 14px; line-height: 1.8; }
.contract-doc h1 { text-align: center; font-size: 22px; margin: 0 0 4px; color: #111; letter-spacing: 1px; }
.contract-doc h2 { font-size: 14.5px; margin: 16px 0 2px; color: #111; letter-spacing: 0; }
.contract-doc p { margin: 4px 0; color: #222; }
.contract-doc .cd-meta { text-align: center; color: #777; font-size: 12px; margin-bottom: 14px; }
.contract-doc .cd-end { margin-top: 16px; color: #555; }
.cd-parties { margin-top: 22px; }
.cd-parties-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; color: #111; }
.cd-party { display: flex; justify-content: space-between; gap: 24px; margin: 16px 0 24px; flex-wrap: wrap; }
.cd-party-main { flex: 1 1 280px; }
.cd-line { line-height: 2; font-size: 14px; color: #222; }
.cd-line-name { font-size: 15px; }
.cd-blank { color: #999; letter-spacing: 1px; }
.cd-party-sign { flex: 0 1 260px; }
.cd-stamp-label { font-size: 14px; color: #222; }
.cd-stamp { min-height: 70px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cd-stamp img { max-height: 64px; max-width: 100%; }
.cd-stamp small, .cd-stamp-note { color: #777; font-size: 12px; }
.cd-typed { font-size: 14px; font-weight: 700; color: #111; }
.sign-identity { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line2); border-radius: 12px; }
.contract-view, .contract-sign, .contract-editor { display: grid; gap: 14px; grid-column: 1 / -1; }
.contract-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.contract-state { display: flex; justify-content: flex-end; }
.danger-text { color: var(--danger-soft); }
.contract-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.notice-line { margin: 0; padding: 10px 14px; border-radius: 10px; background: rgba(255, 170, 0, .12); color: var(--warn, #ffb020); font-size: 13px; }
.clause-list { display: grid; gap: 12px; }
.clause-row { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line2); border-radius: 12px; }
.clause-head { display: flex; align-items: center; gap: 10px; }
.clause-no { flex: none; color: var(--muted); font-size: 13px; font-weight: 700; }
.clause-head .input { flex: 1; min-width: 0; }
.clause-row textarea { resize: vertical; min-height: 70px; }
.sign-pad { width: 100%; height: 170px; border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink); }
.contract-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 190px; }
.contract-picker .select { min-height: 34px; padding: 0 28px 0 10px; font-size: 13px; max-width: 190px; }
.residence-preview strong { display: block; padding: 10px 0; font-size: 15px; }
.compact-button.is-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (max-width: 640px) { .contract-grid { grid-template-columns: minmax(0, 1fr); } .contract-paper { padding: 18px; } }

/* 房客表欄位多：保持單行、不擠壓，太寬時在表格內橫向捲動 */
.tenant-table { min-width: 1240px; }
.tenant-table th, .tenant-table td { white-space: nowrap; }
.tenant-table .name-cell span { white-space: nowrap; }

/* ---------- 帳務明細 / 圓餅圖顏色 ---------- */
.donut-color { position: relative; display: inline-flex; cursor: pointer; flex: none; }
.donut-color input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.donut-color .donut-dot { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--line2); }
.donut-color:hover .donut-dot { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--brand); }
.color-input { height: 44px; padding: 4px; cursor: pointer; }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel-soft, transparent); gap: 2px; }
.segment { border: 0; background: transparent; color: var(--muted); padding: 7px 16px; border-radius: 9px; font-weight: 700; font-size: 14px; cursor: pointer; }
.segment.active { background: var(--brand); color: #fff; }
.ledger-filter { flex-wrap: wrap; }
.ledger-table th.num, .ledger-table td.num { text-align: right; white-space: nowrap; }
.ledger-table td { vertical-align: middle; }

/* ---------- 報表圖表 ---------- */
.report-control-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 18px; }
.report-controls { margin-bottom: 0; }
.chart-wrap { width: 100%; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-zero { stroke: var(--line2); stroke-width: 1.2; }
.chart-axis { fill: var(--faint); font-size: 11px; }
.bar-income { fill: #36d07f; background: #36d07f; }
.bar-expense { fill: #e30613; background: #e30613; }
.line-profit { stroke: #ffb020; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.line-dot { fill: #ffb020; stroke: var(--panel); stroke-width: 2; }
.chart-legend { display: flex; gap: 18px; justify-content: center; margin-top: 10px; font-size: 13px; color: var(--muted); }
.chart-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.lg-income { background: #36d07f; } .lg-expense { background: #e30613; } .lg-profit { background: #ffb020; border-radius: 50% !important; }
.compare-list { display: grid; gap: 14px; }
.compare-row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 130px; gap: 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.compare-row:last-child { border-bottom: 0; }
.compare-name { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; }
.compare-name .meta { grid-column: 2; }
.compare-bars { display: grid; gap: 6px; }
.compare-bar { position: relative; height: 22px; border-radius: 6px; background: var(--panel-soft, rgba(255,255,255,.04)); overflow: hidden; }
.compare-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; min-width: 2px; }
.compare-bar em { position: absolute; left: 8px; top: 0; line-height: 22px; font-size: 12px; font-style: normal; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.compare-profit { text-align: right; display: grid; gap: 0; }
.compare-profit strong { font-size: 18px; color: #36d07f; }
.compare-profit.is-loss strong { color: var(--danger-soft); }
.compare-profit small { color: var(--faint); font-size: 12px; }
.heat-table td.num, .heat-table th.num { text-align: right; white-space: nowrap; font-size: 13px; }
.heat-table td { border-radius: 0; }
@media (max-width: 720px) { .compare-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } .compare-profit { text-align: left; grid-auto-flow: column; justify-content: start; gap: 10px; align-items: baseline; } }
.report-control-row .select, .ledger-filter .select { width: auto; min-width: 180px; flex: 0 0 auto; }
.ledger-table td:nth-child(-n+3) { white-space: nowrap; }

.pdf-frame { width: 100%; height: 62vh; border: 0; border-radius: 12px; background: #fff; }
.contract-mode { align-self: flex-start; }
.contract-actions a.ghost-button { display: inline-flex; align-items: center; text-decoration: none; }

/* 房客表與合約表：欄位不超出、按鈕可換行 */
.tenant-table { min-width: 1060px; }
.tenant-table td.row-actions, .contract-table td.row-actions { white-space: normal; }
.tenant-table div.row-actions, .contract-table div.row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* 表格裡的操作欄必須維持表格儲存格，按鈕才會和同一列的燈號垂直置中 */
.tenant-table td.row-actions, .contract-table td.row-actions { display: table-cell; vertical-align: middle; }
.tenant-table th:last-child, .tenant-table td:last-child { min-width: 150px; }
.contract-table th, .contract-table td { white-space: nowrap; }
.contract-pick-list { display: grid; gap: 10px; }
.contract-pick { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 12px; align-items: center; text-align: left; padding: 14px 16px; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel-soft, transparent); color: var(--ink); cursor: pointer; font-size: 14px; }
.contract-pick:hover { border-color: var(--brand); }
.contract-pick strong { font-size: 16px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
@media (max-width: 640px) { .contract-pick { grid-template-columns: 1fr auto; } }
/* 房客表：欄位自動縮放、不再橫向超出；只有姓名、狀態標籤與按鈕不換行 */
.tenant-table { min-width: 0; width: 100%; table-layout: auto; }
.tenant-table th, .tenant-table td { white-space: normal; padding-left: 8px; padding-right: 8px; }
.tenant-table .name-cell, .tenant-table .name-cell span, .tenant-table .pill, .tenant-table .compact-button { white-space: nowrap; }
.tenant-table th:last-child, .tenant-table td:last-child { min-width: 0; }
.tenant-table td.row-actions { min-width: 96px; }
.tenant-table th { white-space: nowrap; }
.tenant-table td:nth-child(5), .tenant-table td:nth-child(6) { white-space: nowrap; }

.grid.stats.contract-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .grid.stats.contract-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 左側選單：整個頁面高度都有深色欄位，內容滾動時選單固定在視窗內（html / body 不能是 overflow:hidden，否則 sticky 會失效） */
.app-shell { background: linear-gradient(90deg, #000 0, #000 248px, var(--bg) 248px); }
.sidebar { grid-row: 1 / -1; }
@media (max-width: 1100px) {
  .app-shell { background: var(--bg); }
  .sidebar { grid-row: auto; }
}

/* 表格內按鈕太多時換行，不超出欄位；窄卡片裡的小表格不強制最小寬度 */
.compact-table table { min-width: 0; }
.revenue-insights { grid-template-columns: minmax(0, 1fr); }
.revenue-insights .table-wrap table { min-width: 0; }
@media (max-width: 1180px) {
  .tenant-table { font-size: 13px; }
  .tenant-table td:nth-child(5), .tenant-table td:nth-child(6) { white-space: normal; }
  .tenant-table th, .tenant-table td { padding-left: 6px; padding-right: 6px; }
}

button.task-item { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; display: grid; gap: 4px; }
button.task-item:hover strong { color: var(--brand); }

.db-warning { margin-bottom: 14px; border: 1px solid rgba(255,176,32,.4); line-height: 1.7; }
.db-warning code { background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 6px; }

/* ---------- 大頭照（可拖曳位置 / 縮放）---------- */
.avatar-chip { position: relative; }
.avatar-chip.is-big { width: 64px; height: 64px; }
.av-img { position: absolute; max-width: none; object-fit: cover; transform: translate(-50%, -50%); user-select: none; -webkit-user-drag: none; display: block; }
.avatar-frame.is-small { width: 96px; height: 96px; font-size: 24px; }
.avatar-frame[data-readonly] { cursor: default; }
.avatar-col-side { display: grid; gap: 8px; min-width: 0; flex: 1; }
.avatar-rule { color: var(--warn, #ffb020); }
.avatar-notice-body { padding: 4px 28px 8px; display: grid; gap: 10px; }
.avatar-notice-body ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); line-height: 1.6; }
.avatar-notice-pick { cursor: pointer; display: inline-flex; align-items: center; }
#avatar-notice .dialog-actions { padding: 0 28px 22px; }

/* ---------- 每月電費支出（精簡長條圖）---------- */
.power-chart { padding: 16px 18px 12px; }
.power-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.power-head strong { display: block; font-size: 15px; letter-spacing: .2px; }
.power-rate { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.power-stats { display: flex; gap: 22px; }
.power-stats span { display: grid; gap: 1px; }
.power-stats small { font-size: 11px; color: var(--faint); letter-spacing: .5px; }
.power-stats b { font-size: 16px; font-weight: 800; }
.power-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; height: 104px; }
.power-col { display: grid; grid-template-rows: 14px 1fr 16px; justify-items: center; gap: 3px; height: 100%; min-width: 0; }
.power-value { font-size: 10px; color: var(--faint); opacity: 0; transition: opacity .15s; white-space: nowrap; }
.power-col:hover .power-value, .power-col.is-peak .power-value, .power-col.is-now .power-value { opacity: 1; }
.power-track { width: 100%; max-width: 22px; display: flex; align-items: flex-end; border-radius: 7px; background: rgba(255,255,255,.04); overflow: hidden; }
.power-track i { display: block; width: 100%; border-radius: 7px; background: linear-gradient(180deg, rgba(255,90,102,.85), rgb(var(--brand-rgb) / .55)); transition: filter .15s; min-height: 0; }
.power-col.is-now .power-track i { background: linear-gradient(180deg, #ff7a85, #e30613); box-shadow: 0 0 12px rgb(var(--brand-rgb) / .45); }
.power-col:hover .power-track i { filter: brightness(1.25); }
.power-month { font-size: 11px; color: var(--faint); }
.power-col.is-now .power-month { color: var(--ink); font-weight: 800; }
@media (max-width: 560px) { .power-bars { gap: 4px; } .power-stats { gap: 14px; } }

.tenant-login-row { display: grid; gap: 10px; justify-items: start; }
.tenant-login-field .meta { margin: 0; }

/* ---------- 各房源電費率 ---------- */
.rate-list { display: grid; }
.rate-row { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rate-row:last-child { border-bottom: 0; }
.rate-name { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; min-width: 0; }
.rate-name .meta { grid-column: 2; }
.rate-edit { display: flex; align-items: center; gap: 8px; }
.rate-edit .input { width: 96px; min-height: 40px; text-align: right; font-weight: 700; }

.req { color: var(--brand); font-weight: 800; }

/* ---------- 對話視窗的大頭照 / 匯款憑證紀錄 ---------- */
.chat-contact { display: flex; align-items: center; gap: 10px; padding: 8px 2px 4px; }
.chat-contact strong { display: block; font-size: 14px; }
.chat-avatar { flex: none; }
.chat-avatar.is-small { width: 28px; height: 28px; font-size: 12px; }
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-row.is-self { flex-direction: row-reverse; }
.chat-row .chat-message { max-width: calc(100% - 44px); }
.proof-note { margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }

/* ---------- 店家收入頁 ---------- */
.report-control-row .select[data-income-filter] { min-width: 150px; }
.income-regions { display: grid; gap: 22px; }
.income-city { display: grid; gap: 8px; }
.income-city-head { display: flex; align-items: baseline; gap: 12px; }
.income-city-head strong { font-size: 16px; }
.income-city-head b { margin-left: auto; font-size: 18px; color: #36d07f; }
.income-bar { height: 10px; }
.income-bar span { border-radius: 6px; }
.income-districts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; margin-top: 4px; }
.income-district { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); }
.income-district b { margin-left: auto; }

/* 待辦列：滑鼠移過去，紅色色塊由右向左掃過整條，整列變紅；「前往處理」大字出現後就固定 */
.task-panel .task-item { position: relative; overflow: hidden; margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 12px; }
.task-panel .task-item > * { position: relative; z-index: 1; transition: color .25s ease .1s, opacity .3s ease .1s; }
.task-panel .task-item::before {
  content: ""; position: absolute; inset: 0; z-index: 0; background: var(--danger-line); border-radius: inherit;
  transform: scaleX(0); transform-origin: right center; transition: transform .5s cubic-bezier(.65, 0, .2, 1);
}
.task-panel .task-item::after {
  content: "前往處理"; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none;
  font-size: 38px; font-weight: 900; letter-spacing: .3em; padding-left: .3em; color: #fff; opacity: 0; transform: scale(.85);
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) {
  .task-panel .task-item:hover::before, .task-panel .task-item:focus-visible::before { transform: scaleX(1); }
  .task-panel .task-item:hover strong, .task-panel .task-item:hover .meta, .task-panel .task-item:hover .pill,
  .task-panel .task-item:focus-visible strong, .task-panel .task-item:focus-visible .meta, .task-panel .task-item:focus-visible .pill { color: #fff; }
  .task-panel .task-item:hover > *, .task-panel .task-item:focus-visible > * { opacity: .28; }
  .task-panel .task-item:hover::after, .task-panel .task-item:focus-visible::after { opacity: 1; transform: none; transition-delay: .32s; }
}

/* 標題右邊的待辦件數（有色文字，數字變動時上下翻轉） */
.todo-title { display: flex; align-items: baseline; gap: 12px; }
.todo-count { color: var(--warn); font-size: 16px; font-weight: 800; white-space: nowrap; }
.todo-count.is-zero { color: var(--faint); }
.flip-wrap { position: relative; display: inline-block; min-width: .7em; text-align: center; perspective: 240px; }
.flip-wrap b { display: inline-block; font-weight: 900; transform-origin: 50% 50%; backface-visibility: hidden; }
.flip-wrap .flip-old { position: absolute; left: 0; right: 0; top: 0; animation: flipOut .55s cubic-bezier(.4, 0, .2, 1) forwards; }
.flip-wrap.is-flipping .flip-new { animation: flipIn .55s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes flipOut { from { transform: rotateX(0); opacity: 1; } to { transform: rotateX(-90deg); opacity: 0; } }
@keyframes flipIn { from { transform: rotateX(90deg); opacity: 0; } to { transform: rotateX(0); opacity: 1; } }

.readonly-value { display: block; padding: 11px 14px; border: 1px dashed var(--line2); border-radius: 12px; background: var(--panel-soft, transparent); color: var(--ink); font-weight: 700; }

/* 修繕「現在等誰處理」標籤 */
.pill.waiting { font-weight: 700; }
.pill.waiting-landlord { background: #fff1d6; color: #9a5b00; }
.pill.waiting-tenant { background: #e3efff; color: #1d5fb8; }
.pill.waiting-vendor { background: #efe4ff; color: #6a35b8; }
.repair-waiting { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }

/* 最新消息 */
.news-item { text-align: left; width: 100%; cursor: pointer; }
.news-item.is-unread { border-left: 3px solid #d9534f; background: #fff8f6; }
.news-item:not(.is-unread) strong { font-weight: 500; opacity: .75; }

/* 店家地圖：點店家 → 地圖定位 → 選房源算距離 */
.vendor-card[data-pick-vendor] { cursor: pointer; }
.vendor-card.is-picked, .store-row.is-picked { outline: 2px solid #4a7cf0; }
.store-row { width: 100%; text-align: left; cursor: pointer; background: none; color: inherit; font: inherit; }
.map-route { display: grid; gap: 8px; margin: 12px 0; }
.map-route-result { margin: 0; font-weight: 600; }
.map-route-result[data-tone="good"] { color: #1f8a4c; }
.map-route-result[data-tone="warn"] { color: #c0392b; }

/* 租約期間變更 */
.period-change { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line, #ddd); border-radius: 12px; background: rgba(120, 140, 200, .08); }
.period-change h4, .period-change p { margin: 0; }

/* 全部收起 / 全部展開：方形圖示按鈕，與搜尋、新增按鈕同一排，靠最右 */
.filter-row > .toggle-all-icons { flex: 0 0 auto; margin-left: auto; display: inline-flex; gap: 8px; }
.filter-row-end { justify-content: flex-end; }
.icon-square-button {
  display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); cursor: pointer;
}
.icon-square-button svg { width: 20px; height: 20px; }
.icon-square-button:hover { border-color: var(--brand, #e30613); color: var(--brand, #e30613); }
@media (max-width: 760px) {
  .filter-row:has(.toggle-all-icons) { display: flex; flex-wrap: wrap; }
  .filter-row:has(.toggle-all-icons) > .search { flex: 1 1 100%; }
  .filter-row:has(.toggle-all-icons) > .primary-button { flex: 1 1 0; width: auto; }
}

/* 房東 / 店家帳號：固定一排，超出時左右半透明箭頭、可拖曳 */
.chip-scroller { position: relative; }
.chip-track { display: flex; align-items: stretch; gap: 10px; overflow-x: auto; scrollbar-width: none; cursor: grab; padding: 2px 0; }
.chip-track::-webkit-scrollbar { display: none; }
.chip-track.is-dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.chip-track > .landlord-chip { flex: 0 0 270px; }
.chip-city-label { flex: none; display: grid; align-content: center; gap: 2px; padding: 0 6px 0 2px; border-left: 2px solid var(--line2, #444); padding-left: 10px; min-width: 64px; }
.chip-city-label strong { font-size: 14px; font-weight: 800; white-space: nowrap; }
.chip-city-label span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.chip-city-label:first-child { border-left-color: transparent; }
.chip-arrow { position: absolute; top: 0; bottom: 0; z-index: 2; width: 44px; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.chip-arrow[hidden] { display: none; }
.chip-arrow-left { left: 0; border-radius: 12px 0 0 12px; background: linear-gradient(90deg, rgba(20, 20, 22, .78), rgba(20, 20, 22, 0)); }
.chip-arrow-right { right: 0; border-radius: 0 12px 12px 0; background: linear-gradient(270deg, rgba(20, 20, 22, .78), rgba(20, 20, 22, 0)); }
.chip-arrow:hover { color: var(--brand, #e30613); }

/* 管理員總覽：最活躍的帳號 */
.activity-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.activity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.activity-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.activity-col h3 { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.activity-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); color: var(--ink); text-align: left; cursor: pointer; min-width: 0; }
.activity-row:hover { border-color: var(--brand); }
.activity-rank { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line2, var(--line)); font-size: 13px; font-weight: 800; }
.activity-row:nth-of-type(1) .activity-rank { background: var(--brand, #e30613); border-color: transparent; color: #fff; }
.activity-main { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.activity-main strong, .activity-main .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.activity-bar i { display: block; height: 100%; background: var(--brand, #e30613); border-radius: 4px; }
.activity-value { flex: none; font-weight: 800; font-size: 14px; white-space: nowrap; }

/* 最新消息：固定高度，多則時在框內滾動；今日待辦與左欄切齊（高度由左欄決定，待辦在框內滾動） */
.news-panel { display: flex; flex-direction: column; height: 200px; overflow: hidden; }
.news-panel > .card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.dashboard-columns > .task-panel, .grid.two > .task-panel { contain: size; align-self: stretch; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.dashboard-columns > .task-panel > .card-body, .grid.two > .task-panel > .card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 1100px) {
  .dashboard-columns > .task-panel, .grid.two > .task-panel { contain: none; }
  .dashboard-columns > .task-panel > .card-body, .grid.two > .task-panel > .card-body { max-height: 480px; }
}

/* 房源總覽：依房源、樓層的狀態磚 */
.mode-switch { flex: 0 0 auto; }
.filter-row > .mode-switch { margin-left: auto; }
.filter-row > .mode-switch + .toggle-all-icons { margin-left: 0; }
.overview-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.overview-filters .select { flex: 0 0 auto; width: 170px; }
.overview-rate { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.overview-rate-bar { width: 160px; height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; }
.overview-rate-bar i { display: block; height: 100%; background: var(--brand, #e30613); border-radius: 8px; }
.overview-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.legend-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.legend-chip.is-active { border-color: var(--brand, #e30613); }
.overview-group > .card-body { display: grid; gap: 18px; }
.overview-floor h4 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 14px; font-weight: 800; }
.overview-floor h4 span { font-size: 12px; font-weight: 600; color: var(--muted); }
.unit-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.unit-tile { display: grid; gap: 6px; align-content: start; min-height: 128px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-soft); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.unit-tile:hover { border-color: var(--brand, #e30613); }
.unit-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.unit-tile-top strong { font-size: 17px; }
.unit-tile-tenant { display: flex; align-items: center; gap: 8px; margin-top: auto; font-weight: 700; font-size: 14px; }
.unit-tile.tone-good { background: rgba(54, 208, 127, 0.07); border-color: rgba(54, 208, 127, 0.28); }
.unit-tile.tone-warn { background: rgba(255, 176, 32, 0.07); border-color: rgba(255, 176, 32, 0.3); }
.unit-tile.tone-danger { background: rgba(227, 6, 19, 0.12); border-color: rgba(227, 6, 19, 0.45); }

/* 統一的橫向捲動區：房源總覽樓層（超過 6 間）、交租進度月份 */
.chip-track.unit-tiles-row > .unit-tile { flex: 0 0 220px; }
.rent-scroller { flex: 1 1 auto; min-width: 0; }
.rent-strip.chip-track { gap: 0; padding: 2px 0 8px; }
.rent-scroller .chip-arrow { bottom: 8px; width: 40px; }
.rent-scroller .chip-arrow-left { border-radius: 12px 0 0 12px; }
.rent-scroller .chip-arrow-right { border-radius: 0 12px 12px 0; }
.rent-strip-wrap { display: block; }
.overview-group > .card-body { grid-template-columns: minmax(0, 1fr); }
.overview-floor { min-width: 0; }

/* 主題色設定 */
.theme-swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.theme-swatch { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border: 1px solid var(--line2); border-radius: 999px; background: var(--panel-soft); color: var(--ink); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.theme-swatch i { width: 22px; height: 22px; border-radius: 50%; background: var(--swatch); border: 2px solid rgba(255, 255, 255, .25); }
.theme-swatch.is-active { border-color: var(--swatch); box-shadow: 0 0 0 2px rgb(var(--brand-rgb) / .25); }
.theme-swatch.is-active i { border-color: #fff; }
.theme-custom { position: relative; padding-left: 14px; }
.theme-custom input { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }

/* ========== 白底黑字（淺色模式）：登入後由「帳號設定 → 外觀」切換；logo 與紅色警示維持原色 ========== */
html[data-mode="light"] {
  color-scheme: light;
  --bg: #f3f3f5;
  --panel: #ffffff;
  --panel-soft: #f1f1f4;
  --ink: #111113;
  --muted: #5d5d66;
  --faint: #8a8a93;
  --line: #e0e0e5;
  --line2: #d0d0d7;
  --ok: #138a50;
  --warn: #a86a00;
  --info: #1766c2;
  --danger: #d12a37;
  --shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.22);
}
html[data-mode="light"] .sidebar { background: #ffffff; }
html[data-mode="light"] .nav-item.active { color: var(--ink); }
html[data-mode="light"] .rent-month { color: var(--ink); }
html[data-mode="light"] .rent-month.is-future { color: var(--ink); }
html[data-mode="light"] .rent-month:hover:not(:disabled) { border-color: var(--ink); }
html[data-mode="light"] .rent-month.is-overdue { color: #b0121e; }
html[data-mode="light"] .rent-month.is-pending { color: var(--ink); }
html[data-mode="light"] .rent-month.is-beyond { background: #ececf0; color: #a0a0a8; }
html[data-mode="light"] .rl-future { border-color: var(--ink); }
html[data-mode="light"] .sort-button:hover,
html[data-mode="light"] .property-drag:hover { background: rgba(0, 0, 0, 0.06); }
html[data-mode="light"] .power-track { background: rgba(0, 0, 0, 0.06); }
html[data-mode="light"] .compare-bar { background: rgba(0, 0, 0, 0.06); }
html[data-mode="light"] .db-warning code { background: rgba(0, 0, 0, 0.07); }
html[data-mode="light"] .pill.good { background: rgba(19, 138, 80, 0.14); color: #0f7a46; }
html[data-mode="light"] .pill.warn { background: rgba(224, 150, 0, 0.18); color: #8a5600; }
html[data-mode="light"] .pill.info { background: rgba(23, 102, 194, 0.12); color: #1766c2; }
html[data-mode="light"] .nav-item:hover { background: rgba(0, 0, 0, 0.05); }
html[data-mode="light"] .nav-item.active { background: linear-gradient(90deg, rgb(var(--brand-rgb) / 0.16), rgb(var(--brand-rgb) / 0.04)); }
html[data-mode="light"] .chip-arrow-left { background: linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0)); color: var(--ink); }
html[data-mode="light"] .chip-arrow-right { background: linear-gradient(270deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0)); color: var(--ink); }
html[data-mode="light"] .theme-swatch i { border-color: rgba(0, 0, 0, .2); }
html[data-mode="light"] .theme-swatch.is-active i { border-color: var(--ink); }
html[data-mode="light"] .unit-tile.tone-good { background: rgba(19, 138, 80, 0.08); }
html[data-mode="light"] .unit-tile.tone-warn { background: rgba(224, 150, 0, 0.1); }

/* 外觀選擇（黑底白字 / 白底黑字） */
.mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 420px; }
.mode-option { display: grid; gap: 8px; padding: 8px; width: 100%; min-height: 44px; border: 2px solid var(--line2); border-radius: 14px; background: var(--panel-soft); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; text-align: center; }
.mode-option.is-active { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .2); }
.mode-preview { display: block; height: 44px; border-radius: 8px; border: 1px solid rgba(128, 128, 128, .4); position: relative; }
.mode-preview::before { content: "Aa"; position: absolute; left: 10px; top: 6px; font-size: 16px; font-weight: 800; }
.mode-preview::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 7px; height: 6px; border-radius: 6px; background: currentColor; opacity: .25; }
.mode-preview.is-dark { background: #0e0e0f; color: #f4f4f3; }
.mode-preview.is-light { background: #ffffff; color: #111113; }
html[data-mode="light"] .chat-header { background: var(--panel-soft); }
html[data-mode="light"] .revenue-year-table thead th { background: var(--panel-soft); }
html[data-mode="light"] .rl-beyond { background: #ececf0; }
html[data-mode="light"] .app-shell { background: linear-gradient(90deg, #fff 0, #fff 248px, var(--bg) 248px); }

/* 店家頁：推薦店家一次三家、配合店家一次六家（超過的在框內上下滑動）、分類燈號、路線結果卡 */
.repair-main .vendor-card-grid { grid-template-columns: minmax(0, 1fr); }
[data-clamp-rows].is-clamped { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; }
.vendor-table-wrap.is-clamped thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cat-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--line2); border-radius: 999px; background: var(--panel-soft); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.cat-chip span { padding: 1px 8px; border-radius: 999px; background: var(--panel); font-size: 12px; }
.cat-chip:hover { color: var(--ink); }
.cat-chip.is-active { color: var(--ink); border-color: var(--brand); box-shadow: 0 0 0 2px rgb(var(--brand-rgb) / .2); }
.cat-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 8px var(--dot); flex: none; }
.cat-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.map-route-result[data-tone="card"] { padding: 0; }
.route-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line2); border-radius: 16px; background: linear-gradient(135deg, rgb(var(--brand-rgb) / .14), var(--panel-soft) 60%); }
.route-points { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.route-point { display: grid; gap: 2px; min-width: 0; }
.route-point small { font-size: 11px; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.route-point strong { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-point.is-end { text-align: right; }
.route-arrow { color: var(--brand); display: grid; place-items: center; }
.route-arrow svg { width: 44px; height: 12px; }
.route-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.route-stat { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.route-stat small { font-size: 12px; color: var(--muted); font-weight: 700; }
.route-num { display: inline-flex; align-items: baseline; gap: 4px; }
.route-num b { font-size: 30px; line-height: 1; font-weight: 900; letter-spacing: -.02em; }
.route-num em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--muted); }

/* 修繕報價確認（三方） */
.quote-panel { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel); }
.quote-panel[data-tone="ok"] { border-color: rgba(54, 208, 127, .5); }
.quote-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.quote-lights { display: inline-flex; gap: 10px; }
.quote-light { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.quote-light i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); }
.quote-light.is-on { color: var(--ok); }
.quote-light.is-on i { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.quote-summary { display: flex; align-items: baseline; gap: 10px; }
.quote-summary strong { font-size: 20px; }
.quote-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.quote-form .compact-button { grid-column: 1 / -1; }

/* ---------- 版面統一 ---------- */
.kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pill-group { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.list-item strong > span:first-child { min-width: 0; }
/* 搜尋欄、下拉、按鈕一律同高 */
.filter-row { align-items: stretch; }
.filter-row > .search, .filter-row > input.search, .filter-row > .select, .filter-row > .primary-button,
.filter-row > .ghost-button, .filter-row > .compact-button, .filter-row > .mode-switch, .filter-row > button { min-height: 46px; height: 46px; box-sizing: border-box; }
.filter-row > .search { display: flex; align-items: center; }
.toolbar > .search, .toolbar > .select, .toolbar > .primary-button, .toolbar > .compact-button, .toolbar > .ghost-button { min-height: 46px; height: 46px; box-sizing: border-box; }
/* 說明文字與按鈕同一排、對齊下緣 */
.hint-row { align-items: flex-end; flex-wrap: nowrap; gap: 14px; }
.hint-row > .tenant-contract-hint { flex: 1 1 auto; margin: 0; align-self: flex-end; }
.hint-row > .toggle-all-icons { flex: 0 0 auto; margin-left: 0; align-self: flex-end; }
@media (max-width: 640px) { .hint-row { flex-wrap: wrap; } }

/* 房東修繕頁沒有地圖欄了：版面用整行寬，四種狀態 2x2 */
.repair-layout:not(:has(.repair-map-card)) { grid-template-columns: minmax(0, 1fr); }
.repair-layout:not(:has(.repair-map-card)) .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .repair-layout:not(:has(.repair-map-card)) .kanban { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 手機登入：滿版 landing → 登入區從右滑入（向右滑回） ---------- */
.login-peek { display: none; }
@media (max-width: 900px) {
  .login-screen { position: fixed; inset: 0; min-height: 0; overflow: hidden; display: block; }
  .login-intro { position: absolute; inset: 0; min-height: 0; height: 100dvh; padding: 36px 24px 40px; animation: none; border: 0; transition: transform .7s cubic-bezier(.22,.8,.2,1), opacity .7s ease; }
  .login-intro::after { display: block; font-size: 112vw; letter-spacing: -6vw; opacity: 1; animation: loginFade 1.4s ease .1s both; }
  .login-stage .login-title { font-size: 38px; }
  .login-stage p { font-size: 15px; }
  .login-edition { display: block; font-size: 11px; text-align: center; }
  .login-peek { display: inline-flex; align-items: center; gap: 6px; position: absolute; right: 24px; bottom: 64px; z-index: 2; padding: 10px 18px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--ink); font: inherit; font-weight: 700; }
  .login-panel { position: absolute; inset: 0; width: 100%; max-width: none; height: 100dvh; padding: 32px 0; border: 0; box-shadow: -30px 0 60px rgba(0, 0, 0, .45); transform: translateX(100%); opacity: 1; animation: none; transition: transform .7s cubic-bezier(.22,.8,.2,1); overflow-y: auto; align-items: center; justify-content: center; }
  .login-panel > * { width: min(100% - 48px, 420px); margin-left: auto; margin-right: auto; }
  .login-brand { margin-left: auto; margin-right: auto; }
  .login-heading { text-align: center; }
  .login-fields .field, .login-fields .select, .login-fields .input { width: 100%; box-sizing: border-box; }
  .login-panel > .login-fields { width: min(100% - 48px, 420px); }
  .login-screen.show-panel .login-panel { transform: none; }
  .login-screen.show-panel .login-intro { transform: translateX(-100%); }
}
@media (max-width: 900px) {
  .login-peek { bottom: 110px; right: 50%; transform: translateX(50%); }
  .login-brand { display: block; width: 132px; margin: 0 auto 28px; }
  .login-panel > .login-footer, .login-panel > .login-meta, .login-panel > :last-child { text-align: center; }
  .login-panel .sidebar-version { margin-left: auto; margin-right: auto; display: table; }
}
@media (max-width: 900px) {
  .login-brand-copy, .login-beta { text-align: center; margin-left: auto; margin-right: auto; }
  .login-brand-copy { width: 100%; }
}

/* 對話框：施工時間選擇與確認按鈕 */
.chat-scheduler { display: grid; gap: 8px; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel-soft); }
.chat-scheduler strong { font-size: 13px; }
.chat-scheduler-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.chat-scheduler-row .input { min-width: 0; padding: 8px 10px; }
.chat-action { margin-top: 8px; }
.chat-scheduler-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.chat-scheduler-row .compact-button { grid-column: 1 / -1; }
.ticket-no { margin: 0; font-size: 12px; color: var(--muted); }
.ticket-no b { color: var(--ink); letter-spacing: .06em; font-size: 13px; }
.ticket-line { font-size: 11px; letter-spacing: .04em; opacity: .85; }
.label-row { display: inline-flex; align-items: baseline; gap: 10px; }
.label-row .meta { font-size: 12px; font-weight: 500; }
.slot-form { display: grid; gap: 6px; }
.slot-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.slot-row .input { min-width: 0; }
.slot-proposal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 10px; border: 1px dashed var(--line2); border-radius: 10px; }
.slot-proposal strong { font-size: 15px; }
.slot-proposal .primary-button { margin-left: auto; }

/* 預約：按鈕成對、灰色按鈕、確認中燈號 */
.btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.btn-pair > button { width: 100%; min-width: 0; }
.gray-button { padding: 10px 14px; border: 1px solid var(--line2); border-radius: 10px; background: var(--panel-soft); color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.gray-button:hover { color: var(--ink); border-color: var(--muted); }
.slot-section { display: grid; gap: 8px; padding-top: 4px; border-top: 1px dashed var(--line2); }
.slot-who { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.slot-who .select { flex: 0 0 auto; width: auto; min-width: 96px; padding: 6px 10px; }
.slot-proposal { align-items: center; }
.chat-slot-wait { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.chat-slot-wait .gray-button { padding: 6px 10px; margin-left: auto; }

/* 手機登入頁：背景 57 慢慢淡入；「登入」按鈕按下去只反紅，整頁一起往左滑；不讓 iOS 自動放大 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.login-screen input, .login-screen select { touch-action: manipulation; }
@media (max-width: 900px) {
  .login-intro::after { opacity: 0; animation: loginFade57 2.4s ease .25s forwards; }
  .login-peek { transition: background .12s ease, border-color .12s ease, color .12s ease; }
  .login-peek.is-pressed, .login-peek:active { background: var(--brand); border-color: var(--brand); color: #fff; }
  .login-intro, .login-panel { will-change: transform; }
}
@keyframes loginFade57 { from { opacity: 0; transform: translate(-50%, -50%) scale(1.04); } to { opacity: 1; transform: translate(-50%, -50%); } }
/* 待辦列的「前往處理」大字：斜體 */
.task-panel .task-item::after { font-style: italic; }

/* 工單卡片：標題列（收合鈕、標題、地點與聯絡人、右上角燈號）＋可收合內容 */
.repair-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.repair-toggle { flex: none; width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel-soft); color: var(--muted); cursor: pointer; padding: 0; }
.repair-toggle .collapse-chevron { display: inline-block; transition: transform .18s ease; transform: rotate(90deg); }
.is-collapsed > .repair-head .repair-toggle .collapse-chevron { transform: none; }
.repair-title { flex: 0 1 auto; min-width: 0; font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repair-where { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repair-where i { font-style: normal; opacity: .6; }
.repair-pills { flex: none; margin-left: auto; }
.repair-pills .pill-group { margin-left: 0; }
.repair-body { display: grid; gap: 6px; margin-top: 10px; }
.is-collapsed > .repair-body { display: none; }
.repair-card.is-collapsed { padding-bottom: 12px; }
.repair-card .repair-head { flex-wrap: wrap; }
@media (max-width: 560px) { .repair-where { flex-basis: 100%; order: 3; } .repair-pills { margin-left: auto; } }

/* 大頭照：調整視窗與管理員審核 */
.avatar-rule { color: var(--muted); }
.avatar-adjust-body { padding: 4px 28px 8px; display: grid; gap: 14px; justify-items: center; }
.avatar-frame.is-large { width: min(260px, 70vw); height: min(260px, 70vw); }
.avatar-range.is-wide { width: min(260px, 70vw); max-width: none; }
#avatar-adjust .dialog-actions { padding: 0 28px 22px; }
.avatar-review-list { display: grid; gap: 12px; }
.avatar-review-item { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line2); }
.avatar-review-item:last-child { border-bottom: 0; }
.avatar-review-info { display: grid; gap: 2px; flex: 1; min-width: 120px; }

/* ---------- 手機版：按鈕並排、燈號一排四個、卡片標題不跑版 ---------- */
@media (max-width: 960px) {
  /* 按鈕不再各佔一整行：按鈕列內的按鈕平均並排 */
  .button-row > .primary-button, .button-row > .ghost-button, .button-row > .danger-button, .button-row > .compact-button,
  .row-actions > .primary-button, .row-actions > .ghost-button, .row-actions > .danger-button, .row-actions > .compact-button { width: auto; flex: 1 1 0; min-width: 0; }
  .card-header > .row-actions, .card-header > .button-row { flex: 1 1 100%; flex-wrap: nowrap; }
  .pagination-row { flex-wrap: wrap; }
  .pagination-row > .meta { flex: 1 1 100%; }
  .pagination-row > .button-row { flex: 1 1 100%; flex-wrap: nowrap; align-items: stretch; }
  .pagination-row .page-indicator { flex: none; align-self: center; white-space: nowrap; }
  /* 房源卡片標題：拖拉與收合圖示並排，名稱在下一行 */
  .property-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 8px; }
  .property-title > .property-drag, .property-title > .property-toggle { flex: none; }
  .property-title > .property-title-main { flex: 1 1 100%; }
  /* 狀態燈號：一排四個，超過四個左右滑動 */
  .overview-legend { flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .overview-legend::-webkit-scrollbar { display: none; }
  .overview-legend .legend-chip { flex: 0 0 calc((100% - 18px) / 4); min-width: 0; flex-direction: column; gap: 4px; padding: 8px 4px; border-radius: 14px; justify-content: center; }
  .overview-legend .legend-chip .pill { font-size: 12px; padding: 2px 8px; }
  /* 可收合卡片標題裡的按鈕不貼著卡片邊緣 */
  .collapsible-card > summary.card-header { padding-bottom: 16px; align-items: center; }
  .collapsible-card > summary .summary-actions { gap: 10px; flex: 1 1 100%; justify-content: space-between; }
}

/* ---------- 手機版：頂部透明紅色 logo、底部懸浮膠囊導覽、可左右滑的已收租金卡 (V.3.6.0) ---------- */
.rent-carousel { display: none; }
@media (max-width: 640px) {
  .app-shell .sidebar { grid-template-columns: minmax(0, 1fr) auto; min-height: 56px; padding: 6px 16px; background: var(--bg); border-bottom: 0; box-shadow: none; }
  .app-shell .sidebar .brand { padding: 0; gap: 0; min-width: 0; }
  .app-shell .sidebar .brand > div { display: none; }
  .app-shell .sidebar .brand-mark { width: auto; height: 76px; margin: -22px 0 -22px -12px; padding: 0; border-radius: 0; background: transparent; object-fit: contain; }
  .app-shell .sidebar-foot { padding: 0; margin: 0; }
  .app-shell .sidebar-version, .app-shell .sync-status { display: none; }
  .app-shell .nav { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; grid-column: auto; display: flex; gap: 2px; padding: 4px; overflow-x: auto; scrollbar-width: none; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); }
  .app-shell .nav::-webkit-scrollbar { display: none; }
  .app-shell .nav-item { flex: 0 0 64px; width: 64px; height: 56px; min-height: 44px; padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 2px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--muted); background: transparent; box-shadow: none; }
  .app-shell .nav-item span:last-child { display: block; }
  .app-shell .nav-item .nav-icon { width: 22px; height: 22px; flex-basis: 22px; }
  .app-shell .nav-item.active { background: var(--panel-soft); color: var(--ink); box-shadow: none; }
  .app-shell .nav-item.active .nav-icon { color: var(--brand); }
  .app-shell .nav-badge { position: absolute; top: 2px; right: 8px; margin: 0; }
  .app-shell .main { padding: 12px 16px 112px; }
  .app-shell .card { border-radius: 20px; }
  .chat-dock { bottom: 88px; }

  .stat-card.is-collected { display: none; }
  .rent-carousel { display: block; margin-bottom: 12px; }
  .rent-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 20px; }
  .rent-track::-webkit-scrollbar { display: none; }
  .rent-slide { flex: 0 0 100%; scroll-snap-align: center; min-width: 0; padding: 20px; border-radius: 20px; background: #0a0a0a; color: #ffffff; }
  :root[data-mode="dark"] .rent-slide, .dark .rent-slide { background: #1f1f22; }
  .rent-slide .rs-label { margin: 0; color: #b4b4b4; font-size: 14px; }
  .rent-slide .rs-fig { margin: 4px 0 16px; font-size: 32px; line-height: 40px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .rent-slide .rs-bar { height: 8px; border-radius: 999px; background: #3a3a3f; overflow: hidden; }
  .rent-slide .rs-bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
  .rent-slide .rs-ends { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: #b4b4b4; font-size: 12px; font-variant-numeric: tabular-nums; }
  .rs-tools { display: flex; gap: 8px; margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
  .rs-tools::-webkit-scrollbar { display: none; }
  .rs-tools button { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #3a3a3f; background: transparent; color: #ffffff; font-weight: 500; white-space: nowrap; }
  .rs-tools button[aria-pressed="true"] { background: #ffffff; color: #0a0a0a; border-color: #ffffff; }
  .rs-tools .rs-sep { flex: none; width: 1px; background: #3a3a3f; margin: 6px 2px; }
  .rent-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
  .rent-dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--line); transition: background 180ms cubic-bezier(0.23, 1, 0.32, 1), width 180ms cubic-bezier(0.23, 1, 0.32, 1); }
  .rent-dots i.on { width: 20px; background: var(--brand); }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) { .rent-dots i { transition: none; } .rent-track { scroll-behavior: auto; } }
@media (max-width: 640px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-shell .main, .app-shell .view-root { min-width: 0; max-width: 100%; }
  .rent-carousel, .rent-track { min-width: 0; max-width: 100%; }
  .app-shell .sidebar-logout { min-height: 44px; min-width: 44px; }
}

/* ---------- 手機版對話：全螢幕、決定卡（確認時間、確認報價、付款人、電費儲值）---------- */
.decision-head { display: none; }
@media (max-width: 640px) {
  .chat-dock:has(.chat-panel) { inset: 0; right: 0; bottom: 0; z-index: 60; pointer-events: auto; }
  .chat-dock:has(.chat-panel) .chat-toggle { display: none; }
  .chat-panel { position: fixed; inset: 0; width: auto; display: flex; flex-direction: column; border: 0; border-radius: 0; background: var(--bg); }
  .chat-panel .chat-header { flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 8px 16px; background: var(--bg); border-bottom: 0; }
  .chat-panel .chat-header strong { font-size: 24px; font-weight: 700; }
  .chat-panel .chat-close { width: 44px; height: 44px; border-radius: 999px; background: var(--panel); font-size: 22px; }
  .chat-panel .chat-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; }
  .chat-panel .chat-body > .select { min-height: 48px; border-radius: 999px; padding: 0 20px; background: var(--panel); }
  .chat-panel .chat-contact { display: flex; align-items: center; gap: 12px; }
  .chat-panel .chat-thread { flex: 1; min-height: 0; max-height: none; gap: 12px; padding: 4px 0; border: 0; background: transparent; }
  .chat-panel .chat-row { display: flex; gap: 8px; align-items: flex-end; }
  .chat-panel .chat-row.is-self { flex-direction: row-reverse; }
  .chat-panel .chat-message { max-width: 82%; padding: 12px 16px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); }
  .chat-panel .chat-message.is-self { background: var(--panel-soft); border: 1px solid var(--panel-soft); color: var(--ink); }
  .chat-panel .chat-message.is-self small { color: var(--muted); }
  .chat-panel .chat-message small { font-size: 12px; }
  .chat-panel .chat-message.has-decision { max-width: calc(100% - 40px); flex: 1; padding: 20px; background: var(--panel); border: 1px solid var(--line); }
  .decision-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  .decision-tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--panel-soft); color: var(--ink); font-size: 12px; font-weight: 500; }
  .decision-state { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 12px; font-weight: 500; }
  .decision-state.is-wait { color: #e5a93b; border-color: #e5a93b; }
  :root[data-mode="light"] .decision-state.is-wait { color: #92400e; border-color: #92400e; }
  .chat-panel .has-decision .compact-button, .chat-panel .has-decision .gray-button { min-height: 44px; border-radius: 999px; padding: 0 16px; font-weight: 600; }
  .chat-panel .has-decision .compact-button.is-primary { background: var(--ink); color: var(--bg); border: 0; }
  .chat-panel .has-decision .gray-button { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
  .chat-panel .has-decision .chat-action { width: 100%; }
  .chat-panel .chat-scheduler { border-radius: 20px; background: var(--panel); }
  .chat-panel .chat-scheduler-row .input, .chat-panel .chat-scheduler-row .compact-button { min-height: 44px; }
  .chat-panel .chat-form { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 4px 4px 4px 16px; border-radius: 28px; background: var(--panel); border: 1px solid var(--line); }
  .chat-panel .chat-form textarea { min-height: 44px; border: 0; background: transparent; resize: none; }
  .chat-panel .chat-form .compact-button { min-height: 44px; min-width: 64px; border-radius: 999px; background: var(--ink); color: var(--bg); border: 0; }
}
@media (max-width: 640px) { .chat-panel .chat-form textarea { height: 44px; max-height: 96px; padding: 10px 0; } }
@media (max-width: 640px) {
  .rs-units { margin: 12px 0 0; padding: 0; list-style: none; max-height: 132px; overflow-y: auto; }
  .rs-units li { display: flex; justify-content: space-between; gap: 12px; min-height: 44px; align-items: center; border-top: 1px solid #3a3a3f; font-size: 14px; font-variant-numeric: tabular-nums; }
  .rs-units li span:last-child { color: #b4b4b4; }
}

/* ---------- 手機版整體風格：跟 design-previews/landlord-chat 示意頁一致（中性底、大圓角卡、黑白按鈕、紅色只用在小記號）---------- */
@media (max-width: 640px) {
  html[data-mode="dark"] { --bg: #0e0e0f; --panel: #161617; --panel-soft: #1f1f22; --ink: #f4f4f3; --muted: #a0a0a5; --faint: #a0a0a5; --line: #2a2a2d; --line2: #3a3a3f; --m-pos: #3fc07a; --m-neg: #e5566f; --m-warn: #e5a93b; --m-btn: #f4f4f3; --m-btn-ink: #0e0e0f; --m-btn-hover: #dcdcdb; }
  html[data-mode="light"] { --bg: #f7f7f7; --panel: #ffffff; --panel-soft: #eeeeee; --ink: #111111; --muted: #5f5f5f; --faint: #5f5f5f; --line: #e3e3e3; --line2: #c9c9c9; --m-pos: #247b50; --m-neg: #c4242a; --m-warn: #92400e; --m-btn: #0a0a0a; --m-btn-ink: #ffffff; --m-btn-hover: #2a2a2a; }
  :root, body, button, input, select, textarea { font-family: "DM Sans", "Noto Sans TC", system-ui, sans-serif; }
  body, html[data-mode] .app-shell { background: var(--bg); }
  html[data-mode] .app-shell .sidebar { background: var(--bg); }
  h1 { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; }
  h2 { font-size: 18px; font-weight: 600; letter-spacing: 0; }
  .workspace-label { display: none; }
  .topbar { margin-bottom: 12px; }
  html[data-mode] .app-shell .nav-item.active { background: var(--panel-soft); color: var(--ink); box-shadow: none; }

  .app-shell .card, .grid.stats .stat-card { border-radius: 20px; border: 1px solid var(--line); background: var(--panel); box-shadow: none; }
  .grid.stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid.stats:has(.is-collected) > .stat-card:first-child { grid-column: 1 / -1; }
  .grid.stats > .stat-card:nth-child(odd):last-child { grid-column: 1 / -1; }
  .stats .stat-card { padding: 20px; }
  .stats .stat-card::before { display: none; }
  .stat-card span { font-size: 14px; font-weight: 400; }
  .stat-card strong { margin-top: 8px; font-size: 24px; font-weight: 600; letter-spacing: 0; }
  .card-header { padding: 20px 20px 0; }
  .card-body { padding: 16px 20px 20px; }

  .primary-button, .compact-button.is-primary { background: var(--m-btn); border-color: var(--m-btn); color: var(--m-btn-ink); box-shadow: none; }
  .primary-button:hover, .compact-button.is-primary:hover { background: var(--m-btn-hover); border-color: var(--m-btn-hover); }
  .ghost-button, .compact-button, .gray-button, .icon-button { background: var(--panel); border: 1px solid var(--line2); color: var(--ink); }
  .compact-button.is-primary { border-color: var(--m-btn); }
  .danger-button { background: var(--panel); border: 1px solid var(--m-neg); color: var(--m-neg); }
  .primary-button, .ghost-button, .compact-button, .gray-button, .danger-button, .icon-button { min-height: 44px; border-radius: 999px; font-weight: 600; }
  .report-tab.active, .segment.active, .reset-tab.active { background: var(--m-btn); border-color: var(--m-btn); color: var(--m-btn-ink); }

  .select, .input, .textarea, .search { min-height: 48px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line2); }
  .textarea { min-height: 96px; }
  .search:focus, .select:focus, .input:focus, .textarea:focus { border-color: var(--ink); box-shadow: none; outline: 2px solid var(--ink); outline-offset: 2px; }

  html[data-mode] .pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-weight: 500; }
  html[data-mode] .pill.good, html[data-mode] .pill.ok { color: var(--m-pos); }
  html[data-mode] .pill.warn, html[data-mode] .pill.waiting { color: var(--m-warn); border-color: var(--m-warn); }
  html[data-mode] .pill.danger { color: var(--m-neg); border-color: var(--m-neg); }
}
@media (max-width: 640px) {
  html[data-mode] .property-status-tab { min-height: 44px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
  html[data-mode] .property-status-tab.is-active, html[data-mode] .property-status-tab.is-rented.is-active, html[data-mode] .property-status-tab.is-vacant.is-active { background: var(--m-btn); border-color: var(--m-btn); color: var(--m-btn-ink); }
}

/* iOS：固定在底部的導覽不能放在有 overflow 的父層裡（會被裁掉）；租金卡橫滑時不要吃掉上下捲動 */
@media (max-width: 640px) {
  .app-shell .sidebar { overflow: visible; position: static; height: auto; }
  .rent-track { overflow-y: hidden; touch-action: pan-x pan-y; }
  .rent-slide .rs-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 20px; }
  .rent-units { margin-top: 16px; padding: 16px 20px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
  .rent-units h2 { margin: 0 0 12px; font-size: 16px; }
  .rent-units .rs-tools button { border-color: var(--line2); color: var(--ink); background: var(--panel); }
  .rent-units .rs-tools button[aria-pressed="true"] { background: var(--m-btn); color: var(--m-btn-ink); border-color: var(--m-btn); }
  .rent-units .rs-tools .rs-sep { background: var(--line2); }
  .rent-units .rs-units { max-height: none; margin-top: 8px; }
  .rent-units .rs-units li { border-top-color: var(--line); }
  .rent-units .rs-units li span:last-child { color: var(--muted); }
}

@media (max-width: 640px) {
  .rent-slide { cursor: pointer; }
  .rent-slide .rs-more { margin: 12px 0 0; color: #b4b4b4; font-size: 12px; text-align: right; }
  .rent-slide:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
}

/* ---------- 手機版：篩選欄全寬、出租率條全寬、橫向捲動區不吃掉上下捲動 ---------- */
@media (max-width: 640px) {
  .overview-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .overview-filters .select { width: 100%; }
  .overview-rate { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-left: 0; }
  .overview-rate-bar { width: 100%; height: 8px; }
  .overview-rate-bar i { background: var(--brand); }
  .chip-track, .rent-strip, .account-track, .tenant-ad-track, .overview-legend { overflow-y: hidden; overscroll-behavior-x: contain; }
  /* 手機上不要在頁面裡再包一層會上下捲動的區塊，否則手指停在上面時整頁捲不動 */
  .news-panel > .card-body, .task-panel .list, .repair-store-list, .backend-list, .revenue-year-table,
  .dashboard-columns > .task-panel > .card-body, .grid.two > .task-panel > .card-body, [data-clamp-rows].is-clamped { max-height: none; overflow-y: visible; }
}
@media (max-width: 640px) {
  .app-shell select.select { width: 100%; max-width: 100%; flex: 1 1 100%; }
  .app-shell td select.select, .app-shell th select.select { width: auto; flex: none; }
}

/* ---------- 手機版 (V.3.8.0)：對話列表、可點的統計卡、房源標題列 ---------- */
.stat-card.is-link { position: relative; display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.stat-card.is-link .stat-chev { position: absolute; top: 14px; right: 16px; font-style: normal; font-size: 22px; line-height: 1; color: var(--muted); }
.stat-card.is-link:hover { border-color: var(--faint); }
.property-name-link { padding: 0; border: 0; background: none; font: inherit; font-weight: inherit; color: inherit; text-align: left; cursor: pointer; }
.property-name-link:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .stat-card.is-receivable { display: none; }
  .grid.stats:has(.is-collected) > .stat-card:first-child { grid-column: auto; }
  .stat-card.is-link:active { transform: scale(0.98); }

  .property-title { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 8px; }
  .property-title > .property-title-main { grid-column: 1; grid-row: 1; min-width: 0; }
  .property-title > .property-drag { grid-column: 2; grid-row: 1; position: relative; width: 24px; height: 24px; margin-top: 0; }
  .property-title > .property-toggle { grid-column: 3; grid-row: 1; position: relative; width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 8px; font-size: 12px; }
  .property-title > .property-drag::after, .property-title > .property-toggle::after { content: ""; position: absolute; inset: -10px; }
  .property-title > .property-metrics, .property-title > .row-actions { grid-column: 1 / -1; }
  .property-name-link { position: relative; font-size: 18px; font-weight: 600; letter-spacing: 0; }
  .property-name-link::after { content: ""; position: absolute; inset: -10px -6px; }

  .chat-panel .chat-back { width: 44px; height: 44px; flex: none; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-size: 20px; }
  .chat-panel .chat-header { gap: 8px; }
  .chat-panel .chat-header strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-panel:not(.is-list) .chat-body > .select { display: none; }
  .chat-avatar.is-large { width: 48px; height: 48px; font-size: 16px; }

  .cl-search { display: flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
  .cl-search input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: none; color: var(--ink); }
  .cl-search input::placeholder { color: var(--muted); opacity: 1; }
  .cl-search:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
  .cl-tabs { display: flex; padding: 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
  .cl-tabs button { flex: 1; min-height: 48px; border-radius: 999px; color: var(--muted); font-weight: 500; transition: background 180ms cubic-bezier(0.23, 1, 0.32, 1), color 180ms cubic-bezier(0.23, 1, 0.32, 1); }
  .cl-tabs button[aria-pressed="true"] { background: var(--m-btn); color: var(--m-btn-ink); }
  .cl-cards { flex: 1; min-height: 0; display: grid; align-content: start; gap: 12px; overflow-y: auto; padding-bottom: 8px; }
  .cl-card { display: block; width: 100%; padding: 16px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); text-align: left; color: var(--ink); transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1); }
  .cl-card:active { transform: scale(0.98); }
  .cl-top { display: flex; align-items: center; gap: 12px; }
  .cl-who { flex: 1; min-width: 0; display: grid; }
  .cl-name { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; line-height: 24px; }
  .cl-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--brand); }
  .cl-sub { font-size: 12px; line-height: 16px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cl-cap { flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 12px; font-weight: 500; white-space: nowrap; }
  .cl-cap.is-wait { color: var(--m-warn); border-color: var(--m-warn); }
  .cl-cap.is-done { color: var(--m-pos); }
  .cl-bot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
  .cl-tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--panel-soft); font-size: 12px; font-weight: 500; white-space: nowrap; }
  .cl-time { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .cl-empty { margin: 0; padding: 24px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--line2); border-radius: 20px; }
  .cl-new { flex: none; min-height: 56px; border-radius: 999px; background: var(--m-btn); color: var(--m-btn-ink); font-size: 16px; font-weight: 600; }
}
@media (max-width: 640px) {
  .cl-tabs button, .cl-card, .cl-new { border: 0; box-shadow: none; }
  .cl-tabs button { background: transparent; }
  .cl-tabs button[aria-pressed="true"] { background: var(--m-btn); }
  .cl-card { border: 1px solid var(--line); }
  .cl-card:hover { background: var(--panel); }
  .cl-new { width: 100%; background: var(--m-btn); }
}

/* ---------- 手機版 (V.3.8.1)：租金卡催繳、左上角帳戶 ---------- */
.account-chip { display: none; }
@media (max-width: 640px) {
  .rent-slide { position: relative; }
  .rent-slide .rs-chev { position: absolute; top: 16px; right: 18px; font-style: normal; font-size: 22px; line-height: 1; color: #b4b4b4; }
  .rent-slide .rs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
  .rent-slide .rs-foot p { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 500; line-height: 20px; }
  .rent-slide .rs-remind { flex: none; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: #ffffff; color: #0a0a0a; font-weight: 600; white-space: nowrap; }
  :root[data-mode="dark"] .rent-slide .rs-remind { background: #f4f4f3; }
  .rent-slide .rs-more { display: none; }

  .app-shell .sidebar .account-chip { display: flex; grid-column: 1 / -1; grid-row: 2; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
  .account-chip[hidden] { display: none; }
  .account-chip .chat-avatar { width: 44px; height: 44px; flex: none; }
  .account-chip-text { display: grid; min-width: 0; }
  .account-chip-text strong { font-size: 16px; font-weight: 600; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-chip-text small { font-size: 12px; line-height: 16px; color: var(--muted); }
  .app-shell .sidebar { padding-bottom: 0; }
}

/* 手機登入頁「登入」按鈕：固定在原地，不跟著頁面滑動；按下去只有往下壓與換色，頁面滑走時按鈕原地淡出 */
@media (max-width: 900px) {
  .login-peek { position: absolute; left: 0; right: 0; bottom: 110px; z-index: 5; width: max-content; margin: 0 auto; min-height: 44px; transform: none; transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease, opacity .25s ease; }
  .login-peek:active, .login-peek.is-pressed { transform: scale(0.96); background: var(--brand); border-color: var(--brand); color: #fff; }
  .login-screen.show-panel .login-peek { opacity: 0; pointer-events: none; }
}

/* 收租月份格：左右箭頭的漸層跟月份格上下對齊、圓角不外露，整條在圓角框內裁切 */
.rent-scroller { position: relative; overflow: hidden; border-radius: 12px; }
.rent-scroller .chip-arrow { top: 2px; bottom: 8px; border-radius: 0; }
.rent-scroller .chip-arrow-left, .rent-scroller .chip-arrow-right { border-radius: 0; }

/* ---------- 重點色：一條可拖拉的色條 ---------- */
.theme-hue { display: grid; gap: 12px; }
.hue-row { display: flex; align-items: center; gap: 14px; }
.hue-preview { flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--brand); border: 2px solid var(--line2); }
.hue-slider { flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.hue-slider::-webkit-slider-runnable-track { height: 16px; border-radius: 999px; background: linear-gradient(90deg, hsl(0 80% 50%), hsl(60 80% 50%), hsl(120 80% 50%), hsl(180 80% 50%), hsl(240 80% 50%), hsl(300 80% 50%), hsl(360 80% 50%)); }
.hue-slider::-moz-range-track { height: 16px; border-radius: 999px; background: linear-gradient(90deg, hsl(0 80% 50%), hsl(60 80% 50%), hsl(120 80% 50%), hsl(180 80% 50%), hsl(240 80% 50%), hsl(300 80% 50%), hsl(360 80% 50%)); }
.hue-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -6px; border-radius: 999px; background: #ffffff; border: 3px solid var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.hue-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 999px; background: #ffffff; border: 3px solid var(--ink); }
.hue-slider:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 999px; }
.logout-card { display: none; }
.brand-role { display: none; }

/* ---------- 手機版 (累積中)：頭像移到右上角、登出移到帳號設定、logo 後面加權限名稱 ---------- */
@media (max-width: 640px) {
  .logout-card { display: block; }
  .app-shell .sidebar-foot { display: none; }
  .app-shell .sidebar .brand-role { display: inline-block; flex: none; margin-left: 4px; font-size: 16px; font-weight: 700; color: var(--ink); }
  .app-shell .sidebar .brand { display: flex; align-items: center; }
  .app-shell .sidebar .account-chip { grid-column: 2; grid-row: 1; width: 44px; min-height: 44px; justify-self: end; }
  .account-chip-text { display: none; }
}
@media (max-width: 640px) {
  .app-shell .sidebar .brand, .app-shell .sidebar .brand-button { flex-direction: row; align-items: center; justify-content: flex-start; gap: 0; }
  .app-shell .sidebar .brand .brand-role { margin: 0 0 0 2px; letter-spacing: 0; font-size: 16px; line-height: 24px; white-space: nowrap; color: var(--ink); }
}

/* ---------- 管理員：帳號狀態圓點、最活躍帳號 ---------- */
.status-dot { position: relative; flex: none; width: 12px; height: 12px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.status-dot i { display: block; width: 12px; height: 12px; border-radius: 999px; background: #2fbf71; }
.status-dot.is-off i { background: var(--danger-soft, #e5566f); }
.status-dot::after { content: ""; position: absolute; inset: -16px; }
.status-dot-note { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.status-dot-note[hidden] { display: none; }
@media (max-width: 640px) {
  .status-toolbar { flex-wrap: nowrap; gap: 8px; }
  .status-toolbar .status-search { flex: 1 1 0 !important; width: auto !important; min-width: 0; }
  .status-toolbar select.select { flex: 0 0 116px !important; width: 116px !important; }
  .status-row-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .status-chip { min-width: 0; padding: 10px 12px; }
  .status-chip-info { min-width: 0; }
  .status-chip-info strong, .status-chip-info .meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .activity-controls { display: grid; gap: 8px; width: 100%; }
  .segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; gap: 4px; }
  .segmented .segment { min-height: 40px; padding: 0 8px; border-radius: 999px; font-size: 13px; text-align: center; }
  .activity-value { font-size: 13px; }
}

/* ---------- 手機版觸控目標：視覺大小不變，可點範圍補到 44px ---------- */
@media (max-width: 640px) {
  .sort-button, .repair-toggle { position: relative; }
  .sort-button::after, .repair-toggle::after { content: ""; position: absolute; inset: -12px -8px; }
  .cat-chip { min-height: 44px; }
  .ad-nav, .report-row .compact-button, .app-shell td .compact-button { min-width: 44px; min-height: 44px; }
  .app-shell input[type="color"] { width: 32px; height: 32px; padding: 0; border-radius: 999px; }
  .search input, .status-search input { min-height: 44px; }
}
@media (max-width: 640px) { .app-shell td button, .app-shell td .icon-button { min-width: 44px; } }

/* 手機版：帳務明細、報表的「年份」和「範圍」下拉選單縮短，放在同一排 */
@media (max-width: 640px) {
  .filter-row.ledger-filter { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; }
  .filter-row.ledger-filter > .search, .filter-row.ledger-filter > .primary-button { grid-column: 1 / -1; }
  .ledger-filter select.select, .report-control-row select.select { width: 100%; flex: none; min-width: 0; }
  .report-control-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; }
  .report-control-row > .segmented { grid-column: 1 / -1; }
  .report-control-row > [data-report-year] { grid-column: 1; }
  .report-control-row > [data-report-scope] { grid-column: 2; }
  .report-control-row:not(:has([data-report-year])) > [data-report-scope] { grid-column: 1 / -1; }
}

/* 手機版：房源卡的「共幾層樓、幾室、已出租、待出租」改成一行簡單文字，不再每個一個方塊；收合時卡片底部留白，不貼著邊框 */
@media (max-width: 640px) {
  .property-title > .property-metrics { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; overflow: visible; margin: 0; padding: 0; }
  .property-metrics > span { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 13px; font-weight: 400; color: var(--muted); white-space: nowrap; }
  .property-metrics > span + span::before { content: "·"; margin: 0 8px; color: var(--faint); }
  .property-metrics > span strong { font-weight: 600; color: var(--ink); }
  .property-metrics > .property-metric-rented strong { color: var(--m-neg, var(--danger)); }
  .property-metrics > .property-metric-vacant strong { color: var(--m-pos, var(--ok)); }
  .property-card:not(:has(.card-body)) > .property-title { padding-bottom: 20px; }
}
@media (max-width: 640px) {
  .property-card.is-collapsed > .property-title { padding-bottom: 20px; }
  /* 工具列裡的「清單／總覽」切換維持原本大小，跟旁邊的按鈕同一排 */
  .segmented.mode-switch { display: inline-grid; width: auto; flex: 0 0 auto; }
  .segmented.mode-switch .segment { padding: 0 14px; min-height: 36px; }
}
@media (max-width: 640px) {
  .property-card.is-collapsed > .property-title { padding-bottom: 20px; }
  /* 「清單／總覽」切換維持原本大小，跟「新增房源」和縮放按鈕同一排 */
  .segmented.mode-switch { display: inline-grid; width: auto; flex: 0 0 auto; }
  .segmented.mode-switch .segment { padding: 0 14px; min-height: 36px; }
  /* 房源總覽的「全部房源」「全部樓層」縮短，放在同一排；出租率條整排寬 */
  .overview-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .overview-filters .overview-rate { grid-column: 1 / -1; margin-top: 4px; }
}

/* ---------- 收支趨勢：手機版弧線面積圖（桌面版維持長條圖）---------- */
.trend-curve { display: none; }
@media (max-width: 640px) {
  .trend-bars { display: none; }
  .trend-curve { display: block; }
  .curve-tabs { display: flex; gap: 8px; margin-bottom: 8px; }
  .curve-tabs button { flex: 1; min-height: 44px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--muted); font-weight: 600; transition: background 180ms cubic-bezier(0.23, 1, 0.32, 1), color 180ms cubic-bezier(0.23, 1, 0.32, 1); }
  .curve-tabs button[aria-pressed="true"] { background: var(--m-btn); border-color: var(--m-btn); color: var(--m-btn-ink); }
  .curve-box { touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none; }
  .curve-svg { display: block; width: 100%; height: auto; overflow: visible; }
  .curve-line { stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .curve-marker { stroke: var(--line2); stroke-width: 1; }
  .curve-dot { fill: var(--panel); stroke: var(--brand); stroke-width: 3; }
  .curve-bubble rect { fill: var(--panel); stroke: var(--line2); stroke-width: 1; }
  .curve-bubble text { fill: var(--ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .curve-bubble.is-current rect { fill: var(--brand); stroke: none; }
  .curve-bubble.is-current text { fill: #ffffff; }
  .curve-label { fill: var(--muted); font-size: 11px; }
  .curve-label.is-on { fill: var(--ink); font-weight: 700; }
  .curve-hint { margin: 4px 0 12px; font-size: 12px; color: var(--muted); text-align: center; }
  .curve-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  .curve-stats small { display: block; font-size: 12px; color: var(--muted); }
  .curve-stats strong { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
}
.trend-sub-curve { display: none; }
@media (max-width: 640px) { .trend-sub-bars { display: none; } .trend-sub-curve { display: inline; } }

/* ---------- 手機版：對話放進底部功能列（取代左下角圓形對話按鈕）---------- */
.nav-chat { display: none; }
@keyframes chatNavPop { 0% { transform: scale(0.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (max-width: 640px) {
  .app-shell .nav-chat { display: flex; }
  .chat-dock .chat-toggle { display: none; }
  .app-shell .nav-chat .chat-nav-badge[hidden] { display: none; }
  .chat-nav-badge.is-new { animation: chatNavPop 360ms cubic-bezier(0.23, 1, 0.32, 1); }
}
@media (prefers-reduced-motion: reduce) { .chat-nav-badge.is-new { animation: none; } }

.avatar-refresh-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; min-height: 44px; }
.avatar-refresh-line .ghost-button { min-height: 44px; min-width: 44px; }

/* 手機版：表格列裡的燈號與按鈕垂直置中、按鈕統一 44px 高；操作欄的按鈕不換行疊在一起 */
@media (max-width: 960px) {
  td { vertical-align: middle; }
  td.row-actions { white-space: nowrap; }
  td.row-actions > * { margin: 0 6px 0 0; }
  td .compact-button, td .ghost-button, td .primary-button, td .danger-button { min-height: 44px; min-width: 72px; padding-left: 14px; padding-right: 14px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
  .chat-panel .chat-back, .chat-panel .chat-close, .chat-panel [data-chat-close] { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
  .chat-panel .chat-back svg, .chat-panel .chat-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}

/* ---------- 控制項高度統一：同類型的按鈕、輸入框、下拉選單在所有頁面與權限都用同一個高度 ----------
   電腦版：標準控制項 44px、小型操作按鈕（compact）36px。手機版（960px 以下）：標準控制項 46px、小型操作按鈕 46px，分段切換 40px。 */
:root { --control-h: 44px; --control-sm-h: 36px; --segment-h: 40px; }
@media (max-width: 960px) { :root { --control-h: 46px; --control-sm-h: 46px; } }
html body .primary-button, html body .ghost-button, html body .danger-button, html body .gray-button,
html body .select, html body .search, html body .cl-search, html body .cl-tabs button, html body .curve-tabs button, html body .rs-tools button,
html body .input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  min-height: var(--control-h) !important; box-sizing: border-box;
}
html body .select, html body .search, html body .cl-search, html body .input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { height: var(--control-h) !important; }
html body textarea.input, html body .textarea { height: auto; }
html body .compact-button, html body .icon-square-button { min-height: var(--control-sm-h) !important; box-sizing: border-box; }
html body .icon-square-button { min-width: var(--control-sm-h); }
html body .contract-picker .select, html body .rate-edit .input, html body .chat-panel .chat-body > .select, html body .toolbar > .select, html body .toolbar > .search { min-height: var(--control-h) !important; height: var(--control-h) !important; }
html body .toolbar > .primary-button, html body .toolbar > .ghost-button, html body .filter-row > .ghost-button, html body .filter-row > button { min-height: var(--control-h) !important; height: var(--control-h) !important; }
html body .toolbar > .compact-button, html body .filter-row > .compact-button { min-height: var(--control-sm-h) !important; height: var(--control-sm-h) !important; }
html body .segmented .segment, html body .segmented.mode-switch .segment { min-height: var(--segment-h) !important; }
@media (max-width: 960px) {
  html body td .compact-button, html body td .ghost-button, html body td .primary-button, html body td .danger-button { min-height: var(--control-h) !important; }
}
/* 篩選分頁、分類標籤、左右切換鈕、催繳鈕：同一類用同一個小型控制項高度 */
html body .property-status-tab, html body .cat-chip, html body .curve-tabs button, html body .ad-nav, html body .rs-remind { min-height: var(--control-sm-h) !important; box-sizing: border-box; }
html body .icon-square-button { height: var(--control-sm-h) !important; width: var(--control-sm-h) !important; }
@media (max-width: 960px) {
  html body .toolbar > .primary-button { flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 12px; white-space: nowrap; }
}

/* 收合／展開圖示：展開中顯示「縮」，收起顯示「開」；單一按鈕、同一組圖示 */
.fold-icon { display: inline-grid; place-items: center; width: 16px; height: 16px; color: inherit; }
.fold-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[aria-expanded="true"] .fold-expand, [aria-expanded="false"] .fold-collapse,
details[open] > summary .fold-expand, details:not([open]) > summary .fold-collapse { display: none; }
.property-card.is-collapsed .property-toggle .fold-collapse, .is-collapsed > .repair-head .repair-toggle .fold-collapse { display: none; }
.property-card:not(.is-collapsed) .property-toggle .fold-expand, :not(.is-collapsed) > .repair-head .repair-toggle .fold-expand { display: none; }
html body .property-toggle .fold-icon, html body .repair-toggle .fold-icon { transform: none; transition: none; }

/* 切換鈕（分段切換）：外框與內部選取鈕都是全圓角 */
html body .segmented { border-radius: 999px; }
html body .segmented .segment { border-radius: 999px; }
/* 房源標題旁的出租率燈號：與標題文字對齊（以文字基線為準，再微調到視覺置中） */
html body .property-name-row { align-items: baseline; }
html body .property-name-row .property-occupancy-rate { position: relative; top: -2px; }
/* 統計卡金額：單行、不換行 */
.stat-card strong { white-space: nowrap; overflow: hidden; }

/* 帳務明細：欄位文字單行不換行、不因文字長度撐高列；房源/室欄位加寬一倍；編輯鈕與「系統・房租」標籤同高 */
:root { --pill-h: 24px; }
@media (max-width: 960px) { :root { --pill-h: 28px; } }
.ledger-table th, .ledger-table td { white-space: nowrap; }
.ledger-table th.col-loc, .ledger-table td.ledger-loc { width: 260px; min-width: 260px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.ledger-table td.ledger-loc.is-flippable { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.ledger-table td.ledger-loc.is-flippable:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 6px; }
html body .ledger-table .pill { height: var(--pill-h); min-height: var(--pill-h); display: inline-flex; align-items: center; }
html body .ledger-table td .compact-button { min-height: var(--pill-h) !important; height: var(--pill-h) !important; min-width: 0; padding: 0 14px; position: relative; font-size: 12px; }
html body .ledger-table td .compact-button::after { content: ""; position: absolute; inset: -10px -6px; }
.ledger-table .sort-head { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }

/* 設定頁可收合的卡片：標題列就是切換鈕，圖示與其他收合處相同 */
.fold-card > .card-header { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.fold-card > .card-header:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 12px; }
.fold-card > .card-header .fold-toggle { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line2); border-radius: 10px; background: var(--panel-soft, transparent); color: var(--muted); position: relative; }
.fold-card > .card-header .fold-toggle::after { content: ""; position: absolute; inset: -4px; }
.fold-card.is-folded > .card-body { display: none; }
.fold-card.is-folded > .card-header { margin-bottom: 0; border-bottom: 0; }
/* 登出按鈕：紅色文字 */
html body .logout-button, html body [data-logout].ghost-button { color: #ff6b78; }
html[data-mode="light"] body .logout-button, html[data-mode="light"] body [data-logout].ghost-button { color: #b0121e; }
html body .sidebar-logout { color: #ff6b78; }
html[data-mode="light"] body .sidebar-logout { color: #b0121e; }
/* 房源描述：分隔點跟在前一項後面，換行時不會有「·」孤零零出現在行首 */
@media (max-width: 640px) {
  .property-metrics > span + span::before { content: none; margin: 0; }
  .property-metrics > span:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--faint); }
}
/* 收起的設定卡：高度只有標題列，上下留白相同，不被同一列較高的卡片撐高 */
.fold-card { align-self: start; }
.fold-card.is-folded > .card-header { padding-bottom: 22px; }

/* ---------- 房東總覽：收入走勢卡片（漸層線圖、成長率、週月半年年全部）---------- */
.rent-slide.inc-slide { position: relative; display: flex; flex-direction: column; padding: 20px 20px 14px; border-radius: 28px; color: #ffffff; background: radial-gradient(120% 90% at 100% 0%, rgba(227, 6, 19, .20), transparent 62%), #0a0a0a; border: 1px solid #2a2a2d; overflow: hidden; cursor: default; }
:root[data-mode="dark"] .rent-slide.inc-slide, .dark .rent-slide.inc-slide { background: radial-gradient(120% 90% at 100% 0%, rgba(227, 6, 19, .22), transparent 62%), #161617; }
.inc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.inc-head > div { min-width: 0; }
.inc-head .rs-label { margin: 0; color: #c9c9ce; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc-sub { margin: 2px 0 0; color: #a0a0a5; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc-more { flex: none; min-height: 44px; min-width: 44px; padding: 0 14px; margin: -8px -8px 0 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .10); color: #ffffff; font-size: 13px; font-weight: 500; white-space: nowrap; }
.inc-more:hover { background: rgba(255, 255, 255, .18); }
.inc-fig { margin: 6px 0 10px !important; font-size: clamp(28px, 9vw, 38px) !important; line-height: 1.15 !important; font-weight: 700; white-space: nowrap; overflow: hidden; }
.inc-delta { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin: 0; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc-delta.is-up { background: rgba(63, 192, 122, .16); color: #7ee2a8; }
.inc-delta.is-down { background: rgba(229, 86, 111, .18); color: #ff9aa9; }
.inc-delta.is-flat { background: rgba(255, 255, 255, .10); color: #d4d4d8; }
.inc-chart { position: relative; margin: 14px -20px 4px; height: 112px; touch-action: pan-y; }
.inc-svg { display: block; width: 100%; height: 100%; }
.inc-read { position: absolute; top: 0; right: 20px; margin: 0; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #ffffff; font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none; }
.inc-read:empty { display: none; }
.inc-tabs { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 6px; }
.inc-tab { flex: 1 1 0; min-width: 44px; min-height: 44px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; color: #a0a0a5; font-size: 14px; font-weight: 500; transition: background 180ms cubic-bezier(0.23, 1, 0.32, 1), color 180ms cubic-bezier(0.23, 1, 0.32, 1); }
.inc-tab:hover { color: #ffffff; }
.inc-tab[aria-pressed="true"] { background: rgba(255, 255, 255, .16); color: #ffffff; }
.inc-slide .rs-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .10); }
@media (prefers-reduced-motion: reduce) { .inc-tab { transition: none; } }
/* 電腦版：收入卡片並排顯示（不滑動），一列放得下幾張就放幾張 */
@media (min-width: 641px) {
  .rent-carousel { display: block; margin-bottom: 16px; }
  .rent-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; overflow: visible; }
  .rent-slide.inc-slide { flex: none; }
  .rent-dots { display: none; }
}
.inc-slide .rs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inc-slide .rs-foot p { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 500; line-height: 20px; color: #ffffff; }
.inc-slide .rs-remind { flex: none; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: #f4f4f3; color: #0a0a0a; font-weight: 600; white-space: nowrap; }
/* 同一列的卡片高度不同時，多出來的高度交給線圖，不留空白 */
.inc-chart { flex: 1 1 112px; min-height: 112px; }

/* 房東測試帳號申請 */
.login-trial { display: grid; gap: 14px; }
.login-trial .primary-button { width: 100%; }
.signup-list { display: grid; gap: 0; }
.signup-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line2); }
.signup-row:last-child { border-bottom: 0; }
.signup-info { display: grid; gap: 2px; flex: 1; min-width: 180px; }
.signup-info .meta { overflow-wrap: anywhere; }
.signup-handled { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line2); }
.signup-handled > .meta { margin: 0 0 4px; }
.signup-row.is-done { padding: 8px 0; }
.temp-password-panel a.primary-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ---------- 管理員總覽（電腦版）：申請卡片橫向捲動、最活躍三欄、帳號狀態兩列橫向捲動 ---------- */
.signup-list { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.signup-item { flex: 0 0 280px; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-soft); min-width: 0; }
.signup-item .signup-info { display: grid; gap: 2px; min-width: 0; }
.signup-item .signup-info strong { font-size: 16px; }
.signup-item .signup-info .meta { overflow-wrap: anywhere; }
.signup-item .button-row { display: flex; gap: 8px; flex-wrap: wrap; }
.signup-item.is-done { opacity: .92; }
.signup-row, .signup-handled { display: none; }
.activity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .activity-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
html body .status-row-wrap { display: grid; grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px); gap: 10px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
html body .status-row-wrap > .status-chip { scroll-snap-align: start; min-width: 0; }

/* 側邊欄左上角：logo 旁直接寫權限名稱（跟著介面文字色：深色白字、淺色黑字），不再有 logo 下方的小字 */
@media (min-width: 641px) {
  .app-shell .sidebar .brand, .app-shell .sidebar .brand-button { flex-direction: row; align-items: center; gap: 10px; padding-bottom: 20px; }
  .app-shell .sidebar .brand .brand-role { display: inline-block; flex: none; margin: 0; letter-spacing: 0; font-size: 16px; font-weight: 700; line-height: 24px; white-space: nowrap; color: var(--ink); }
}

/* 設定頁（電腦版）：外觀與重點色左右並排，不再佔兩排 */
@media (min-width: 901px) {
  .theme-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; align-items: start; }
  .theme-card > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .theme-card > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .theme-card > :nth-child(3) { grid-column: 2; grid-row: 1; }
  .theme-card > :nth-child(4) { grid-column: 2; grid-row: 2; }
  .theme-card > :nth-child(3), .theme-card > :nth-child(4) { border-left: 1px solid var(--line); }
}