:root {
  color-scheme: light;
  --nav: #193b37;
  --nav-light: #c9e0d8;
  --ink: #142b27;
  --muted: #4c625d;
  --page: #edf2ee;
  --panel: #fff;
  --tint: #f2f7f3;
  --line: #d5e0d9;
  --strong-line: #a4b8ae;
  --accent: #125b4c;
  --accent-hover: #0b4a3d;
  --focus: #a45a25;
  --warn: #794714;
  --warn-bg: #f9eddb;
  --error: #902f29;
  --error-bg: #fff1ec;
  --radius: 0.7rem;
  --gap: 1rem;
  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --title-font: "Songti SC", "Noto Serif CJK SC", SimSun, var(--body-font);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  min-width: 300px;
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 1rem/1.6 var(--body-font);
}
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.62; }
img { display: block; max-width: 100%; }
form { margin: 0; }
h1, h2, h3, p { margin: 0; }
h1 { font: 700 clamp(1.9rem, 4vw, 2.8rem)/1.18 var(--title-font); }
h2 { font-size: 1.26rem; line-height: 1.35; }
h3 { font-size: 1.05rem; line-height: 1.45; }
p + p { margin-top: 0.45rem; }
[hidden] { display: none !important; }

.shell { width: min(100% - 2rem, 76rem); margin-inline: auto; }
.masthead { background: var(--nav); color: white; }
.masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 4.1rem; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.65rem; color: white; font-size: 1.15rem; font-weight: 750; text-decoration: none; }
.brand:hover { color: white; }
.brand-stamp {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid #c2ddd2;
  border-radius: 0.3rem;
  background: #2b4e47;
  color: #f6fcf7;
  font: 700 1.27rem/1 var(--title-font);
}
.brand-sub { margin-left: 0.55rem; color: var(--nav-light); font-size: 0.81rem; font-weight: 500; }
.session { display: flex; align-items: center; gap: 0.7rem; font-size: 0.88rem; }
.session a, .session .button-quiet { color: var(--nav-light); }
.session a[aria-current], .session a:hover, .session .button-quiet:hover { color: white; }
.session-name { font-weight: 600; }
.app-nav { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: thin; }
.app-nav a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 2.65rem;
  padding: 0.3rem 0.65rem;
  border-bottom: 3px solid transparent;
  color: var(--nav-light);
  font-size: 0.91rem;
  text-decoration: none;
}
.app-nav a:hover { color: white; }
.app-nav a[aria-current] { border-color: #d5e3b4; color: white; font-weight: 700; }
.app-nav a:focus-visible { outline-offset: -3px; }
.skip-link { position: fixed; z-index: 5; top: 0.5rem; left: 0.5rem; padding: 0.65rem 1rem; clip-path: inset(50%); background: white; }
.skip-link:focus { clip-path: none; }
.main { min-height: 65vh; padding-block: clamp(1.5rem, 4vw, 3rem) 3.2rem; }
.main-guest { min-height: 70vh; display: grid; align-content: start; justify-items: center; }

.page-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.45rem; }
.page-head h1 { margin-top: 0.2rem; }
.page-head p { margin-top: 0.6rem; color: var(--muted); }
.page-head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.eyebrow { color: var(--accent); font-size: 0.82rem; font-weight: 750; letter-spacing: 0.08em; }
.muted { color: var(--muted); }
.small, .hint { font-size: 0.88rem; }
.hint { display: block; color: var(--muted); font-weight: 400; }
.nowrap, .money { white-space: nowrap; }
.money, .number { font-variant-numeric: tabular-nums; }
.money { text-align: right; }
.empty { padding: 1.1rem 0; color: var(--muted); }
.stack > * + * { margin-top: var(--gap); }
.inline-list { display: flex; flex-wrap: wrap; gap: 0.4rem 0.55rem; margin: 0; padding: 0; list-style: none; }

.panel { padding: clamp(0.85rem, 2.5vw, 1.4rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.panel h2 + p, .panel h3 + p { margin-top: 0.45rem; }
.panel-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 0.85rem; }
.section-block + .section-block { margin-top: 1.25rem; }
.section-block > h2 { margin-bottom: 0.6rem; }
.two-columns { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.action-grid, .stats-grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.action-link { display: flex; flex-direction: column; gap: 0.32rem; color: inherit; text-decoration: none; }
.action-link:hover { border-color: var(--accent); color: var(--accent); }
.action-link strong { font-size: 1.05rem; }
.stat { padding: 0.85rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--tint); min-width: 0; }
.stat-label { color: var(--muted); font-size: 0.85rem; }
.stat-value { display: block; margin-top: 0.18rem; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 750; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.meta-grid { display: grid; gap: 0.9rem 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); margin: 0; }
.meta-grid dt { color: var(--muted); font-size: 0.85rem; }
.meta-grid dd { margin: 0.1rem 0 0; overflow-wrap: anywhere; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.38rem 0.83rem;
  border: 1px solid var(--strong-line);
  border-radius: 0.4rem;
  background: var(--panel);
  color: var(--accent);
  font-weight: 650;
  text-decoration: none;
}
.button:hover { border-color: var(--accent); background: var(--tint); }
.button-primary { border-color: var(--accent); background: var(--accent); color: white; }
.button-primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: white; }
.button-quiet { min-height: 2rem; padding: 0.23rem 0.38rem; border-color: transparent; background: transparent; }
.button-quiet:hover { border-color: transparent; background: transparent; text-decoration: underline; }
.button-danger { color: var(--error); }
.button-danger:hover { border-color: var(--error); background: var(--error-bg); color: var(--error); }
.form-stack { display: grid; gap: 0.95rem; }
.form-stack > .button { justify-self: start; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0.9rem 1rem; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-weight: 650; }
label > input:not([type="checkbox"]):not([type="radio"]), label > select, label > textarea { margin-top: 0.3rem; }
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  min-height: 2.68rem;
  border: 1px solid var(--strong-line);
  border-radius: 0.38rem;
  padding: 0.42rem 0.57rem;
  background: white;
  color: var(--ink);
}
textarea { min-height: 5.2rem; resize: vertical; }
select[multiple] { min-height: 8.5rem; }
input[type="checkbox"], input[type="radio"] { width: 1.13rem; height: 1.13rem; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: 0.45rem 0.75rem; }
.check-list { display: grid; gap: 0.4rem; max-height: 17rem; overflow: auto; padding: 0.18rem; }
.check-item { display: flex; align-items: center; gap: 0.45rem; min-height: 2.35rem; padding: 0.25rem; font-weight: 500; }
fieldset { min-width: 0; margin: 0; padding: 0.6rem 0.8rem 0.85rem; border: 1px solid var(--line); border-radius: 0.4rem; }
legend { padding: 0 0.27rem; font-weight: 700; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.filter-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.7rem), 1fr)); align-items: end; gap: 0.7rem; }
.filter-bar .button { justify-self: start; }
.login-card { width: min(100%, 28rem); margin-block: clamp(0.3rem, 4vh, 2rem); padding: clamp(1rem, 4vw, 1.8rem); }
.login-card h1 { margin-top: 0.35rem; }
.login-card p { margin-top: 0.5rem; }
.login-card form { margin-top: 1.35rem; }

.notices { display: grid; gap: 0.45rem; width: 100%; margin-bottom: 0.9rem; }
.notice { padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 0.4rem; background: var(--tint); }
.notice-error, .notice-danger { border-left-color: var(--error); background: var(--error-bg); color: var(--error); }
.notice-warning { border-left-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.badge { display: inline-flex; align-items: center; padding: 0.1rem 0.47rem; border-radius: 0.3rem; background: var(--tint); color: var(--accent); font-size: 0.83rem; font-weight: 700; white-space: nowrap; }
.badge-pending { background: var(--warn-bg); color: var(--warn); }
.badge-muted { background: #eef0ef; color: var(--muted); }
.table-scroll { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.93rem; }
table.wide { min-width: 39rem; }
th, td { padding: 0.61rem 0.68rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--tint); color: var(--muted); font-size: 0.86rem; font-weight: 750; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:focus-within, tbody tr:hover { background: #fafcf9; }
td a { font-weight: 600; }
hr { width: 100%; margin: 1rem 0; border: 0; border-top: 1px solid var(--line); }

@media (max-width: 43rem) {
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head-actions { align-self: flex-start; }
  .two-columns { grid-template-columns: 1fr; }
}
@media (max-width: 31rem) {
  .shell { width: calc(100% - 1.1rem); }
  .brand { font-size: 1rem; }
  .brand-sub { margin-left: 0.35rem; font-size: 0.75rem; }
  .brand-stamp { width: 1.85rem; height: 1.85rem; font-size: 1.12rem; }
  .session { gap: 0.38rem; font-size: 0.78rem; }
  .masthead-inner { min-height: 3.4rem; }
  .form-grid { grid-template-columns: 1fr; }
  .app-nav a { padding-inline: 0.48rem; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.space-top { margin-top: var(--gap); }
.date-presets { display: flex; flex-wrap: wrap; gap: 0.25rem 0.45rem; }
.date-presets .button { font-size: 0.86rem; }
.share-list { display: grid; gap: 0.3rem; min-width: 10rem; padding: 0; margin: 0; list-style: none; }
.share-list li { display: flex; justify-content: space-between; gap: 0.5rem; }
.archive-menu summary { width: fit-content; cursor: pointer; color: var(--error); font-weight: 650; }
.button-selected { border-color: var(--accent); background: var(--tint); }
.record-list { display: grid; gap: 0.55rem; }
.record { min-width: 0; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 0.45rem; }
.record summary { cursor: pointer; font-weight: 650; }
.record summary .badge { margin-left: 0.3rem; }
.space-bottom { margin-bottom: var(--gap); }
.narrow-form { max-width: 28rem; }
.masthead { --focus: #f5cd9f; }
@media (max-width: 31rem) {
  .session { flex-wrap: wrap; justify-content: flex-end; }
  .app-nav { flex-wrap: wrap; }
}