:root{ --bg:#0b0c10; --panel:#111317; --ink:#e6edf3; --muted:#9aa4b2; --accent:#4ba3ff; --border:#1c1f26; --elev:9999; }
*{ box-sizing:border-box; } html, body{ height:100%; } body{ margin:0; background:var(--bg); color:var(--ink); font:14px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Apple SD Gothic Neo,sans-serif; }
a{ color:inherit; text-decoration:none; }
.topbar{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border); background:#0e1118; position:sticky; top:0; z-index:var(--elev); }
.brand{ font-weight:700; letter-spacing:.3px; }
.actions{ display:flex; gap:8px; align-items:center; }
.container{ padding:16px; display:grid; gap:16px; grid-template-columns: 1fr; max-width:1200px; margin:0 auto; }
.panel{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:12px; }
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.card{ background:#0f1320; border:1px solid var(--border); border-radius:12px; padding:12px; transition:transform .08s ease; }
.card:hover{ transform:translateY(-2px); }
.card p{ color:var(--muted); font-size:13px; margin:.3rem 0 0; }
button, select, input{ background:#0f1320; border:1px solid var(--border); color:#e6edf3; padding:8px 10px; border-radius:8px; }
button{ cursor:pointer; } .primary{ background:var(--accent); border-color:var(--accent); color:#091018; font-weight:700; }
.ghost{ background:transparent; border-color:var(--border); }
textarea{ width:100%; min-height:160px; background:#0f1320; border:1px solid var(--border); border-radius:10px; color:#e6edf3; padding:10px; }
.row{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.field{ display:flex; flex-direction:column; gap:6px; min-width:180px; }
label{ font-size:12px; color:var(--muted); }
.table{ margin-top:6px; }
table{ border-collapse:collapse; table-layout:fixed; }
th, td{ border-bottom:1px solid var(--border); padding:8px 10px; vertical-align:top; white-space:pre-wrap; word-break:break-word; }
th{ position:sticky; top:0; background:#0d1018; z-index:1; }
.toast{ position:fixed; right:16px; bottom:16px; background:#111317; border:1px solid var(--border); color:#e6edf3; padding:10px 12px; border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.3); z-index:var(--elev); }

/* new: wide tables scroll horizontally */
.table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: #0f1320;
}
.table-wrapper table{
  width: max-content;
  min-width: 100%;
}
.table-wrapper th, .table-wrapper td{
  white-space: pre-wrap;
  word-break: break-word;
}
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:flex-start; justify-content:center; padding-top:10vh; z-index:calc(var(--elev) + 1); }
.modal[hidden]{ display:none; }
.modal-inner{ background:#0f1320; border:1px solid var(--border); border-radius:16px; padding:16px; width:420px; max-width:92vw; box-shadow:0 12px 48px rgba(0,0,0,.45); }
.modal-inner h3{ margin-top:0; }
.modal-inner input{ width:100%; margin:8px 0 12px; }