* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; background:#f3f4f6; color:#111827; margin:0; padding:32px; }
.wrap { max-width:1200px; margin:0 auto; }
header { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; background:#fff; padding:24px; border-radius:16px; box-shadow:0 4px 16px rgba(0,0,0,.12); margin-bottom:20px; }
h1 { margin:0 0 8px; }
p { margin:6px 0; }
nav { display:flex; gap:10px; flex-wrap:wrap; }
.btn, button.btn { display:inline-block; background:#111827; color:#fff; text-decoration:none; border:0; border-radius:10px; padding:12px 18px; cursor:pointer; font-size:15px; }
.btn.ghost { background:#e5e7eb; color:#111827; }
.panel, .card { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:20px; margin-bottom:20px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:20px; }
.card span { display:block; color:#6b7280; font-size:14px; margin-bottom:6px; }
.card strong { font-size:22px; }
.tracecard { padding:0; overflow:hidden; }
.tracecard h2 { margin:0; padding:14px 18px; background:#e5e7eb; }
.meta { padding:14px 18px; background:#fafafa; border-bottom:1px solid #e5e7eb; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:16px 0; }
label { background:#f9fafb; border:1px solid #ddd; padding:10px; border-radius:10px; cursor:pointer; }
.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { padding:10px; border-bottom:1px solid #e5e7eb; text-align:left; white-space:nowrap; }
pre { margin:0; background:#111; color:#00ff66; padding:18px; overflow-x:auto; white-space:pre-wrap; }
.bad { color:#b91c1c; font-weight:bold; }
.warn { color:#b45309; font-weight:bold; }
.ok { color:#15803d; font-weight:bold; }
.bad.badge, .warn.badge, .ok.badge { padding:4px 8px; border-radius:999px; background:#f3f4f6; display:inline-block; }
.notice { background:#ecfdf5; border:1px solid #bbf7d0; color:#166534; padding:12px 16px; border-radius:12px; }
@media(max-width:700px){ body{padding:16px;} header{display:block;} nav{margin-top:16px;} }
.periods { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.period { display:inline-block; padding:10px 14px; border-radius:999px; background:#e5e7eb; color:#111827; text-decoration:none; font-weight:bold; }
.period.active { background:#111827; color:#fff; }
.warnbox { background:#fff7ed; border-color:#fed7aa; color:#9a3412; }