:root { color-scheme: light; --ink:#102b2a; --brand:#315f5b; --soft:#edf4f2; --line:#d8e3e0; --muted:#60716f; --danger:#a12d2d; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:#f5f8f7; color:var(--ink); }
main { width:min(1400px,calc(100% - 32px)); margin:32px auto 80px; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:8px; }
h2 { font-size:1.1rem; }
.eyebrow { color:var(--brand); font-size:.72rem; font-weight:800; letter-spacing:.16em; }
.card { background:white; border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 8px 30px rgba(16,43,42,.05); }
.login { width:min(460px,100%); margin:10vh auto; }
form { display:grid; gap:14px; }
label { display:grid; gap:6px; color:var(--muted); font-size:.86rem; }
input,select,textarea,button { font:inherit; }
input,select,textarea { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:9px; background:white; color:var(--ink); }
button { border:0; border-radius:9px; padding:10px 14px; color:white; background:var(--brand); cursor:pointer; font-weight:700; }
button.secondary,nav button { color:var(--brand); background:var(--soft); }
button:disabled { opacity:.55; cursor:not-allowed; }
header,.view-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
header > div:last-child { display:flex; align-items:center; gap:12px; }
nav { display:flex; gap:8px; margin:24px 0; overflow:auto; }
nav button.active { color:white; background:var(--brand); }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.metric { padding:18px; background:var(--ink); color:white; border-radius:14px; }
.metric strong { display:block; font-size:1.7rem; margin-top:7px; }
.metric span { color:#bcd1ce; font-size:.78rem; }
.grid-two { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; margin-bottom:18px; }
.bars { display:flex; height:180px; align-items:flex-end; gap:3px; }
.bar { flex:1; min-width:3px; background:#70a6a0; border-radius:3px 3px 0 0; position:relative; }
.path-row,.rule-row { display:flex; justify-content:space-between; gap:15px; border-bottom:1px solid var(--line); padding:9px 0; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.tag { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:99px; background:var(--soft); font-size:.76rem; }
.tag i { width:8px; height:8px; border-radius:50%; background:var(--tag-color,var(--brand)); }
.table-wrap { overflow:auto; background:white; border:1px solid var(--line); border-radius:14px; }
table { width:100%; border-collapse:collapse; font-size:.82rem; }
th,td { padding:11px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); background:#f9fbfa; }
td code { word-break:break-all; }
.status-bad { color:var(--danger); font-weight:800; }
.inquiry-list { display:grid; gap:14px; }
.inquiry { background:white; border:1px solid var(--line); border-radius:14px; padding:18px; display:grid; grid-template-columns:1fr 240px; gap:20px; }
.inquiry-meta { color:var(--muted); font-size:.82rem; }
.inquiry textarea { min-height:90px; }
.message { min-height:1.3em; color:var(--danger); margin-top:12px; }
[hidden] { display:none !important; }
@media (max-width:800px) { .metrics { grid-template-columns:repeat(2,1fr); } .grid-two,.inquiry { grid-template-columns:1fr; } header { align-items:flex-start; } }