:root { --bg:#ffffff; --card:#ffffff; --muted:#6b7280; --text:#111827; --accent:#111827; --bad:#b91c1c; --ok:#15803d; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; padding: 16px; background: var(--bg); color: var(--text); }
h1 {
    font-size: 16px;
    margin: 20px 0 8px 0;
    color: var(--text);
    font-weight: 600;
}
.subtitle {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 16px 0;
    font-weight: 400;
}
.wrap { max-width: 1024px; margin: 0 auto; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card { background: var(--card); border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px; margin: 10px 0; }
.url-card { border: none; }
input, select, button, textarea { background: #ffffff; color: var(--text); border: 1px solid #d1d5db; border-radius: 4px; padding: 6px 8px; font-family: inherit; font-size: 13px; }
input[type="number"] { width: 80px; }
button { background: #f3f4f6; border-color: #d1d5db; cursor: pointer; color: var(--text); }
button.primary { background: #e5e7eb; border-color: #cbd5e1; }
button.warn { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
button:disabled { opacity: .6; cursor: not-allowed; }
.muted { color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 8px; }
.kv { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 6px; }
.seg, .qp { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border-bottom: 1px dashed #eef2f7; padding: 6px; font-size: 12px; text-align: left; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid #e5e7eb; border-radius:999px; background:#f9fafb; }
.list { display:flex; flex-wrap:wrap; gap:6px; }
.section-title { font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin: 6px 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.hint { font-size: 12px; color: var(--muted); }
.link { color: var(--accent); text-decoration: none; }
.urlout { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; }
.pre { white-space: pre-wrap; word-break: break-word; background:#f8fafc; border:1px dashed #e5e7eb; border-radius:4px; padding:8px; font-size:12px; color: var(--text); }
.layout { display: grid; grid-template-columns: 260px 1fr; gap: 12px; }
.layout > .url-card { grid-column: 1 / -1; }
.side { position: sticky; top: 12px; height: fit-content; }
.main { min-width: 0; }
.main.fullspan { grid-column: 1 / -1; }
/* left panel history truncation */
#history { display: flex; flex-direction: column; gap: 6px; }
#history .pill { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:2px; }
.link-btn {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--accent);
    text-decoration: underline;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-block;
}
.history-controls { display:flex; gap:12px; margin: 0 0 6px 0; align-items:center; }
.history-card { border: none; }
/* tiny icon buttons */
.icon-btn { width: 28px; height: 28px; display:inline-flex; align-items:center; justify-content:center; padding:0; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:4px; }
.icon { width: 14px; height: 14px; display:block; }
/* compact rows */
#qtable .qp-k, #qtable .qp-v { font-size: 12px; }
#qtable .qp-v { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
#qtable .kv-row { display:flex; align-items:flex-start; gap:8px; }
#qtable .kv-val { flex:1; }
#qtable .kv-actions { display:inline-flex; gap:6px; margin-left:6px; vertical-align: middle; visibility: hidden; }
#qtable tr:hover .kv-actions { visibility: visible; }
#qtable .icon-btn { border: 1px solid #e5e7eb; background: transparent; }
#qtable .btn-decode { width: 28px; min-width: 28px; height: 28px; padding: 0; }
/* subtle editing border only around text area */
#qtable .editbox { display: inline-block; padding: 2px 4px; border: 1px solid transparent; border-radius: 4px; }
#qtable .editbox.editing { border-color: #cbd5e1; background: #f8fafc; }
#qtable .qp-k:focus, #qtable .qp-v:focus { outline: none; }
.decoded-wrap { background:#f8fafc; border:1px dashed #e5e7eb; border-radius:4px; padding:6px; margin-top:6px; }
.jwt-wrap { background:#f8fafc; border:1px dashed #e5e7eb; border-radius:4px; padding:6px; margin-top:6px; }
.jwt-content { display: flex; flex-direction: column; gap: 8px; }
.jwt-section { display: flex; flex-direction: column; gap: 4px; }
.jwt-label { font-size: 12px; font-weight: 400; color: var(--text); }
.jwt-json { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 4px; padding: 8px; margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; }
.jwt-signature { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 4px; padding: 8px; word-break: break-all; font-size: 12px; }
/* multi-line url input */
#url-in { min-height: 72px; resize: vertical; line-height: 1.3; }
.url-controls { justify-content: space-between; }
.url-controls .uc-left, .url-controls .uc-right { display:flex; gap:12px; }
.tool-switch { display:flex; gap:12px; align-items:center; margin: 0 0 6px 0; }
.tool-switch .active { font-weight: 600; text-decoration: underline; }
.tool-switch .separator {
    color: var(--muted);
    margin: 0 8px;
    font-size: 14px;
}
/* diff styles */
.diff-table { width:100%; border-collapse: collapse; }
.diff-table th, .diff-table td { border-bottom: 1px dashed #eef2f7; padding: 6px; font-size: 12px; text-align: left; }
.diff-table tr.add td { background: #ecfdf5; }
.diff-table tr.del td { background: #fef2f2; }
.diff-table tr.ctx td { background: #ffffff; }
.inlinediff { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; white-space: pre-wrap; word-break: break-word; }
.tok-add { background: #dcfce7; }
.tok-del { background: #fee2e2; }
.inspector-card { grid-column: 1 / -1; }
/* remove extra vertical margins between first row and second row */
.layout > .url-card { margin-bottom: 0; }
.layout > .side > .card:first-child, .layout > .main > .card:first-child { margin-top: 0; }
/* ensure first history card has no top margin even with controls above */
.layout > .side > .card.history-card { margin-top: 0; }
/* remove outer borders for diff (inspector) and pretty panels */
.inspector-card { border: none; }
#pretty.card { border: none; }
/* force hide history */
.force-hide-history { display: none !important; }