:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:#0f1115; color:#e6e6e6; margin:0; padding:2rem;
}
h1 { margin-top:0; font-weight:600; }
button {
  background:#1c2030; color:#e6e6e6; border:1px solid #2b3044;
  padding:.6rem 1rem; border-radius:.6rem; cursor:pointer;
}
button:hover { filter:brightness(1.1); }
.attested-encryption-controls {
  margin-top:1rem;
  padding:.75rem;
  border:1px dashed #2b3044;
  border-radius:.6rem;
  background:#111525;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
}
.attested-encryption-controls label {
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.95rem;
}
.attested-encryption-controls select {
  min-width:280px;
  background:#141826;
  border:1px solid #2b3044;
  border-radius:.4rem;
  color:#e6e6e6;
  padding:.45rem .65rem;
}
.attested-encryption-status {
  font-size:.85rem;
  color:#c8cbe0;
}
textarea {
  width:100%; height:120px; margin-top:1rem; background:#141826; color:#e6e6e6;
  border:1px solid #2b3044; border-radius:.6rem; padding:.8rem; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}
.byte-info {
  margin-top:.4rem;
  font-size:.85rem;
  color:#c8cbe0;
  display:flex;
  gap:.5rem;
  align-items:center;
}
.byte-info span {
  font-variant-numeric:tabular-nums;
}
.byte-info-overhead {
  font-size:.78rem;
  opacity:.8;
}
.byte-info.over-limit {
  color:#f19973;
}
.byte-info-status {
  font-size:.8rem;
  opacity:.75;
}
textarea.format-plain {
  border-color:#2b3044;
}
textarea.format-ciphertext {
  border-color:#2e6dd8;
  box-shadow:0 0 0 1px rgba(46,109,216,0.35);
}
textarea.format-error {
  border-color:#b14b4b;
  box-shadow:0 0 0 1px rgba(177,75,75,0.35);
}
pre {
  background:#141826; border:1px solid #2b3044; border-radius:.6rem;
  padding:1rem; margin-top:1rem; overflow:auto;
}
#walletInfo { margin:.8rem 0 0 0; opacity:.9; }

#logsContainer {
  background:#141826;
  border:1px solid #2b3044;
  border-radius:.6rem;
  padding:0;
}

#logsTable {
  width:100%;
  border-collapse:collapse;
  min-width:860px;
}

.logs-controls {
  display:flex;
  gap:.75rem;
  align-items:center;
  margin-top:.6rem;
  flex-wrap:wrap;
}
.logs-controls label {
  font-size:.9rem;
  color:#d0d3ea;
}
.logs-controls input {
  background:#141826;
  border:1px solid #2b3044;
  border-radius:.4rem;
  padding:.4rem .6rem;
  color:#e6e6e6;
  min-width:120px;
}

#logsTable th,
#logsTable td {
  padding:.6rem 1rem;
  border-bottom:1px solid #2b3044;
  text-align:left;
  vertical-align:top;
  font-size:.9rem;
  word-break:break-word;
}

#logsTable thead th {
  position:sticky;
  top:0;
  background:#1b2132;
  box-shadow:0 1px 0 rgba(255,255,255,0.05);
  z-index:1;
}

#logsTable tbody tr:nth-child(even) {
  background:rgba(255,255,255,0.02);
}

#logsTable .hash-cell {
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.85rem;
}
#logsTable .hash-cell a {
  color:#86aef5;
  text-decoration:none;
}
#logsTable .hash-cell a:hover {
  text-decoration:underline;
}

.log-expandable-cell {
  position:relative;
}

button.log-expandable {
  display:block;
  width:100%;
  background:#101423;
  border:1px solid rgba(134,174,245,0.3);
  border-radius:.4rem;
  color:#cdd8ff;
  cursor:pointer;
  padding:.35rem .5rem;
  font:inherit;
  text-align:left;
  line-height:1.4;
  word-break:break-word;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}

button.log-expandable:hover,
button.log-expandable:focus {
  background:rgba(134,174,245,0.12);
  border-color:#86aef5;
  color:#e6ecff;
}

button.log-expandable:focus {
  outline:1px solid rgba(134,174,245,0.6);
  outline-offset:2px;
}

button.log-expandable.log-expandable--expanded {
  background:rgba(134,174,245,0.18);
  border-color:#9fb8ff;
  color:#ffffff;
}