:root { --bg:#0b5fff; --fg:#fff; --muted:#666; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
header { background:var(--bg); color:var(--fg); padding:10px 16px; display:flex; align-items:center; justify-content:space-between; }
header h1 { margin:0; font-size:18px; }
nav button { margin-left:6px; border:none; background:rgba(255,255,255,0.15); color:#fff; padding:6px 10px; border-radius:6px; cursor:pointer; }
nav button:hover { background:rgba(255,255,255,0.25); }
 .statusbar { display:flex; gap:16px; padding:6px 16px; background:#f3f6ff; color:#333; width:100%; }
 .pill { padding:2px 8px; border-radius:999px; background:#fff3cd; color:#8a6d3b; }
.pill.ok { background:#e6ffed; color:#0a7a32; }
.pill.err { background:#ffefef; color:#b00020; }
.mini { margin-left:8px; padding:4px 8px; font-size:12px; background:#fff; color:#333; border:1px solid #cbd5e1; border-radius:6px; cursor:pointer; }
main { padding:16px; }
.tab { display:none; }
.tab.active { display:block; }
label { display:block; margin:8px 0; }
input, textarea, select { width:100%; padding:8px; border:1px solid #ddd; border-radius:6px; font:inherit; }
.row { display:flex; gap:8px; align-items:center; margin:8px 0; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid.grid-3 { grid-template-columns: 260px 1fr 1fr; }
button { background:#0b5fff; color:#fff; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; }
button:disabled { background:#999; }
.hint { color:var(--muted); }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; background:#eee; color:#333; font-size:12px; }
.badge.ok { background:#e6ffed; color:#0a7a32; }
.badge.warn { background:#fff7e6; color:#a15d00; }
.badge.err { background:#ffefef; color:#b00020; }
.preview { background:#fafafa; border:1px solid #eee; border-radius:6px; padding:8px; white-space:pre-wrap; }
.preview h1, .preview h2, .preview h3 { margin:10px 0 6px; }
.preview table { width:100%; border-collapse: collapse; }
.preview table, .preview th, .preview td { border:1px solid #ddd; }
.preview th, .preview td { padding:6px; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border:1px solid #e5e7eb; padding:8px; text-align:left; }
.table th { background:#f8fafc; }
footer { padding:12px 16px; color:#888; }
aside { background:#f8f9fb; border:1px solid #e7ebf0; border-radius:8px; padding:8px; }
.list { max-height: 480px; overflow:auto; }
.list .group { margin:8px 0; }
.list .group h4 { margin:6px 0; font-size:13px; color:#555; }
.list .item { padding:6px; border-radius:6px; cursor:pointer; }
.list .item:hover { background:#eef3ff; }
.list .item.active { background:#dfeaff; }
.list .row { justify-content: space-between; }
.progress { flex:1; height:8px; background:#eee; border-radius:6px; overflow:hidden; min-width:160px; }
.progress .progress-fill { height:100%; background:#0b5fff; width:0%; transition: width .2s ease; }

@media (max-width: 900px){ .grid { grid-template-columns: 1fr; } }