* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: #f4f5f7; color: #222; }
main { max-width: 1100px; margin: 1rem auto; padding: 0 1rem; }

.topnav { display: flex; gap: 1rem; padding: .75rem 1.5rem; background: #222; color: #fff; align-items: center; }
.topnav a { color: #fff; text-decoration: none; }
.topnav a:hover { text-decoration: underline; }
.topnav .spacer { flex: 1; }

.flash { padding: .5rem .75rem; border-radius: 4px; margin: .5rem 0; }
.flash.success { background: #d4edda; color: #155724; }
.flash.error   { background: #f8d7da; color: #721c24; }

.card { background: #fff; padding: 1rem; border-radius: 6px; display: flex; flex-direction: column; gap: .75rem; max-width: 480px; }
.card label { display: flex; flex-direction: column; gap: .25rem; }
.card input { padding: .4rem; border: 1px solid #bbb; border-radius: 4px; }

button, .btn { background: #2a6df4; color: #fff; border: none; padding: .5rem .9rem; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .btn:hover { background: #1a54c8; }

table.grid { width: 100%; border-collapse: collapse; background: #fff; }
table.grid th, table.grid td { padding: .5rem; border-bottom: 1px solid #eee; text-align: left; vertical-align: top; }
table.grid code { font-size: .85em; word-break: break-all; }

#tree ul { list-style: none; padding-left: 1.2rem; }
#tree li { margin: .15rem 0; }
#tree .folder > label { font-weight: 600; }
#tree label { cursor: pointer; user-select: none; }

.actions { margin-top: 1rem; display: flex; gap: .5rem; align-items: center; }

.sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.sim-grid .card { max-width: none; }
.sim-grid fieldset { border: 1px solid #ddd; border-radius: 4px; padding: .5rem .75rem; }
.sim-grid textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: .85em; padding: .4rem; border: 1px solid #bbb; border-radius: 4px; }
.kv-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .25rem; margin-bottom: .25rem; }
.kv-row input { padding: .3rem; border: 1px solid #bbb; border-radius: 4px; }
.kv-row button { background: #b33; padding: .2rem .5rem; }
.timer { font-family: ui-monospace, Consolas, monospace; font-size: 1.1em; margin-left: 1rem; }
#sim-status.ok { color: #155724; }
#sim-status.ko { color: #721c24; }
.url-preview { font-size: .85em; color: #555; word-break: break-all; }
@media (max-width: 900px) { .sim-grid { grid-template-columns: 1fr; } }