:root {
    --bg: #0f1115;
    --panel: #181b22;
    --panel-2: #1f232c;
    --border: #2a2f3a;
    --text: #e6e8eb;
    --muted: #8b94a3;
    --accent: #5aa9ff;
    --error: #ff6b6b;
    --green: #4ade80;
    --orange: #f59e0b;
    --red: #ef4444;
    --purple: #a78bfa;
    --blue: #60a5fa;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font: 14px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; height: 100%; }
#app { height: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-shell { display: flex; flex-direction: column; height: 100vh; }
.app-header { display: flex; align-items: baseline; gap: 1rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--panel); }
.app-header .brand { font-weight: 700; font-size: 1.1rem; color: var(--text); }
.app-header .tagline { color: var(--muted); font-size: .85rem; }
.app-main { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

.landing { max-width: 640px; margin: 4rem auto; text-align: center; padding: 0 1rem; }
.landing h1 { font-size: 2.5rem; margin-bottom: .5rem; }
.landing p { color: var(--muted); margin-bottom: 1.5rem; }

.btn-primary { background: var(--accent); color: #fff; border: 0; padding: .65rem 1.2rem; border-radius: 6px; font-size: 1rem; cursor: pointer; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); padding: .35rem .75rem; border-radius: 4px; cursor: pointer; font-size: .85rem; }
.btn-ghost:hover { background: var(--panel-2); }
a.btn-ghost { display: inline-block; }

.token-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--panel); }
.token-bar small { color: var(--muted); margin-right: .5rem; }
.capture-url { background: var(--panel-2); padding: .25rem .5rem; border-radius: 4px; color: var(--accent); margin-right: .5rem; }

.split { display: grid; grid-template-columns: 360px 1fr; flex: 1; min-height: 0; }
.list { border-right: 1px solid var(--border); overflow-y: auto; background: var(--panel); }
.detail { overflow-y: auto; padding: 1rem 1.5rem; }

.empty { color: var(--muted); padding: 2rem; text-align: center; }

.list-item { display: flex; align-items: baseline; gap: .5rem; width: 100%; padding: .6rem .85rem; background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--text); cursor: pointer; text-align: left; font-size: .85rem; }
.list-item:hover { background: var(--panel-2); }
.list-item.active { background: var(--panel-2); border-left: 3px solid var(--accent); padding-left: calc(.85rem - 3px); }
.list-item .path { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, monospace; }
.list-item .meta { color: var(--muted); font-size: .75rem; white-space: nowrap; }

.method { font-family: ui-monospace, monospace; font-weight: 700; font-size: .7rem; padding: .15rem .4rem; border-radius: 3px; text-transform: uppercase; min-width: 50px; text-align: center; }
.method-get { background: rgba(96,165,250,.2); color: var(--blue); }
.method-post { background: rgba(74,222,128,.2); color: var(--green); }
.method-put { background: rgba(245,158,11,.2); color: var(--orange); }
.method-patch { background: rgba(167,139,250,.2); color: var(--purple); }
.method-delete { background: rgba(239,68,68,.2); color: var(--red); }
.method-head, .method-options { background: var(--panel-2); color: var(--muted); }

.detail h2 { display: flex; align-items: baseline; gap: .5rem; font-family: ui-monospace, monospace; font-size: 1rem; margin: 0 0 .25rem 0; }
.detail h3 { font-size: .85rem; text-transform: uppercase; color: var(--muted); margin: 1.25rem 0 .5rem; letter-spacing: .05em; }
.detail .meta { color: var(--muted); font-size: .8rem; margin-bottom: 1rem; }

.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: .25rem .5rem; border-bottom: 1px solid var(--border); font-family: ui-monospace, monospace; font-size: .8rem; vertical-align: top; }
.kv td:first-child { color: var(--muted); width: 200px; }
.kv td:last-child { word-break: break-all; }

.body { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 0; font-family: ui-monospace, monospace; font-size: .8rem; max-height: 60vh; overflow: auto; margin: 0; }
.body code { display: block; padding: .75rem; white-space: pre-wrap; word-break: break-word; background: transparent !important; }
.body code.hljs { background: transparent !important; }

.body-header { display: flex; align-items: center; gap: .5rem; margin: 1.25rem 0 .5rem; }
.body-header h3 { margin: 0; }
.body-tag { font-family: ui-monospace, monospace; font-size: .65rem; text-transform: uppercase; padding: .15rem .4rem; background: var(--panel-2); color: var(--muted); border-radius: 3px; letter-spacing: .05em; }
.btn-tiny { padding: .2rem .5rem; font-size: .7rem; }

.error { color: var(--error); }

#blazor-error-ui { background: var(--red); color: #fff; padding: .5rem 1rem; position: fixed; bottom: 0; left: 0; right: 0; display: none; }
.blazor-error-boundary { color: var(--red); padding: 1rem; }

.loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto; }
.loading-progress circle { fill: none; stroke: #2a2f3a; stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--accent); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0; color: var(--text); }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }