@font-face {
  font-family: "UD新ゴNT Pr6";
  src: url("./fonts/A-OTF-UDShinGoNTPr6-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "UD新ゴNT Pr6";
  src: url("./fonts/A-OTF-UDShinGoNTPr6-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "UD新ゴNT Pr6";
  src: url("./fonts/A-OTF-UDShinGoNTPr6-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "UD新ゴNT Pr6";
  src: url("./fonts/A-OTF-UDShinGoNTPr6-Heavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
:root {
  color: #1c2c25;
  background: #f7f9fb;
  font-family: "UD新ゴNT Pr6", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 15px;
}
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; background: #f7f9fb; }
.login-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #f7f9fb; }
.login-card { width: min(360px, calc(100vw - 32px)); padding: 28px; border: 1px solid #d7e3da; border-radius: 10px; background: #fff; box-shadow: 0 12px 32px rgba(28, 60, 39, .12); }
.login-card h1 { margin: 0 0 22px; font-size: 21px; }
.login-card label { display: block; margin-bottom: 7px; font-weight: 700; }
.login-card input { width: 100%; margin-bottom: 10px; padding: 9px; border: 1px solid #bccbc0; border-radius: 6px; }
.login-error { min-height: 1.4em; margin: 0 0 10px; color: #b72f37; font-size: 13px; }
.portal-body { min-height: 100vh; overflow: auto; }
.portal-header { padding: 30px clamp(20px, 6vw, 88px); background: linear-gradient(105deg, #72f58a, #9af4a9); border-bottom: 1px solid #56d56e; }
.portal-header h1 { margin: 0; font-size: clamp(28px, 4vw, 42px); font-weight: 800; }
.portal-header p { margin: 8px 0 0; color: #34513b; font-weight: 600; }
.portal-main { width: min(1080px, calc(100% - 40px)); margin: 44px auto; }
.portal-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.portal-card { display: flex; min-height: 190px; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; border: 1px solid #d7e3da; border-radius: 10px; background: #fff; box-shadow: 0 5px 18px rgba(28, 60, 39, .08); color: inherit; text-decoration: none; }
a.portal-card:hover, a.portal-card:focus-visible { border-color: #56b56a; box-shadow: 0 8px 24px rgba(28, 90, 48, .15); outline: 0; }
.portal-card-title { font-size: 22px; font-weight: 800; }
.portal-card-description { color: #5f7065; line-height: 1.6; }
.portal-card-action { margin-top: auto; color: #197237; font-weight: 700; }
.portal-card-disabled { background: #f3f5f4; color: #728078; }
.portal-card-disabled .portal-card-action { color: #728078; }
button, input { font: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.app-header {
  height: 88px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 10px 28px; background: linear-gradient(105deg, #72f58a, #9af4a9);
  border-bottom: 1px solid #56d56e;
}
.brand h1 { margin: 0; font-size: clamp(26px, 2vw, 35px); line-height: 1.05; letter-spacing: .02em; font-weight: 800; }
.brand p { margin: 5px 0 0; font-size: 14px; font-weight: 600; color: #34513b; }
.header-summary { display: flex; height: 100%; align-items: stretch; }
.summary-item { display: flex; flex-direction: column; justify-content: center; min-width: 108px; padding: 0 18px; border-left: 1px solid rgba(28, 72, 39, .23); }
.summary-item span { font-size: 12px; color: #315239; }
.summary-item strong { margin-top: 2px; font-size: 17px; font-variant-numeric: tabular-nums; }
.websocket-summary strong { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.home-button, .settings-button, .detail-nav button, .clear-button, .detail-actions button, .dialog-heading button, #disconnect-button {
  border: 1px solid #b8c5bb; border-radius: 6px; background: #fff; color: #263c2d; padding: 7px 12px;
}
.home-button { align-self: center; margin-left: 12px; border-color: #5ca969; color: #263c2d; font-weight: 700; text-decoration: none; white-space: nowrap; }
.settings-button { align-self: center; margin-left: 16px; border-color: #5ca969; background: #ecfff0; font-weight: 700; }
.dashboard { height: calc(100vh - 88px); display: grid; grid-template-columns: minmax(320px, .8fr) minmax(560px, 1.5fr) 8px minmax(520px, 1.3fr); }
.panel { min-width: 0; overflow-y: auto; border-right: 1px solid #dbe3df; }
.system-panel { padding: 20px; background: #f3fff5; }
.list-panel { display: flex; min-height: 0; flex-direction: column; overflow: hidden; padding: 20px; background: #fff; }
.detail-panel { display: flex; min-height: 0; flex-direction: column; overflow: hidden; padding: 20px; border-right: 0; background: #fbfcfd; }
.column-resizer { grid-column: 3; width: 8px; cursor: col-resize; background: #e7eeea; border-left: 1px solid #dbe3df; border-right: 1px solid #dbe3df; }
.column-resizer:hover, .column-resizer:focus { background: #b9d6c1; outline: 0; }
h2 { margin: 0; font-size: 18px; }
.time-section { padding-bottom: 20px; }
.time-section h2, .system-section h2 { color: #476053; font-size: 13px; font-weight: 700; }
.clock-date { margin: 8px 0 0; font-size: 17px; font-variant-numeric: tabular-nums; }
.clock-time { display: block; margin-top: 1px; font-size: clamp(34px, 3vw, 48px); font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock-time small { font-size: 12px; letter-spacing: 0; }
.utc-section { padding-top: 19px; border-top: 1px solid #cfe0d3; }
.system-section { margin-top: 8px; padding-top: 20px; border-top: 1px solid #cfe0d3; }
.system-statuses { margin: 12px 0 8px; }
.system-statuses div { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.system-statuses dt { color: #53675b; font-size: 13px; }
.system-statuses dd { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; font-weight: 700; }
.status-dot { width: 9px; height: 9px; display: inline-block; border-radius: 50%; background: #a0a9a3; box-shadow: 0 0 0 2px rgba(160,169,163,.16); }
.status-dot.is-ok { background: #18a84a; box-shadow: 0 0 0 2px rgba(24,168,74,.16); }
.status-dot.is-connecting { background: #e2a11d; box-shadow: 0 0 0 2px rgba(226,161,29,.16); }
.status-dot.is-error { background: #d33d42; box-shadow: 0 0 0 2px rgba(211,61,66,.16); }
.uptime { margin: 5px 0; font-size: 12px; color: #627367; font-variant-numeric: tabular-nums; }
.error { min-height: 1.4em; margin: 10px 0 0; color: #b72f37; font-size: 12px; }
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.stats-grid article { min-height: 84px; padding: 12px; border: 1px solid #d4e3d7; border-radius: 8px; background: #fff; }
.stats-grid span { display: block; color: #617266; font-size: 12px; }
.stats-grid strong { display: block; margin-top: 9px; font-size: 17px; font-variant-numeric: tabular-nums; }
.clear-button { width: 100%; margin-top: 18px; }
.panel-heading, .detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.search-box input { width: min(280px, 32vw); padding: 8px 10px; border: 1px solid #cbd5d0; border-radius: 6px; background: #fff; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; padding-bottom: 14px; border-bottom: 1px solid #e1e7e4; }
.filter-button { border: 1px solid #d3ddd7; border-radius: 999px; padding: 5px 10px; background: #fff; color: #526258; font-size: 12px; }
.filter-button.is-active { border-color: #238344; background: #e3f9e8; color: #155c2d; font-weight: 700; }
.message-list { min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; padding: 0 4px 18px 0; }
.list-panel > .panel-heading, .list-panel > .filter-bar, .list-panel > .message-pagination { flex: 0 0 auto; }
.empty-state { color: #718077; font-size: 14px; line-height: 1.6; }
.telegram-card { width: 100%; min-height: 70px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 0 0 8px; padding: 10px 12px; text-align: left; border: 1px solid #e1e4e3; border-left: 5px solid #a9b6af; border-radius: 8px; background: #fff; }
.telegram-card:hover { border-color: #83ad8d; }
.telegram-card.is-selected { border: 2px solid #16833b; border-left-width: 5px; padding: 9px 11px; }
.card-main { min-width: 0; }
.category-label { display: inline-block; margin-right: 7px; padding: 2px 6px; border-radius: 4px; background: rgba(35,50,42,.1); color: #3c4e44; font-size: 11px; font-weight: 700; }
.card-title { font-size: 14px; font-weight: 700; }
.card-headline { overflow: hidden; margin: 5px 0 0; color: #627067; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.card-time { align-self: start; color: #526258; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.card-age { display: block; margin-top: 7px; color: #87938b; font-size: 11px; }
.detail-nav { display: flex; gap: 6px; }
.detail-nav button { padding: 5px 8px; font-size: 12px; }
.detail-content { min-height: 0; flex: 1 1 auto; overflow-y: auto; margin-top: 20px; padding: 0 8px 20px; }
.detail-content > .empty-state { margin: 0; padding: 14px 8px; }
.detail-panel > .detail-heading, .detail-panel > .detail-actions { flex: 0 0 auto; }
.detail-category { margin: 0 0 8px; }
.detail-title { margin: 0; font-size: 22px; line-height: 1.45; }
.detail-headline { margin: 10px 0 18px; color: #4f6056; line-height: 1.7; }
.metadata { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 13px; }
.metadata th, .metadata td { padding: 8px; border: 1px solid #dfe6e2; text-align: left; vertical-align: top; }
.metadata th { width: 35%; background: #f1f6f3; color: #53655a; font-weight: 600; }
.metadata td { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.tabs { display: flex; border-bottom: 1px solid #d4ddd8; }
.tab-button { border: 0; border-bottom: 3px solid transparent; padding: 9px 12px; background: none; color: #5e6b63; }
.tab-button.is-active { border-bottom-color: #16833b; color: #175e2c; font-weight: 700; }
.tab-panel { min-height: 220px; margin: 14px 0 0; padding: 12px; overflow: auto; border: 1px solid #e0e6e3; border-radius: 6px; background: #fff; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.tab-panel.xml-panel { max-height: 48vh; overflow: auto; white-space: pre; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.5; tab-size: 2; }
.detail-actions { margin-top: 14px; text-align: right; }
.detail-actions button:disabled, .detail-nav button:disabled, #disconnect-button:disabled { cursor: default; opacity: .45; }
dialog { width: min(640px, calc(100vw - 36px)); border: 1px solid #bac9bd; border-radius: 10px; box-shadow: 0 16px 50px rgba(22,47,31,.25); }
dialog::backdrop { background: rgba(21,35,28,.32); }
dialog form { padding: 4px; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
dialog label[for="api-key"] { display: block; margin-bottom: 7px; font-weight: 700; }
#api-key { width: 100%; padding: 9px; border: 1px solid #bbc9be; border-radius: 6px; }
.dialog-note { color: #627268; font-size: 12px; }
fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 18px 0; border: 1px solid #d7e1da; border-radius: 6px; }
legend { padding: 0 5px; font-weight: 700; }
fieldset label { font-size: 13px; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }
.primary-button { border: 1px solid #147133; border-radius: 6px; padding: 7px 13px; background: #208341; color: #fff; font-weight: 700; }
@media (max-width: 1350px) {
  .dashboard { grid-template-columns: minmax(280px, .85fr) minmax(450px, 1.4fr) 8px minmax(410px, 1.15fr); }
  .app-header { padding-left: 16px; padding-right: 16px; }
  .summary-item { min-width: auto; padding: 0 10px; }
}
@media (max-width: 1080px) {
  body { overflow-x: hidden; overflow-y: auto; }
  .app-header { height: auto; align-items: flex-start; }
  .header-summary { flex-wrap: wrap; justify-content: flex-end; }
  .dashboard { height: auto; min-height: calc(100vh - 88px); grid-template-columns: 1fr 1.5fr; }
  .column-resizer { display: none; }
  .detail-panel { grid-column: 1 / -1; min-height: 500px; border-top: 1px solid #dbe3df; overflow: hidden; }
  .panel { overflow: visible; }
  .list-panel { min-height: 65vh; overflow: hidden; }
}
@media (max-width: 760px) {
  .app-header { display: block; padding: 12px; }
  .brand h1 { font-size: 23px; }
  .header-summary { margin-top: 12px; justify-content: flex-start; }
  .summary-item { padding: 5px 8px; }
  .dashboard { display: grid; grid-template-columns: 1fr; height: auto; }
  .system-panel, .list-panel, .detail-panel { grid-column: 1; }
  .list-panel { min-height: 65vh; }
  .detail-panel { min-height: 70vh; overflow: hidden; }
  .panel-heading, .detail-heading { align-items: flex-start; flex-direction: column; }
  .search-box { width: 100%; }
  .detail-nav { width: 100%; justify-content: space-between; }
}

/* 外部ライブラリに依存しないインラインSVGアイコン */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon-brand { width: 26px; height: 26px; }
.brand h1, h2, .summary-item span, .time-section h2, .system-section h2, .system-statuses dt, .stats-grid span { display: inline-flex; align-items: center; gap: 7px; }
.settings-button, .detail-nav button, .clear-button, .detail-actions button, .dialog-heading button, #disconnect-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.search-box { display: inline-flex; align-items: center; gap: 7px; width: min(280px, 32vw); padding: 0 10px; border: 1px solid #cbd5d0; border-radius: 6px; background: #fff; color: #617168; }
.search-box input { width: 100%; padding: 8px 0; border: 0; outline: 0; background: transparent; }
.filter-button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 11px; }
.filter-warning { border-color: #e2a0a7; color: #912832; }

/* DMDATAのclassificationごとの淡色カードとラベル */
.telegram-card[data-classification="eew.forecast"] { background: #fff9e8; border-left-color: #d2ad37; }
.telegram-card[data-classification="eew.warning"] { background: #fff0f0; border-left-color: #d65660; }
.telegram-card[data-classification="telegram.earthquake"] { background: #fff6df; border-left-color: #c98f35; }
.telegram-card[data-classification="telegram.volcano"] { background: #f9f0ff; border-left-color: #9a6fc0; }
.telegram-card[data-classification="telegram.weather"] { background: #edf8ff; border-left-color: #5c9fd0; }
.telegram-card[data-classification="telegram.forecast"] { background: #eefbf4; border-left-color: #4fa67a; }
.telegram-card[data-classification="eew.forecast"] .category-label { background: #f7e7a8; color: #795c00; }
.telegram-card[data-classification="eew.warning"] .category-label { background: #f8cfd2; color: #8c1f2b; }
.telegram-card[data-classification="telegram.earthquake"] .category-label { background: #f2d9a3; color: #775016; }
.telegram-card[data-classification="telegram.volcano"] .category-label { background: #ead9f6; color: #603b80; }
.telegram-card[data-classification="telegram.weather"] .category-label { background: #d7ecfa; color: #24618c; }
.telegram-card[data-classification="telegram.forecast"] .category-label { background: #d9f0e2; color: #216543; }

/* 添付イメージを基準にした、フラットで情報密度の高い電文カード */
.telegram-card { grid-template-columns: minmax(0, 1fr) auto; border-left-width: 0; border-radius: 7px; box-shadow: none; }
.telegram-card.is-selected { border: 2px solid #d92c85; padding: 8px 10px; }
.card-main { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.category-label { grid-row: 1 / span 2; align-self: center; margin: 0; padding: 7px 7px; text-align: center; white-space: nowrap; }
.card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-headline { grid-column: 2; margin: 2px 0 0; }

/* OS標準の太いスクロールバーを避けた、控えめなスクロール表示 */
.panel, .message-list, .tab-panel {
  scrollbar-width: thin;
  scrollbar-color: #a5c4b0 transparent;
}
.panel::-webkit-scrollbar, .message-list::-webkit-scrollbar, .tab-panel::-webkit-scrollbar { width: 10px; height: 10px; }
.panel::-webkit-scrollbar-track, .message-list::-webkit-scrollbar-track, .tab-panel::-webkit-scrollbar-track { background: transparent; }
.panel::-webkit-scrollbar-thumb, .message-list::-webkit-scrollbar-thumb, .tab-panel::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: #a5c4b0; background-clip: padding-box; }
.panel::-webkit-scrollbar-thumb:hover, .message-list::-webkit-scrollbar-thumb:hover, .tab-panel::-webkit-scrollbar-thumb:hover { background: #79a68a; background-clip: padding-box; }

/* flex配置でSVGの中心線を統一し、設定・メタデータのアイコンずれを防止 */
.settings-button .icon { display: block; }
.metadata th .icon { display: inline-block; margin-right: 8px; vertical-align: -4px; }

@media (max-width: 1350px) {
  .card-main { grid-template-columns: 90px minmax(0, 1fr); }
}

/* 文字全体を一段階強調。時刻のミリ秒は補助情報として控えめにする。 */
body { font-weight: 500; }
.clock-time { font-weight: 800; }
.clock-milliseconds { font-size: .68em; font-weight: 700; letter-spacing: 0; }
.card-title, .detail-title { font-weight: 800; }
.card-headline, .detail-headline, .metadata, .tab-panel { font-weight: 600; }

/* 7区分フィルターは折り返さず横方向に操作する。 */
.filter-bar { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 10px; scrollbar-width: thin; }
.filter-button { flex: 0 0 auto; }

/* 縦密度を上げ、選択電文と同系色の罫線で判別する。 */
.telegram-card { min-height: 60px; margin-bottom: 6px; padding: 7px 10px; border-width: 1px; }
.telegram-card.is-selected { padding: 6px 9px; }
.card-main { grid-template-columns: 98px minmax(0, 1fr); }
.category-label { padding: 5px 6px; }
.card-age { margin-top: 4px; }
.telegram-card[data-classification="eew.forecast"] { border-color: #d2ad37; }
.telegram-card[data-classification="eew.warning"] { border-color: #d65660; }
.telegram-card[data-classification="telegram.earthquake"] { border-color: #c98f35; }
.telegram-card[data-classification="telegram.volcano"] { border-color: #9a6fc0; }
.telegram-card[data-classification="telegram.weather"] { border-color: #5c9fd0; }
.telegram-card[data-classification="telegram.forecast"] { border-color: #4fa67a; }
.telegram-card[data-classification="eew.forecast"].is-selected { border-color: #9e7d10; }
.telegram-card[data-classification="eew.warning"].is-selected { border-color: #ad2435; }
.telegram-card[data-classification="telegram.earthquake"].is-selected { border-color: #986118; }
.telegram-card[data-classification="telegram.volcano"].is-selected { border-color: #704291; }
.telegram-card[data-classification="telegram.weather"].is-selected { border-color: #2f749f; }
.telegram-card[data-classification="telegram.forecast"].is-selected { border-color: #28704c; }


/* 右ペイン上部: カード色をヘッダーだけに用いる、罫線中心の詳細レイアウト。 */
.detail-record { overflow: hidden; border: 1px solid #dce5e0; border-radius: 8px; background: #fff; }
.detail-summary { padding: 15px 18px 13px; }
.detail-summary .detail-category { margin: 0 0 7px; }
.detail-summary .detail-title { font-size: 21px; }
.detail-summary .detail-headline { margin: 7px 0 0; }
.detail-record .metadata { margin: 0; border-collapse: separate; border-spacing: 0; }
.detail-record .metadata th, .detail-record .metadata td { border-width: 0 0 1px; }
.detail-record .metadata tr:last-child th, .detail-record .metadata tr:last-child td { border-bottom-width: 0; }
.detail-record[data-classification="eew.forecast"] .detail-summary { background: #fff9e8; }
.detail-record[data-classification="eew.warning"] .detail-summary { background: #fff0f0; }
.detail-record[data-classification="telegram.earthquake"] .detail-summary { background: #fff6df; }
.detail-record[data-classification="telegram.volcano"] .detail-summary { background: #f9f0ff; }
.detail-record[data-classification="telegram.weather"] .detail-summary { background: #edf8ff; }
.detail-record[data-classification="telegram.forecast"] .detail-summary { background: #eefbf4; }

/* 添付イメージに合わせた前後移動ボタン。 */
.detail-nav { gap: 10px; }
.detail-nav button { min-height: 36px; border: 0; border-radius: 10px; padding: 7px 13px; background: #f0f4f6; font-weight: 700; }
.detail-nav button:not(:disabled):hover { background: #e1e9ed; }

.effect-settings { grid-template-columns: 1fr auto; align-items: center; }
.effect-settings select { margin-left: 6px; padding: 4px; border: 1px solid #c9d5cd; border-radius: 5px; background: #fff; }

/* 任意の新着演出: 短命な少数DOMだけを使い、通信や一覧描画には影響させない。 */

/* UD新ゴの字面に合わせた行間調整 */
body { line-height: 1.35; }
h1, h2, h3, .clock-time { line-height: 1.15; }
.clock-time { font-weight: 700; }
.clock-date { line-height: 1.3; }
.card-title { line-height: 1.25; }
.card-headline { line-height: 1.3; }
.detail-title { line-height: 1.3; }
.detail-headline { line-height: 1.45; }
.metadata th, .metadata td { line-height: 1.3; }
.tab-panel { line-height: 1.55; }

.dialog-actions { display: flex; align-items: center; justify-content: space-between; }
.connection-actions { display: flex; gap: 8px; }
#save-settings-button { border: 1px solid #2d7d48; border-radius: 6px; padding: 7px 16px; background: #e7f8eb; color: #185b30; font-weight: 700; }

/* テスト報を通常電文と明確に区別するラベル */
.test-label { display: inline-block; margin-left: 7px; padding: 2px 6px; border: 1px solid #a86b00; border-radius: 4px; background: #fff4d8; color: #7d5000; font-size: 11px; font-weight: 700; line-height: 1.2; vertical-align: 1px; }
.detail-category .test-label { margin-left: 7px; }

/* 新着は上から到着。カード枠の波紋だけを5秒間表示する。 */
.telegram-card.is-new { position: relative; animation: new-telegram-arrival 440ms cubic-bezier(.18,.8,.25,1) both; }
.telegram-card.is-new::after { position: absolute; z-index: 1; inset: -2px; border: 2px solid rgba(53, 173, 98, .7); border-radius: 9px; content: ""; pointer-events: none; transform-origin: center; animation: new-telegram-ripple 4.8s ease-out both; }
@keyframes new-telegram-arrival { from { transform: translateY(-18px); opacity: .55; } to { transform: translateY(0); opacity: 1; } }
@keyframes new-telegram-ripple {
  0%, 13%, 27% { opacity: .8; transform: scale(1); }
  7%, 20%, 34% { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.16); }
}

/* 波紋のみのON/OFF設定 */
.effect-settings { display: block; }
.effect-settings label { display: inline-flex; align-items: center; gap: 6px; }

/* 見出し文と整形本文は、タイトルより一段軽い中ウェイトで読む。 */
.card-headline, .detail-headline { font-weight: 500; }
.tab-panel:not(.xml-panel) { font-weight: 500; }
.analysis-settings { display: block; }
.analysis-settings label { display: inline-flex; align-items: center; gap: 6px; }
.sound-settings { display: block; }
.sound-settings > label { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
.sound-file input, .sound-category-files input { max-width: 100%; }
.sound-settings input[type="range"] { width: 130px; vertical-align: middle; }
.sound-settings output { display: inline-block; min-width: 38px; font-variant-numeric: tabular-nums; }
.sound-category-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.sound-category-files label { display: grid; gap: 4px; font-size: 12px; }
@media (max-width: 640px) { .sound-category-files { grid-template-columns: 1fr; } }

/* 設定から切り替えるダークモード。レイアウトと区分色は維持する。 */
:root.dark-mode { color: #e5eee9; background: #121916; }
.dark-mode body { background: #121916; color: #e5eee9; }
.dark-mode .app-header { background: linear-gradient(105deg, #164c2a, #24643a); border-color: #367e4d; }
.dark-mode .brand p, .dark-mode .summary-item span { color: #c6ddcd; }
.dark-mode .system-panel { background: #17241c; }
.dark-mode .list-panel, .dark-mode .detail-panel, .dark-mode .panel, .dark-mode .detail-record, .dark-mode .stats-grid article, .dark-mode .tab-panel { background: #1b2520; color: #e5eee9; border-color: #35453c; }
.dark-mode .column-resizer { background: #2a3730; border-color: #405047; }
.dark-mode .search-box input, .dark-mode .filter-button, .dark-mode .settings-button, .dark-mode .detail-nav button, .dark-mode .clear-button, .dark-mode .detail-actions button, .dark-mode .dialog-heading button, .dark-mode #disconnect-button, .dark-mode .message-pagination button, .dark-mode .message-pagination input { background: #243129; color: #e5eee9; border-color: #4b5e53; }
.dark-mode .telegram-card { background: #202c25; color: #e5eee9; border-color: #4a5a50; }
.dark-mode .card-headline, .dark-mode .card-time, .dark-mode .card-age, .dark-mode .empty-state, .dark-mode .stats-grid span { color: #b6c8bd; }
.dark-mode .metadata th, .dark-mode .metadata td { border-color: #3e4d45; }
.dark-mode .metadata th { background: #202c25; color: #cfe0d5; }
.dark-mode dialog { background: #1b2520; color: #e5eee9; border-color: #3d4d44; }

/* 大量履歴はページ単位で切り替え、一覧DOMを軽く保ちます。 */
.message-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0 2px; color: #30445f; font-size: 13px; }
.message-pagination button { min-height: 32px; padding: 5px 12px; border: 1px solid #d5e0ea; border-radius: 7px; background: #f4f7fa; color: #203752; font: inherit; cursor: pointer; }
.message-pagination button:disabled { opacity: .45; cursor: default; }
.message-pagination label { display: inline-flex; align-items: center; gap: 5px; }
.message-pagination input { width: 58px; min-height: 32px; padding: 4px 6px; border: 1px solid #d5e0ea; border-radius: 7px; font: inherit; text-align: center; }


/* ダークモード最終調整: 補助文字・詳細ヘッダー・操作部も十分な明度差を確保する。 */
.dark-mode .time-section h2, .dark-mode .system-section h2, .dark-mode .system-statuses dt, .dark-mode .uptime { color: #b8c9be; }
.dark-mode .clock-date, .dark-mode .clock-time, .dark-mode .system-statuses dd, .dark-mode .stats-grid strong { color: #f2f7f3; }
.dark-mode .error { color: #ff8b87; }
.dark-mode .search-box { background: #243129; color: #d5e3d9; border-color: #60766a; }
.dark-mode .search-box input::placeholder { color: #b7c7bd; opacity: 1; }
.dark-mode .filter-button { color: #d9e6de; border-color: #60766a; }
.dark-mode .filter-button.is-active { background: #1e6c3b; color: #fff; border-color: #58c67c; }
.dark-mode .filter-button:disabled, .dark-mode .detail-nav button:disabled, .dark-mode .message-pagination button:disabled { color: #91a299; opacity: 1; }
.dark-mode .message-pagination, .dark-mode .message-pagination label { color: #d8e5dc; }
.dark-mode .message-pagination button, .dark-mode .message-pagination input { background: #243129; color: #edf6ef; border-color: #60766a; }
.dark-mode .telegram-card:hover { border-color: #7bbf91; }
.dark-mode .card-headline, .dark-mode .card-time, .dark-mode .card-age, .dark-mode .empty-state, .dark-mode .stats-grid span { color: #c7d5cc; }
.dark-mode .detail-summary .detail-title { color: #fff; }
.dark-mode .detail-summary .detail-headline { color: #edf5ef; }
.dark-mode .detail-record[data-classification="eew.forecast"] .detail-summary { background: #4a3d12; }
.dark-mode .detail-record[data-classification="eew.warning"] .detail-summary { background: #53252b; }
.dark-mode .detail-record[data-classification="telegram.earthquake"] .detail-summary { background: #4b3516; }
.dark-mode .detail-record[data-classification="telegram.volcano"] .detail-summary { background: #402752; }
.dark-mode .detail-record[data-classification="telegram.weather"] .detail-summary { background: #1d4255; }
.dark-mode .detail-record[data-classification="telegram.forecast"] .detail-summary { background: #1d4933; }
.dark-mode .metadata th { background: #243129; color: #d6e4da; }
.dark-mode .metadata td { background: #1b2520; color: #f0f6f2; }
.dark-mode .tabs { border-color: #52665b; }
.dark-mode .tab-button { color: #cbd9d0; }
.dark-mode .tab-button.is-active { color: #7fe49e; border-color: #57c87d; }
.dark-mode .category-label { filter: saturate(.82) brightness(.92); }

/* 気象特化画面のヘッダーと共通操作 */
.app-header.is-weather-view { background: linear-gradient(105deg, #91b1f2, #a8c1f7); border-color: #6483c5; }
.app-header.is-weather-view .brand p, .app-header.is-weather-view .summary-item span { color: #263b61; }
.app-header.is-weather-view .view-switch-button { border-color: #6d86bd; color: #1c3155; }
.app-header.is-weather-view .view-switch-button.is-active { border-color: #4569b1; color: #18366f; box-shadow: inset 0 -2px #4569b1; }
.dark-mode .app-header.is-weather-view { background: linear-gradient(105deg, #5278c1, #6689d1); border-color: #7897dc; }
.dark-mode .app-header.is-weather-view .brand p, .dark-mode .app-header.is-weather-view .summary-item span { color: #101e3b; }
.view-switch-button { cursor: pointer; }
.view-switch-button.is-active { cursor: default; }
.monitor-button.is-stopping { border-color: #8291a0; background: #eef2f5; color: #526476; cursor: wait; }
.app-notice { position: fixed; z-index: 30; top: 126px; left: 50%; max-width: min(720px, calc(100vw - 28px)); margin: 0; transform: translate(-50%, -6px); padding: 10px 16px; border: 1px solid #b6d6c0; border-radius: 7px; background: #f0fff4; color: #1f5e34; box-shadow: 0 4px 18px rgba(30,55,40,.18); font-size: 14px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity 350ms ease, transform 350ms ease; }
.app-notice.is-visible { transform: translate(-50%, 0); opacity: 1; }
.app-notice.is-hiding { transform: translate(-50%, -6px); opacity: 0; }
.dark-mode .app-notice { border-color: #4f8e61; background: #203c29; color: #d6f0dc; }
@media (max-width: 760px) { .app-notice { top: 168px; } }

/* データベース画面と防災情報画面の切り替え */
[hidden] { display: none !important; }
.app-header { height: 116px; }
.brand { min-width: 0; }
.brand .view-switch { display: flex; gap: 5px; margin-top: 9px; }
.view-switch-button { border: 1px solid rgba(28,72,39,.3); border-radius: 5px; padding: 5px 10px; background: rgba(255,255,255,.62); color: #1c3b26; font-size: 12px; font-weight: 700; }
.view-switch-button.is-active { background: #fff; border-color: #24733a; color: #14532b; box-shadow: inset 0 -2px #238344; }
.monitor-button { align-self: center; margin-left: 12px; border: 1px solid #147133; border-radius: 6px; padding: 8px 12px; background: #208341; color: #fff; font-weight: 700; white-space: nowrap; }
.monitor-button.is-monitoring { border-color: #9b3a38; background: #fff; color: #8e2b2b; }
.dashboard { height: calc(100vh - 116px); }
.bulletin-dashboard { height: calc(100vh - 116px); display: flex; flex-direction: column; gap: 10px; padding: 12px 18px; overflow: hidden; background: #f7f9fb; }
.weather-tabs { display: flex; flex: 0 0 auto; gap: 4px; border-bottom: 1px solid #d6e0e8; }
.weather-tab { border: 0; border-bottom: 3px solid transparent; padding: 8px 14px; background: transparent; color: #4c6074; font-weight: 700; cursor: pointer; }
.weather-tab.is-active { border-bottom-color: #2c65bd; color: #214f9b; cursor: default; }
.weather-content { min-height: 0; flex: 1 1 auto; display: grid; grid-template-columns: minmax(330px, 1fr) minmax(330px, .96fr) minmax(470px, 1.15fr); gap: 14px; }
.amedas-content { min-height: 0; flex: 1 1 auto; background: #fff; }
.bulletin-column { display: flex; min-height: 0; flex-direction: column; gap: 14px; }
.bulletin-section { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #dce5ec; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(28,55,80,.05); }
.bulletin-column .bulletin-section { flex: 1 1 0; }
.regional-section, .prefectural-section { display: flex; flex-direction: column; }
.bulletin-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: 1px solid #dce5ec; }
.bulletin-heading h2 { color: #253e5a; font-size: 16px; }
.bulletin-heading > span { color: #647990; font-size: 11px; white-space: nowrap; }
.bulletin-list { min-height: 0; overflow: auto; }
.bulletin-row { display: grid; grid-template-columns: minmax(86px, .7fr) minmax(92px, .78fr) minmax(0, 1.7fr); align-items: center; gap: 8px; min-height: 43px; padding: 8px 11px; border-bottom: 1px solid #e1e9ef; color: #172d44; }
.bulletin-row:nth-child(even) { background: #f1f5f8; }
.bulletin-area { overflow: hidden; color: #164caa; text-overflow: ellipsis; white-space: nowrap; }
.bulletin-time { color: #3f5872; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bulletin-title { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.bulletin-empty { margin: 0; padding: 20px 12px; color: #75879a; font-size: 13px; }
.bulletin-row-empty { grid-template-columns: minmax(110px, 1fr) minmax(120px, 1.25fr); color: #8595a4; }
.bulletin-empty-value { font-size: 12px; }
.prefecture-region-heading { position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 12px; border-bottom: 1px solid #dde6ed; background: #f7f9fb; color: #405b77; font-size: 12px; }
.prefectural-section .bulletin-row { min-height: 38px; }
.bulletin-dashboard, .bulletin-list { scrollbar-width: thin; scrollbar-color: #a7bac9 transparent; }
.dark-mode .bulletin-dashboard { background: #121916; }
.dark-mode .bulletin-section { border-color: #35453c; background: #1b2520; }
.dark-mode .bulletin-heading { border-color: #35453c; }
.dark-mode .bulletin-heading h2, .dark-mode .bulletin-row { color: #e5eee9; }
.dark-mode .bulletin-heading > span, .dark-mode .bulletin-time, .dark-mode .bulletin-empty, .dark-mode .bulletin-empty-value { color: #b7c7bd; }
.dark-mode .bulletin-row { border-color: #35453c; }
.dark-mode .bulletin-row:nth-child(even), .dark-mode .prefecture-region-heading { background: #202c25; }
.dark-mode .weather-tabs { border-color: #405047; }
.dark-mode .weather-tab { color: #cbd9d0; }
.dark-mode .weather-tab.is-active { color: #8fb8ff; border-color: #80aaff; }
.dark-mode .amedas-content { background: #1b2520; }
.amedas-content { display: flex; flex-direction: column; gap: 12px; overflow: auto; padding: 2px 1px 12px; }
.amedas-panel { min-width: 0; border: 1px solid #dce5ec; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(28,55,80,.05); }
.amedas-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border-bottom: 1px solid #dce5ec; }
.amedas-panel-heading h2 { margin: 0; color: #253e5a; font-size: 16px; }
.amedas-panel-heading p { margin: 4px 0 0; color: #6f8193; font-size: 12px; }
.amedas-updated { color: #647990; font-size: 12px; white-space: nowrap; }
.amedas-details { min-width: 0; }
.amedas-details > summary, .amedas-ranking-item > summary { padding: 10px 15px; color: #164caa; font-weight: 700; cursor: pointer; }
.amedas-details > summary span { margin-left: 8px; color: #718397; font-size: 12px; font-weight: 500; }
.amedas-table-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; color: #536a80; font-size: 12px; }
.amedas-table-tools label { display: flex; align-items: center; gap: 8px; }
.amedas-table-tools input { min-width: 180px; padding: 6px 9px; border: 1px solid #cdd9e3; border-radius: 5px; font: inherit; }
.amedas-table-viewport, .amedas-ranking-table-viewport { max-width: 100%; overflow: auto; border-top: 1px solid #dce5ec; }
.amedas-table, .amedas-ranking-table { width: 100%; border-collapse: collapse; color: #22374c; font-size: 12px; white-space: nowrap; }
.amedas-table th, .amedas-table td, .amedas-ranking-table th, .amedas-ranking-table td { padding: 7px 9px; border-bottom: 1px solid #e1e9ef; text-align: left; }
.amedas-table th, .amedas-ranking-table th { position: sticky; top: 0; z-index: 1; background: #f1f5f8; color: #405b77; font-weight: 700; }
.amedas-sort-toggle { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.amedas-sort-toggle:hover, .amedas-sort-toggle[aria-pressed="true"] { color: #164caa; }
.amedas-table tbody tr:nth-child(even), .amedas-ranking-table tbody tr:nth-child(even) { background: #f6f8fa; }
.amedas-ranking-panel { flex: 0 0 auto; }
.amedas-ranking-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 0 14px; }
.amedas-ranking-item { min-width: 0; border-bottom: 1px solid #e1e9ef; }
.amedas-ranking-item[open] { grid-column: 1 / -1; }
.amedas-ranking-table-viewport { max-height: 300px; }
.amedas-empty { margin: 0; padding: 12px 15px; color: #75879a; font-size: 13px; }
.dark-mode .amedas-panel { border-color: #35453c; background: #1b2520; }
.dark-mode .amedas-panel-heading { border-color: #35453c; }
.dark-mode .amedas-panel-heading h2, .dark-mode .amedas-table { color: #e5eee9; }
.dark-mode .amedas-panel-heading p, .dark-mode .amedas-updated, .dark-mode .amedas-table-tools, .dark-mode .amedas-details > summary span, .dark-mode .amedas-empty { color: #b7c7bd; }
.dark-mode .amedas-details > summary, .dark-mode .amedas-ranking-item > summary { color: #8fb8ff; }
.dark-mode .amedas-table-tools input { border-color: #52665b; background: #202c25; color: #e5eee9; }
.dark-mode .amedas-table-viewport, .dark-mode .amedas-ranking-table-viewport, .dark-mode .amedas-table th, .dark-mode .amedas-table td, .dark-mode .amedas-ranking-table th, .dark-mode .amedas-ranking-table td, .dark-mode .amedas-ranking-item { border-color: #35453c; }
.dark-mode .amedas-table th, .dark-mode .amedas-ranking-table th { background: #243129; color: #cfe0d5; }
.dark-mode .amedas-sort-toggle:hover, .dark-mode .amedas-sort-toggle[aria-pressed="true"] { color: #8fb8ff; }
.dark-mode .amedas-table tbody tr:nth-child(even), .dark-mode .amedas-ranking-table tbody tr:nth-child(even) { background: #202c25; }
@media (max-width: 1080px) {
  .app-header { min-height: 116px; height: auto; }
  .dashboard { min-height: calc(100vh - 116px); height: auto; }
  .bulletin-dashboard { height: auto; min-height: calc(100vh - 116px); overflow: visible; }
  .weather-content { grid-template-columns: 1fr 1fr; }
  .amedas-content { overflow: visible; }
  .prefectural-section { grid-column: 1 / -1; min-height: 65vh; }
  .prefectural-section .bulletin-list { max-height: 60vh; }
}
@media (max-width: 760px) {
  .app-header { min-height: 0; }
  .brand .view-switch { margin-bottom: 8px; }
  .header-summary { align-items: center; }
  .monitor-button { margin: 6px; }
  .bulletin-dashboard { padding: 10px; }
  .weather-content { grid-template-columns: 1fr; }
  .amedas-panel-heading, .amedas-table-tools { align-items: flex-start; flex-direction: column; }
  .bulletin-column { min-height: 520px; }
  .regional-section, .prefectural-section { min-height: 520px; grid-column: 1; }
  .bulletin-row { grid-template-columns: minmax(82px, .7fr) minmax(88px, .8fr) minmax(0, 1.5fr); gap: 5px; padding: 7px; font-size: 12px; }
}