@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#16211d; --muted:#73817a; --paper:#f8f8f3; --line:#e4e8de; --accent:#e8ff55; --deep:#1f312a; --card:#fff; --red:#bb3c35; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; }
button,input { font:inherit; } button { cursor:pointer; }
.app-shell { min-height:100vh; } header { height:72px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#fcfcf8; }
.brand { color:var(--ink); font-size:25px; font-weight:800; letter-spacing:-1.7px; text-decoration:none; }.brand span{ color:#85a300; }.status { display:flex; gap:8px; align-items:center; font-size:12px; color:var(--muted); font-weight:700; }.status i { width:8px; height:8px; display:block; border-radius:50%; background:#e4aa52; }.status.connected i { background:#78b761; box-shadow:0 0 0 4px #e7f2df; }
main { display:grid; grid-template-columns:285px 1fr; min-height:calc(100vh - 72px); }.sidebar { border-right:1px solid var(--line); padding:28px 16px; background:#fbfbf7; }.sidebar-heading { display:flex; align-items:center; justify-content:space-between; padding:0 8px 17px; }.eyebrow { color:#829087; font-size:10px; font-weight:800; letter-spacing:1.2px; margin:0 0 4px; }.sidebar h2,.request-heading h2 { margin:0; font-size:16px; letter-spacing:-.4px; }.icon-button { border:0; width:29px; height:29px; background:var(--deep); color:var(--accent); border-radius:8px; font-size:23px; line-height:20px; }.endpoint-list { display:grid; gap:4px; }.endpoint-item { text-align:left; border:0; background:transparent; border-radius:8px; padding:11px 10px; color:var(--ink); }.endpoint-item:hover,.endpoint-item.active { background:#eef0e9; }.endpoint-item strong { display:block; font-size:13px; }.endpoint-item small { color:var(--muted); font-size:11px; }.endpoint-item .count { background:#e4e8de; padding:2px 6px; border-radius:9px; float:right; font-size:10px; }
.workspace { min-width:0; padding:42px clamp(28px,6vw,95px); }.empty-state { max-width:600px; margin:17vh auto; text-align:center; }.empty-icon { color:#779a10; font-size:65px; line-height:1; margin-bottom:22px; }.empty-state h1 { font-size:clamp(29px,4vw,47px); line-height:1.1; letter-spacing:-2.6px; margin:0 0 15px; }.empty-state p { max-width:470px; color:var(--muted); font-size:15px; line-height:1.65; margin:0 auto 25px; }.primary-button { border:0; background:var(--accent); color:#1c270a; font-weight:800; font-size:13px; padding:12px 18px; border-radius:8px; box-shadow:inset 0 0 0 1px #d3e844; }.primary-button:hover { background:#dffb39; }.hidden { display:none!important; }
.endpoint-view { max-width:1140px; margin:auto; }.endpoint-header,.request-heading { display:flex; justify-content:space-between; align-items:flex-end; }.endpoint-header { margin-bottom:25px; }.endpoint-header h1 { font-size:32px; letter-spacing:-1.7px; margin:0; }.danger-button,.text-button { border:0; background:none; color:var(--red); font-size:12px; font-weight:800; padding:8px; }.url-card { border:1px solid #dbe1d3; background:#f1f4eb; border-radius:10px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding:12px 14px; margin-bottom:42px; }.url-label { color:var(--muted); font-size:11px; font-weight:700; }.url-card code { font-family:'DM Mono',monospace; font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.copy-button { color:#496315; border:1px solid #c7d5b5; background:#fbfdf8; border-radius:6px; font-size:11px; font-weight:800; padding:7px 10px; }.request-heading { margin-bottom:13px; }.request-heading h2 span { font-size:11px; background:#e8ece4; border-radius:12px; padding:3px 7px; color:var(--muted); vertical-align:2px; }.request-layout { display:grid; grid-template-columns:minmax(260px, .8fr) minmax(360px, 1.2fr); min-height:460px; border:1px solid var(--line); border-radius:10px; background:var(--card); overflow:hidden; }.request-list { border-right:1px solid var(--line); overflow:auto; }.list-placeholder,.detail-empty { padding:25px; color:var(--muted); font-size:13px; }.request-row { width:100%; text-align:left; background:#fff; border:0; border-bottom:1px solid #eef0ea; padding:13px 16px; display:flex; align-items:flex-start; gap:10px; }.request-row:hover,.request-row.active { background:#f6f8f0; }.method { font:10px 'DM Mono',monospace; color:#4b7512; background:#e9f3d5; border-radius:4px; padding:4px 5px; min-width:44px; text-align:center; }.request-meta { min-width:0; }.request-meta strong { display:block; font-size:12px; font-family:'DM Mono',monospace; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.request-meta small { color:var(--muted); font-size:10px; }.request-detail { overflow:auto; }.detail-section { border-bottom:1px solid var(--line); padding:16px 20px; }.detail-section h3 { font-size:10px; letter-spacing:1px; color:var(--muted); margin:0 0 9px; }.detail-section pre { margin:0; border-radius:6px; background:#202a26; color:#dbe7dc; font:11px/1.55 'DM Mono',monospace; padding:13px; white-space:pre-wrap; word-break:break-word; }.details-line { font:12px 'DM Mono',monospace; margin:3px 0; color:#425048; }.details-line b { color:#7d8b83; font-weight:500; }
dialog { border:0; border-radius:12px; padding:0; box-shadow:0 15px 55px #16211d40; width:min(390px, calc(100% - 32px)); }dialog::backdrop{ background:#19302673; backdrop-filter:blur(3px); } dialog form { position:relative; padding:29px; }dialog h2{ margin:0 0 24px; font-size:24px; letter-spacing:-1.2px; }dialog label { display:grid; gap:7px; color:var(--muted); font-size:12px; font-weight:700; margin-bottom:22px; }dialog input { width:100%; border:1px solid #dbe1d3; border-radius:7px; padding:11px; outline-color:#9bbb27; color:var(--ink); }dialog .primary-button{ width:100%; }.dialog-close { position:absolute; right:13px; top:9px; background:transparent; border:0; font-size:24px; color:var(--muted); }
@media(max-width:760px) { header{ padding:0 18px; } main{ grid-template-columns:1fr; }.sidebar{ border-right:0; border-bottom:1px solid var(--line); padding:15px; }.endpoint-list{ display:flex; overflow:auto; }.endpoint-item{ min-width:160px; }.workspace{ padding:28px 18px; }.request-layout{ grid-template-columns:1fr; }.request-list{ max-height:280px; border-right:0; border-bottom:1px solid var(--line); }.url-card{ grid-template-columns:1fr auto; gap:7px; }.url-card code{ grid-row:2; grid-column:1/3; }.endpoint-header h1{ font-size:27px; } }