:root { color-scheme: light; font-family: system-ui, -apple-system, "Noto Sans JP", sans-serif; background:#f1f5f9; color:#0f172a; }
* { box-sizing:border-box; }
body { margin:0; }
header { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; padding:14px 18px; background:#155e75; color:white; box-shadow:0 2px 8px #0f172a33; }
header span { font-size:.82rem; opacity:.9; }
main { max-width:1000px; margin:20px auto; padding:0 12px; }
.card { background:white; border-radius:14px; padding:18px; box-shadow:0 3px 18px #0f172a12; }
#login { max-width:430px; margin:10vh auto; }
h1,h2 { margin:0 0 14px; }
h2 { font-size:1.05rem; }
label { display:block; margin:14px 0; font-weight:650; }
input { display:block; width:100%; margin-top:6px; padding:12px; border:1px solid #cbd5e1; border-radius:9px; font-size:16px; }
button { border:0; border-radius:9px; padding:11px 16px; background:#0e7490; color:white; font-weight:700; cursor:pointer; }
button.secondary { background:#475569; }
.error { color:#b91c1c; min-height:1.4em; }
.toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.toolbar small { display:block; color:#64748b; }
.layout { display:grid; grid-template-columns:minmax(260px, .8fr) minmax(360px, 1.4fr); gap:12px; }
.list { max-height:65vh; overflow:auto; }
.item { display:block; width:100%; padding:12px; margin:0 0 7px; text-align:left; background:#f8fafc; color:#0f172a; border:1px solid #e2e8f0; }
.item:hover,.item.active { background:#ecfeff; border-color:#0891b2; }
.item small { display:block; margin-top:4px; color:#64748b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.message { padding:10px 4px; border-bottom:1px solid #e2e8f0; }
.message header { position:static; padding:0; color:#334155; background:none; box-shadow:none; font-size:.82rem; }
.message p { margin:5px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.debug { margin-top:12px; }
pre { max-height:300px; overflow:auto; font-size:.72rem; white-space:pre-wrap; }
@media (max-width:700px) { main{margin:10px auto}.layout{grid-template-columns:1fr}.messages{min-height:35vh}.list{max-height:48vh} }