:root { --bg:#0b0c10; --card:#14161d; --text:#e9eef7; --muted:#aab4c3; --accent:#7aa2ff; --border:#2a2f3a; }
* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background:var(--bg); color:var(--text); }
.container { max-width: 980px; margin: 0 auto; padding: 18px; }
h1 { margin: 0 0 6px; font-size: 24px; }
h2 { margin: 0 0 10px; font-size: 18px; }
.muted { color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin: 14px 0; }
.dropzone { border: 2px dashed var(--border); border-radius: 14px; padding: 18px; text-align: center; cursor: pointer; }
.dropzone:hover, .dropzone:focus { border-color: var(--accent); outline: none; }
.row { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.row.wrap { flex-wrap: wrap; }
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.k { font-size: 12px; color: var(--muted); }
.v { font-size: 16px; }
button { background: var(--accent); color: #081020; border: 0; border-radius: 10px; padding: 10px 12px; cursor: pointer; font-weight: 600; }
button.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
button:disabled { opacity: .5; cursor: not-allowed; }
.log { background:#0f1117; border:1px solid var(--border); border-radius: 10px; padding: 10px; min-height: 80px; white-space: pre-wrap; overflow:auto; }
textarea { width: 100%; height: 160px; background:#0f1117; color:var(--text); border:1px solid var(--border); border-radius: 10px; padding: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
table { width:100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
th, td { border-bottom: 1px solid var(--border); padding: 8px; vertical-align: top; }
th { text-align: left; color: var(--muted); font-weight: 600; }
code { background:#0f1117; padding:2px 6px; border-radius: 6px; border: 1px solid var(--border); }