:root { color-scheme: light; --line: #d6e0cf; --muted: #607160; --green: #2f7b59; --soft: #e5f4eb; --link: #f0f6ec; }
* { box-sizing: border-box; }
body { margin: 0; color: #1f2c1f; background: linear-gradient(180deg, #f6fbef 0%, #f4f7ef 100%); font: 14px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif; letter-spacing: 0; min-height: 100vh; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ecc54c; outline-offset: 3px; }
button, input { font: inherit; }
button { cursor: pointer; border-radius: 4px; }
.admin-header { min-height: 68px; padding: 14px 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 24px; border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 30px; line-height: 1.35; font-weight: 700; color: #1f2c1f; }
.brand:hover { text-decoration: none; }
.brand img { flex: 0 0 32px; border-radius: 6px; }
.admin-header nav { display: flex; gap: 22px; font-weight: 600; }
nav a[aria-current] { color: #24332b; text-decoration: underline; text-underline-offset: 6px; }
.logout { margin-left: auto; }
.quiet-button { color: var(--green); border: 0; background: transparent; padding: 6px 0; font-weight: 650; white-space: nowrap; }
.shell { max-width: 1520px; margin: 0 auto; padding: 24px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.header-content { min-width: 0; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 10px; font-size: 13px; font-weight: 600; }
.main { min-width: 0; padding-bottom: 24px; }
.sub { color: var(--muted); font-size: 14px; margin-top: 6px; overflow-wrap: anywhere; }
.refresh-state { font-size: 12px; color: #a34c28; margin-left: 12px; }
h1 { font-size: 24px; line-height: 1.4; font-weight: 650; margin: 0; overflow-wrap: anywhere; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.status { font-size: 12px; color: var(--muted); white-space: nowrap; }
.stats { display: flex; flex-wrap: wrap; margin: 0 0 24px; padding: 14px 0 18px; border-bottom: 1px solid var(--line); gap: 18px 54px; }
.stats div { min-width: 115px; }
.stats dt { color: var(--muted); font-size: 12px; }
.stats dd { font-variant-numeric: tabular-nums; font-size: 27px; font-weight: 650; margin: 2px 0 0; overflow-wrap: anywhere; }
.search { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; max-width: 490px; }
input { border: 1px solid #bac8c0; border-radius: 4px; padding: 9px 11px; min-width: 0; color: #24332b; background: #fff; }
.search input { flex: 1; }
.primary-button { padding: 9px 20px; background: var(--green); color: #fff; border: 1px solid var(--green); white-space: nowrap; }
.primary-button:hover { background: #195c3b; }
.table-wrap { width: 100%; overflow-x: auto; border-top: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { border-bottom: 1px solid var(--line); padding: 12px 14px; vertical-align: top; }
th { background: #f4f7f5; font-size: 12px; color: #5a6a60; font-weight: 600; white-space: nowrap; }
td { min-width: 68px; overflow-wrap: anywhere; }
.date { white-space: nowrap; min-width: 146px; color: var(--muted); font-variant-numeric: tabular-nums; }
.number, .money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.money { text-align: right; }
.user-name { max-width: 200px; }
.table-action { white-space: nowrap; font-weight: 600; }
.income { color: #24734d; }
.expense { color: #b64c4c; }
.remark { min-width: 160px; max-width: 480px; white-space: pre-wrap; }
.empty { text-align: center; color: var(--muted); padding: 38px 16px; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 12px; color: var(--muted); margin-top: 20px; }
.pagination span { margin-right: auto; }
.back-link { font-size: 12px; display: inline-block; margin-bottom: 14px; }
.subheading { margin: -8px 0 16px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.tabs { display: flex; flex-wrap: wrap; gap: 24px; margin: 0 0 18px; font-weight: 600; }
.tabs a { padding: 4px 0; }
.login { width: 100%; max-width: 380px; margin: 54px auto 0; }
.login h1 { margin-bottom: 26px; }
.login label { display: block; margin: 18px 0 6px; color: #506057; }
.login input { width: 100%; }
.login button { width: 100%; margin-top: 26px; }
.error { color: #a03333; border-left: 3px solid #a03333; padding: 8px 12px; background: #fff5f5; }
.error-page { max-width: 640px; padding: 36px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.card, .panel { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 10px 28px rgba(43,72,33,.08); min-width: 0; }
.card { min-height: 135px; }
.label { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.value { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.4; overflow-wrap: anywhere; }
.value-line { display: block; line-height: 1.15; }
.value-line.subline { font-size: 24px; margin-top: 4px; }
.hint { color: var(--muted); font-size: 12px; margin-top: 8px; }
.top-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.panel-header h2 { font-size: 24px; line-height: 1.35; margin: 0; }
.heading-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.detail-link { padding: 5px 12px; border-radius: 999px; background: var(--link); font-size: 13px; white-space: nowrap; }
.switchbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.switch-link { padding: 6px 10px; border-radius: 999px; background: var(--link); color: var(--muted); white-space: nowrap; }
.switch-link.active { background: var(--soft); color: var(--green); font-weight: 700; }
.panel-scroll { height: 320px; overflow: auto; }
.devices-scroll { max-height: 930px; overflow: auto; }
.panel table { font-size: 14px; }
.panel th, .panel td { padding: 10px 8px; border-bottom-color: #e8efe2; }
.title-row th { color: var(--muted); font-weight: 700; background: #f9fbf7; position: sticky; top: 0; height: 50px; z-index: 2; font-size: 14px; }
.tag { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--soft); color: var(--green); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tag.offline { background: #f4ece7; color: #d26a32; }
.region-cell, .duration-cell { white-space: nowrap; }
.device-name { min-width: 110px; overflow-wrap: anywhere; }
.account-cell { min-width: 95px; }
.account-cell small { display: block; color: var(--muted); font-size: 12px; }
.devices-table { min-width: 1220px; }
.panel .date { min-width: 165px; }
.detail-panel { margin-top: 4px; }
.main > .table-wrap { background: white; border: 1px solid var(--line); border-radius: 8px; }
.login { padding: 26px; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 28px rgba(43,72,33,.08); }
@media (max-width: 1180px) {
  .top-panels { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .admin-header { padding: 12px 18px; gap: 12px 18px; }
  .admin-header nav { order: 3; width: 100%; gap: 20px; font-size: 13px; }
  .shell { padding: 18px; }
  .topbar { align-items: flex-start; gap: 12px; }
  .brand { font-size: 20px; gap: 8px; }
  .brand img { width: 28px; height: 28px; flex-basis: 28px; }
  .logout { margin-left: auto; }
  .quiet-button { padding: 5px 8px; font-size: 12px; }
  .main { padding: 0 0 24px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card, .panel { padding: 14px; }
  .card { min-height: 125px; }
  .value { font-size: 28px; }
  .value-line.subline { font-size: 21px; }
  .panel-header h2 { font-size: 22px; }
  .panel-scroll td { min-width: 0; }
  .panel-scroll { height: 320px; }
  .sub { font-size: 12px; }
  h1 { font-size: 21px; }
  .page-heading { align-items: flex-start; gap: 12px; }
  .stats { gap: 14px 24px; }
  .stats div { min-width: 90px; }
  .stats dd { font-size: 24px; }
  th, td { padding: 10px 12px; }
  .login { margin-top: 30px; }
}