/* ===== reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #1a1a2e;
  color: #e0e0e0;
  font-size: 14px;
  line-height: 1.6;
}

/* ===== layout ===== */
#app { max-width: 1200px; margin: 0 auto; padding: 0 16px 40px; }

/* ===== topbar ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid #333;
  margin-bottom: 24px;
}
.logo { font-size: 20px; font-weight: 700; color: #fff; }

/* ===== badges ===== */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 4px;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.badge-loading { background: #444; color: #aaa; }
.badge-ok    { background: #1a7f37; color: #fff; }
.badge-err   { background: #c53030; color: #fff; }
.badge-warn  { background: #b8860b; color: #fff; }
.badge-gray  { background: #555; color: #ccc; }
.badge-info  { background: #2b6cb0; color: #fff; }

/* ===== input section ===== */
.input-section, .pubkey-section { margin-bottom: 20px; }
.section-label {
  display: block; font-size: 12px; color: #888;
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px;
}
textarea {
  width: 100%; padding: 12px; border: 1px solid #444; border-radius: 6px;
  background: #16213e; color: #e0e0e0; font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px; resize: vertical; word-break: break-all;
}
textarea:focus { outline: none; border-color: #4a9eff; }
.input-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.hint { color: #666; font-size: 12px; }

/* ===== pubkey ===== */
.pubkey-input {
  width: 100%; padding: 8px 12px; border: 1px solid #444; border-radius: 6px;
  background: #16213e; color: #e0e0e0; font-family: monospace; font-size: 13px;
}
.pubkey-input:focus { outline: none; border-color: #4a9eff; }

/* ===== buttons ===== */
.btn {
  padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600; background: #333; color: #ccc;
  transition: all .15s;
}
.btn:hover { background: #444; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-sm { padding: 3px 10px; font-size: 11px; }
.btn-primary { background: #4a9eff; color: #fff; }
.btn-primary:hover { background: #3a8eef; }
.btn-accent { background: #6c5ce7; color: #fff; }
.btn-accent:hover { background: #5b4cd7; }

/* ===== status bar ===== */
.status-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; margin-bottom: 16px; border-bottom: 1px solid #333;
}
.hidden { display: none !important; }

/* ===== three columns ===== */
.three-col {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
}
@media (max-width: 768px) { .three-col { grid-template-columns: 1fr; } }

.col {
  border-radius: 8px; overflow: hidden;
  border: 1px solid #333;
}
.col-header    { background: #2a1010; }
.col-payload   { background: #1a1030; }
.col-signature { background: #0a1530; }

.col-title {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; font-weight: 700; font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
}
.col-copy { position: absolute; right: 8px; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-red    { background: #e74c3c; }
.dot-purple { background: #9b59b6; }
.dot-blue   { background: #3498db; }

.col-content {
  padding: 12px; font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px; word-break: break-all; max-height: 500px; overflow-y: auto;
}
pre.col-content { white-space: pre-wrap; }

/* ===== payload list ===== */
.payload-list { display: flex; flex-direction: column; gap: 6px; }
.payload-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
.payload-item:last-child { border-bottom: none; }
.payload-key { color: #e879f9; font-weight: 600; font-size: 12px; }
.payload-val { color: #e0e0e0; font-family: monospace; font-size: 13px; }
.payload-desc { color: #666; font-size: 11px; }
.payload-val.ok { color: #4ade80; }
.payload-val.expired { color: #f87171; }
.payload-val.payload-object {
  white-space: pre-wrap;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: #a5d8ff;
  background: rgba(255,255,255,.02);
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.06);
}

/* ===== payload raw json ===== */
.payload-json-section { border-top: 1px solid rgba(255,255,255,.08); }
.toggle-btn {
  width: 100%; text-align: left; background: transparent; color: #888;
  padding: 6px 12px; border: none; border-radius: 0; font-size: 11px;
}
.toggle-btn:hover { color: #ccc; background: rgba(255,255,255,.03); }
.payload-json {
  display: none; border-top: 1px solid rgba(255,255,255,.05);
  color: #c0c0c0; white-space: pre-wrap;
}
.payload-json.show { display: block; }

/* ===== signature ===== */
.sig-view { color: #5dade2; }
.sig-detail {
  padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 11px;
}
.sig-detail .label { color: #666; }
.mono { font-family: 'SF Mono', 'Fira Code', monospace; word-break: break-all; }
.col-raw {
  padding: 8px 12px; font-family: monospace; font-size: 11px;
  border-top: 1px solid rgba(255,255,255,.05); color: #888;
}