:root { --border:#e7e7e7; --muted:#666; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:#fafafa; color:#111}
header{background:#fff;border-bottom:1px solid var(--border); padding:12px 16px; display:flex; align-items:center; gap:12px}
header h1{font-size:16px;margin:0}
nav a{margin-inline-end:10px; text-decoration:none; color:#111; padding:6px 10px; border-radius:8px}
nav a.active, nav a:hover{background:#f1f1f1}
main{padding:16px; max-width:1100px; margin:0 auto}
.card{background:#fff;border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:12px}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.kpi{padding:12px;border:1px solid var(--border); border-radius:12px; background:#fff}
.kpi .n{font-size:22px;font-weight:700}
.kpi .t{color:var(--muted); font-size:12px}
.row{display:flex; gap:10px; flex-wrap:wrap}
input, select, button, textarea{padding:10px; border:1px solid var(--border); border-radius:10px; background:#fff}
button{cursor:pointer}
table{width:100%; border-collapse:collapse}
th, td{padding:10px; border-bottom:1px solid var(--border); text-align:right}
small{color:var(--muted)}
.badge{padding:3px 8px; border:1px solid var(--border); border-radius:999px; font-size:12px}
.tree ul{list-style:none; padding-right:18px; margin:6px 0}
.tree li{margin:6px 0}
.tree .meta{color:var(--muted); font-size:12px; margin-right:6px}
.footer{color:var(--muted); font-size:12px; margin-top:14px}