:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #243b4b;
  background: #f1f5f7;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f1f5f7; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.app { min-height: 100vh; padding: calc(14px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); }
.page-heading { padding: 4px 2px 12px; }
.page-heading h1 { margin: 0; color: #17384b; font-size: 23px; }
.filters { padding: 14px; background: #fff; border: 1px solid #e5ecef; border-radius: 14px; box-shadow: 0 6px 20px rgba(25,52,68,.06); }
.select-wrap { position: relative; margin-bottom: 12px; }
.select-wrap::after { position: absolute; top: 50%; right: 13px; width: 7px; height: 7px; content: ''; transform: translateY(-70%) rotate(45deg); border-right: 2px solid #82929c; border-bottom: 2px solid #82929c; pointer-events: none; }
.select-wrap select { width: 100%; height: 42px; padding: 0 36px 0 13px; appearance: none; color: #344f5f; background: #f5f8f9; border: 1px solid #dbe5e9; border-radius: 9px; outline: none; }
.search-line { display: flex; gap: 10px; }
.search-line input { min-width: 0; flex: 1; height: 42px; padding: 0 13px; color: #243b4b; background: #f5f8f9; border: 1px solid #dbe5e9; border-radius: 9px; outline: none; }
.search-line input:focus, .date-line input:focus, .select-wrap select:focus { border-color: #0aaf89; box-shadow: 0 0 0 3px rgba(10,175,137,.1); }
.primary-button { width: 76px; color: #fff; font-weight: 650; background: #0aaf89; border: 0; border-radius: 9px; }
.date-line { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 8px; align-items: center; margin-top: 12px; color: #81909b; font-size: 13px; }
.date-line input { min-width: 0; height: 38px; padding: 0 7px; color: #526675; background: #f5f8f9; border: 1px solid #e0e8eb; border-radius: 8px; outline: none; }
.result-heading { display: flex; align-items: baseline; justify-content: space-between; padding: 20px 4px 10px; }
.result-heading h2 { margin: 0; color: #17384b; font-size: 18px; }
.result-heading span { color: #8997a1; font-size: 13px; }
.record-list { display: grid; gap: 12px; }
.record-card { padding: 16px; background: #fff; border: 1px solid #e4ebee; border-radius: 14px; box-shadow: 0 5px 18px rgba(25,52,68,.06); }
.record-card:active { transform: scale(.995); background: #fbfdfd; }
.record-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #edf1f3; }
.beam-name { color: #17384b; font-size: 17px; font-weight: 700; }
.badge { padding: 4px 10px; color: #079f80; font-size: 12px; background: rgba(10,175,137,.1); border-radius: 12px; }
.badge.slurry { color: #267ec8; background: rgba(38,126,200,.1); }
.record-row { display: grid; grid-template-columns: 78px 1fr; gap: 8px; margin-top: 9px; font-size: 14px; line-height: 20px; }
.record-row span:first-child { color: #8a98a2; }
.record-row span:last-child { color: #405766; }
.detail-link { margin-top: 12px; color: #079f80; font-size: 13px; text-align: right; }
.status { padding: 80px 20px; color: #93a0a9; text-align: center; }
.status.hidden { display: none; }
.load-more { display: block; width: 100%; margin-top: 14px; padding: 12px; color: #55707f; background: #fff; border: 1px solid #dce5e9; border-radius: 10px; }
.hidden { display: none !important; }
.detail-mask { position: fixed; z-index: 100; inset: 0; display: flex; align-items: flex-end; background: rgba(10,29,42,.58); }
.detail-panel { width: 100%; max-height: 84vh; overflow: hidden; background: #f1f5f7; border-radius: 22px 22px 0 0; animation: rise .2s ease-out; }
.detail-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; background: #fff; border-bottom: 1px solid #e5ecef; }
.detail-header h2 { margin: 0; color: #17384b; font-size: 20px; }
.detail-header p { margin: 5px 0 0; color: #81909b; font-size: 13px; }
.close-button { width: 40px; height: 40px; color: #6f808c; font-size: 32px; line-height: 34px; background: #f3f6f7; border: 0; border-radius: 50%; }
.detail-content { max-height: calc(84vh - 80px); overflow-y: auto; padding: 12px 16px calc(22px + env(safe-area-inset-bottom)); }
.detail-card { margin-bottom: 12px; padding: 15px; background: #fff; border: 1px solid #e4ebee; border-radius: 14px; box-shadow: 0 4px 14px rgba(25,52,68,.05); }
.detail-card h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; color: #17384b; font-size: 16px; }
.hole-table-card { margin-bottom: 14px; overflow: hidden; background: #fff; border: 1px solid #e1e9ec; border-radius: 14px; box-shadow: 0 4px 14px rgba(25,52,68,.05); }
.hole-table-card h3 { margin: 0; padding: 13px 14px; color: #17384b; font-size: 16px; background: #f8fafb; border-bottom: 1px solid #e5ecef; }
.stretch-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; color: #3d5665; font-size: 13px; text-align: center; }
.stretch-table th, .stretch-table td { height: 46px; padding: 8px 6px; overflow-wrap: anywhere; border-right: 1px solid #e7edef; border-bottom: 1px solid #e7edef; }
.stretch-table thead th { color: #58707f; font-size: 12px; font-weight: 650; background: #f2f6f7; }
.stretch-table th:first-child { width: 42%; color: #536b79; font-weight: 600; background: #f8fafb; }
.stretch-table thead th:first-child { color: #58707f; background: #f2f6f7; }
.stretch-table .merged-value { color: #294555; font-weight: 650; background: #fbfdfd; }
.stretch-table tr:last-child th, .stretch-table tr:last-child td { border-bottom: 0; }
.stretch-table th:last-child, .stretch-table td:last-child { border-right: 0; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail-field { min-width: 0; }
.detail-field.full { grid-column: 1 / -1; }
.detail-field small { display: block; color: #8a98a2; font-size: 12px; }
.detail-field strong { display: block; margin-top: 4px; overflow-wrap: anywhere; color: #365060; font-size: 14px; }
.state { padding: 3px 8px; color: #d45e5e; font-size: 11px; background: rgba(212,94,94,.1); border-radius: 10px; }
.state.ok { color: #079f80; background: rgba(10,175,137,.1); }
.toast { position: fixed; z-index: 200; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); max-width: 80%; padding: 10px 16px; transform: translateX(-50%); color: #fff; font-size: 14px; text-align: center; background: rgba(18,35,47,.9); border-radius: 8px; }
@keyframes rise { from { transform: translateY(18px); opacity: .7; } }
@media (min-width: 760px) { .app { max-width: 760px; margin: 0 auto; } }