:root {
  --blue: #2f80c9;
  --blue-dark: #246aa9;
  --blue-pale: #eef6fd;
  --text: #333;
  --muted: #777;
  --line: #e5e5e5;
  --page: #f4f4f4;
  --white: #fff;
}

* { box-sizing: border-box; }
html { background: #ececec; -webkit-font-smoothing: antialiased; }
body { margin: 0; color: var(--text); background: #ececec; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input { font: inherit; }
button { color: inherit; }
.mobile-shell { width: min(100%, 680px); min-height: 100vh; margin: 0 auto; background: var(--page); box-shadow: 0 0 28px rgba(0,0,0,.08); }
.app-header { position: sticky; top: 0; z-index: 20; height: 54px; padding-top: env(safe-area-inset-top); display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; color: #fff; background: var(--blue); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.app-header h1 { grid-column: 2; margin: 0; font-size: 18px; text-align: center; font-weight: 600; }
.app-header button { height: 100%; border: 0; color: #fff; background: transparent; cursor: pointer; }
.header-back { font-size: 34px; font-weight: 300; }
.header-info { grid-column: 3; font-size: 13px; }
.notice-bar { padding: 11px 15px; border-bottom: 1px solid #d7e9f8; color: #34698f; background: var(--blue-pale); font-size: 12px; line-height: 1.55; }
.service-list { margin-top: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.service-row { width: 100%; min-height: 68px; padding: 10px 13px; display: grid; grid-template-columns: 43px 1fr auto 14px; gap: 11px; align-items: center; border: 0; border-bottom: 1px solid var(--line); background: #fff; text-align: left; cursor: pointer; }
.service-row:last-child { border-bottom: 0; }
.service-row:active { background: #f6f6f6; }
.service-row.pending { color: #555; }
.service-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 6px; color: #fff; background: var(--blue); font-size: 16px; font-weight: 700; }
.service-row.pending .service-icon { background: #9aa9b5; }
.service-copy strong, .service-copy small { display: block; }
.service-copy strong { font-size: 15px; font-weight: 500; }
.service-copy small { margin-top: 5px; color: #999; font-size: 11px; }
.service-tag { padding: 3px 7px; border-radius: 3px; color: var(--blue-dark); background: #e9f3fb; font-size: 10px; white-space: nowrap; }
.service-row.pending .service-tag { color: #888; background: #eee; }
.service-row > b { color: #bbb; font-size: 23px; font-weight: 300; }
.data-state { margin: 12px 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; overflow: hidden; }
.data-state h2 { margin: 0; padding: 11px 13px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.data-state h2 { display: flex; align-items: center; justify-content: space-between; }
.all-live { color: #1d8a52; font-size: 11px; font-weight: 600; }
.data-state > div { padding: 10px 13px; display: flex; justify-content: space-between; border-bottom: 1px solid #eee; font-size: 13px; }
.data-state strong { color: var(--blue); }
.data-state p { margin: 0; padding: 10px 13px; color: #888; font-size: 11px; line-height: 1.55; }
.query-panel { margin: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.query-panel h2 { margin: 0 0 5px; color: #333; font-size: 18px; font-weight: 600; }
.query-panel > p { margin: 0 0 15px; color: #888; font-size: 11px; line-height: 1.5; }
.official-action { margin: -4px 0 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.official-action a { padding: 7px 9px; border: 1px solid #b8d9f3; border-radius: 3px; color: var(--blue-dark); background: var(--blue-pale); font-size: 11px; font-weight: 600; text-decoration: none; }
.query-panel label { display: grid; grid-template-columns: 92px 1fr; align-items: center; margin-bottom: 11px; font-size: 13px; }
.query-panel input { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #d5d5d5; border-radius: 3px; outline: 0; background: #fff; }
.query-panel input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(47,128,201,.12); }
.search-button { width: 100%; height: 42px; border: 0; border-radius: 3px; color: #fff; background: var(--blue); cursor: pointer; }
.search-button:active { background: var(--blue-dark); }
.result-summary { padding: 2px 14px 9px; color: #777; font-size: 12px; }
.result-summary strong { color: var(--blue); }
.result-list { margin: 0 10px; display: grid; gap: 9px; }
.result-card { padding: 13px 14px; border: 1px solid #ddd; border-radius: 4px; background: #fff; cursor: pointer; }
.result-card:active { background: #fafafa; }
.result-card h3 { margin: 0 0 9px; color: #276da9; font-size: 16px; font-weight: 600; }
.result-card dl { margin: 0; display: grid; gap: 5px; }
.result-card dl div { display: grid; grid-template-columns: 78px 1fr; gap: 7px; font-size: 12px; line-height: 1.5; }
.result-card dt { color: #999; }
.result-card dd { margin: 0; color: #555; overflow-wrap: anywhere; }
.result-card footer { margin-top: 9px; padding-top: 8px; display: flex; justify-content: space-between; border-top: 1px dashed #e5e5e5; color: #999; font-size: 10px; }
.empty-box { padding: 45px 15px; border: 1px dashed #ccc; border-radius: 4px; color: #999; background: #fafafa; text-align: center; font-size: 13px; }
.empty-box.loading { animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.load-more { width: calc(100% - 20px); height: 42px; margin: 12px 10px; border: 1px solid var(--blue); border-radius: 3px; color: var(--blue); background: #fff; cursor: pointer; }
footer { padding: 26px 16px calc(26px + env(safe-area-inset-bottom)); color: #999; text-align: center; font-size: 10px; line-height: 1.6; }
footer p { margin: 3px 0; }
.overlay { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.4); }
dialog { z-index: 31; width: min(620px, calc(100% - 20px)); max-height: 84vh; margin: auto auto 0; padding: 22px 17px calc(24px + env(safe-area-inset-bottom)); border: 0; border-radius: 8px 8px 0 0; color: var(--text); box-shadow: 0 -8px 35px rgba(0,0,0,.18); }
dialog::backdrop { background: transparent; }
.dialog-close { position: absolute; right: 12px; top: 9px; width: 34px; height: 34px; border: 0; color: #777; background: #f1f1f1; border-radius: 50%; font-size: 24px; cursor: pointer; }
dialog h2 { margin: 0 45px 16px 0; font-size: 19px; }
dialog p, dialog li { color: #666; font-size: 12px; line-height: 1.7; }
.detail-table { margin-top: 14px; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
.detail-table div { display: grid; grid-template-columns: 100px 1fr; border-bottom: 1px solid #e8e8e8; }
.detail-table div:last-child { border-bottom: 0; }
.detail-table dt, .detail-table dd { margin: 0; padding: 10px; font-size: 12px; line-height: 1.55; }
.detail-table dt { color: #777; background: #f6f6f6; }
.detail-table dd { overflow-wrap: anywhere; }
.source-link { margin-top: 13px; padding: 11px; border-left: 3px solid var(--blue); background: var(--blue-pale); color: #666; font-size: 11px; line-height: 1.6; }
.source-link a { color: var(--blue-dark); font-weight: 600; text-decoration: none; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 24px; transform: translate(-50%, 15px); padding: 10px 15px; border-radius: 4px; color: #fff; background: rgba(0,0,0,.78); font-size: 12px; opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 700px) {
  body { padding: 22px 0; }
  .mobile-shell { min-height: calc(100vh - 44px); border-radius: 6px; overflow: hidden; }
  dialog { margin: auto; border-radius: 8px; }
}

@media (max-width: 390px) {
  .service-row { grid-template-columns: 40px 1fr 14px; }
  .service-tag { display: none; }
  .query-panel label { grid-template-columns: 1fr; gap: 6px; }
}