body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#0f0f10; color:#fff; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 16px; }
.top { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#111; border:1px solid #222; border-radius:12px; }
.brand h1 { margin:0; font-size:18px; }
.brand small { opacity:.7; }
.card { background:#151517; border:1px solid #222; border-radius:12px; padding:14px; margin-top:14px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0; }
.grid { display:grid; grid-template-columns: 1fr 1fr auto; gap:10px; }
input, select { background:#0f0f10; border:1px solid #2a2a2a; color:#fff; padding:10px; border-radius:10px; }
button { background:#2a2a2a; border:1px solid #333; color:#fff; padding:10px 12px; border-radius:10px; cursor:pointer; }
button.ghost { background:transparent; }
.out { background:#0b0b0c; border:1px solid #222; padding:10px; border-radius:10px; overflow:auto; max-height:240px; }
.foot { opacity:.7; margin-top:12px; text-align:right; }

.tabs { display:flex; gap:8px; margin-bottom:12px; }
.tab { padding:10px 12px; border-radius:10px; }
.tab.active { background:#fff; color:#000; }

.panel { display:none; }
.panel.active { display:block; }

.split { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.box { background:#111; border:1px solid #222; border-radius:12px; padding:12px; }

.tbl { width:100%; border-collapse:collapse; }
.tbl th, .tbl td { border-bottom:1px solid #252525; padding:8px; }
.tbl input { width:100%; padding:8px; }