:root{--bg: #ebe9fb;--card-bg: #ffffff;--text: #2c2c3a;--text-muted: #6b6b7f;--purple: #5b2a86;--blue: #3e6be0;--gradient: linear-gradient(90deg, var(--purple), var(--blue));--navy: #14213d;--navy-hover: #1d2f56;--radius: 16px;--shadow: 0 10px 30px rgba(60, 42, 110, .12);--ok: #2e9e5b;--warn: #c98a1c;--error: #d1453b}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text)}.app{max-width:960px;margin:0 auto;padding:32px 24px 64px}.app__header{display:flex;align-items:center;gap:20px;background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 28px;margin-bottom:24px}.app__logo{height:36px;width:auto;flex-shrink:0}.app__header-text{flex:1}.app__header-text h1{margin:0;font-size:1.4rem;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}.app__header-text p{margin:4px 0 0;color:var(--text-muted);font-size:.9rem}.status{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;padding:6px 14px;border-radius:999px;background:#f3f2fd;color:var(--text-muted);white-space:nowrap}.status__dot{width:8px;height:8px;border-radius:50%;background:currentColor}.status--connected{color:var(--ok)}.status--connecting,.status--reconnecting{color:var(--warn)}.status--disconnected{color:var(--error)}.app__url-bar{display:flex;align-items:center;gap:12px;background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 24px;margin-bottom:24px;flex-wrap:wrap}.app__url-label{color:var(--text-muted);font-size:.85rem}.app__url-value{flex:1 1 260px;min-width:0;background:#f3f2fd;padding:8px 12px;border-radius:8px;font-size:.9rem;white-space:normal;word-break:break-all}.app__url-bar button{border:none;border-radius:10px;padding:8px 16px;font-size:.85rem;font-weight:600;cursor:pointer;background:var(--navy);color:#fff;transition:background .15s ease}.app__url-bar button:hover{background:var(--navy-hover)}.app__clear{background:transparent!important;color:var(--text-muted)!important;border:1px solid #d8d6f0!important}.empty-state{text-align:center;color:var(--text-muted);padding:48px 0}.event-list{display:flex;flex-direction:column;gap:12px}.event-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.event-card__header{width:100%;display:flex;align-items:center;gap:12px;padding:14px 20px;border:none;background:transparent;cursor:pointer;font-size:.95rem;text-align:left;color:var(--text)}.method{font-weight:700;font-size:.75rem;padding:4px 10px;border-radius:6px;color:#fff;background:var(--text-muted)}.method--GET{background:#3e6be0}.method--POST{background:#2e9e5b}.method--PUT{background:#c98a1c}.event-card__path{flex:1;font-family:Cascadia Code,Consolas,monospace;color:var(--text-muted)}.event-card__time{color:var(--text-muted);font-size:.8rem}.event-card__chevron{color:var(--purple)}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;color:var(--text-muted);cursor:pointer;flex-shrink:0;transition:background .15s ease,color .15s ease}.icon-button:hover,.icon-button:focus-visible{background:#f3f2fd;color:var(--purple);outline:none}.event-card__body{padding:0 20px 20px;border-top:1px solid #f0eefc}.event-card__body h4{margin:16px 0 8px;color:var(--purple);font-size:.85rem;text-transform:uppercase;letter-spacing:.03em}.kv-table{width:100%;border-collapse:collapse;font-size:.85rem}.kv-table td{padding:4px 8px;border-bottom:1px solid #f3f2fd;vertical-align:top;word-break:break-word}.kv-table__key{color:var(--text-muted);width:220px;font-family:Cascadia Code,Consolas,monospace}.body-preview{background:#14213d;color:#e8e7fb;padding:14px;border-radius:10px;font-size:.85rem;overflow-x:auto;white-space:pre-wrap;word-break:break-word}.empty-inline{color:var(--text-muted);font-size:.85rem;margin:0}