* { box-sizing: border-box; }
/* The UA's [hidden] loses to any author display: rule — in 1.0.0 that left the empty summary and
   toolbar bars on screen before a file was opened. This guard makes `el.hidden = true` mean hidden. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px; color: #e6ecff; background: #0e1220;
}
.btn {
  background: linear-gradient(90deg, #5b8cff, #7c5cff); color: #fff; border: none;
  padding: 8px 16px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 13px;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: #cdd8f5; border: 1px solid #3a4870; }
.btn.ghost:hover { border-color: #7c5cff; color: #fff; }
.btn:focus-visible, .chip:focus-visible, .row:focus-visible, #detail .close:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid #8fb0ff; outline-offset: 2px;
}

#topbar {
  display: flex; align-items: center; gap: 18px; padding: 12px 18px;
  background: #121a30; border-bottom: 1px solid #222d4a;
}
.brand { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 9px; }
.brand img { display: block; border-radius: 5px; }
.actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.privacy { color: #6fe6ad; font-size: 12px; font-weight: 600; }

#summary { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 10px 18px; background: #0f1628; border-bottom: 1px solid #1c2742; }
.stats, .insights { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stat { background: #1a2138; border: 1px solid #2a3354; border-radius: 999px; padding: 4px 12px; font-size: 12px; color: #cdd8f5; }
/* Insight chips are buttons: each one filters the table to exactly those requests (aria-pressed). */
.chip { font: inherit; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 12px; cursor: pointer; border: 1px solid; background: transparent; }
.chip.bad { color: #ffb3b0; border-color: rgba(255,143,143,.55); background: rgba(217,83,79,.14); }
.chip.warn { color: #ffd98a; border-color: rgba(255,207,107,.5); background: rgba(255,207,107,.10); }
.chip.info { color: #a9c0ff; border-color: rgba(126,162,255,.5); background: rgba(126,162,255,.10); }
.chip.secret { color: #ffe1b3; border-color: rgba(245,158,11,.6); background: rgba(245,158,11,.14); }
.chip.zero { color: #7f8db5; border-color: #2a3354; cursor: default; }
.chip.secret:hover, .chip.bad:hover, .chip.warn:hover, .chip.info:hover { filter: brightness(1.15); }
.chip[aria-pressed="true"] { box-shadow: inset 0 0 0 1px currentColor; background: rgba(255,255,255,.10); }

#toolbar { display: flex; gap: 10px; align-items: center; padding: 10px 18px; background: #0f1628; border-bottom: 1px solid #1c2742; }
#toolbar input, #toolbar select {
  background: #1a2138; border: 1px solid #2a3354; color: #e6ecff; border-radius: 7px; padding: 7px 10px; font-size: 13px;
}
#search { flex: 1; min-width: 120px; }
.count { color: #8493bd; font-size: 12px; white-space: nowrap; }

#main { flex: 1; min-height: 0; position: relative; }

#drop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* During a drag, show the drop zone as a full overlay even after a file is loaded */
body.dragging #drop { display: flex !important; position: fixed; inset: 0; z-index: 60; background: rgba(14, 18, 32, .97); }
body.dragging .drop-inner { border-color: #5b8cff; background: #14203f; }
.drop-inner {
  border: 2px dashed #2c3a60; border-radius: 16px; padding: 48px 60px; text-align: center;
  transition: .15s; max-width: 560px;
}
.drop-title { font-size: 22px; font-weight: 700; }
.drop-sub { color: #aebbdf; margin-top: 10px; }
.drop-hint { color: #6b7aa3; margin-top: 16px; font-size: 12px; }

#viewer { position: absolute; inset: 0; display: flex; min-height: 0; }
#tableWrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#thead, .row { display: flex; align-items: center; gap: 0; padding: 0 14px; }
#thead {
  height: 32px; background: #131b30; border-bottom: 1px solid #243054;
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #8493bd; font-weight: 700;
}
/* Header cells are buttons (sortable). Reset only what a button brings — `all: unset` would also wipe the
   column widths (.c-name flex:1, .c-status 56px…) because this selector outranks the .c-* rules. */
#thead .sort { background: none; border: 0; margin: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; cursor: pointer; height: 100%; display: flex; align-items: center; gap: 4px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; text-align: left; }
#thead .c-size.sort, #thead .c-time.sort { justify-content: flex-end; }
#thead .sort:hover { color: #cdd8f5; }
#thead .sort:focus-visible { outline: 2px solid #8fb0ff; outline-offset: -2px; }
#thead .sort[data-dir]:not([data-dir=""])::after { content: attr(data-dir); font-size: 9px; color: #a9c0ff; }
#rows { flex: 1; min-height: 0; overflow: auto; position: relative; }
#spacer { position: absolute; left: 0; top: 0; width: 1px; }
.row { position: absolute; left: 0; right: 0; height: 30px; border-bottom: 1px solid #161f38; cursor: pointer; }
.row:hover { background: #15203c; }
.row.sel { background: #1b2b50; }

.c-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; }
.c-status { width: 56px; }
.c-method { width: 64px; color: #aebbdf; }
.c-type { width: 70px; color: #aebbdf; }
.c-size { width: 82px; text-align: right; color: #aebbdf; padding-right: 12px; }
.c-time { width: 78px; text-align: right; color: #aebbdf; padding-right: 12px; }
.c-wf { width: 220px; position: relative; height: 100%; }
.wf-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 10px; border-radius: 3px; background: linear-gradient(90deg, #5b8cff, #7c5cff); }
.wf-bar.slow { background: linear-gradient(90deg, #f59e0b, #ffcf6b); }
.wf-bar.bad { background: #ff8f8f; }
.hot { color: #ffcf6b !important; font-weight: 700; }

.s-2 { color: #6fe6ad; } .s-3 { color: #7ea2ff; } .s-4 { color: #ffcf6b; } .s-5 { color: #ff8f8f; } .s-x { color: #ff8f8f; }

#detail {
  width: 440px; flex-shrink: 0; border-left: 1px solid #243054; background: #0f1628;
  overflow: auto; padding: 14px 16px; position: relative;
}
#detail .close { position: absolute; top: 10px; right: 12px; background: #1a2138; border: 1px solid #2a3354; color: #cdd8f5; border-radius: 6px; cursor: pointer; padding: 2px 8px; }
.d-url { font-size: 12px; color: #aebbdf; word-break: break-all; padding-right: 30px; margin-bottom: 10px; }
.d-sec { margin-top: 16px; }
.d-sec h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #7ea2ff; }
.kv { display: flex; gap: 10px; padding: 3px 0; border-bottom: 1px solid #161f38; font-size: 12px; }
.kv .k { color: #8493bd; flex: 0 0 38%; word-break: break-word; }
.kv .v { color: #dfe7ff; flex: 1; word-break: break-word; }
pre.body { background: #0a0f1d; border: 1px solid #1c2742; border-radius: 8px; padding: 10px; font-size: 11.5px; color: #cfe0ff; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; font-family: Consolas, monospace; }

.err { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: #4a1f1f; border: 1px solid #d9534f; color: #ffd9d7; padding: 10px 18px; border-radius: 10px; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }

/* ---------- clean & save dialog ---------- */
dialog { background: #121a30; color: #e6ecff; border: 1px solid #2a3354; border-radius: 14px; padding: 22px 24px; width: min(560px, 92vw); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
dialog::backdrop { background: rgba(5, 8, 16, .7); }
dialog h2 { margin: 0 0 8px; font-size: 18px; }
.muted { color: #aebbdf; margin: 6px 0; line-height: 1.5; }
.small { font-size: 12px; }
.opts { display: grid; gap: 8px; margin: 14px 0; }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid #2a3354; border-radius: 10px; background: #0f1628; cursor: pointer; line-height: 1.4; }
.opt input { margin-top: 2px; accent-color: #7c5cff; }
.opt:has(input:disabled) { opacity: .55; cursor: default; }
.done { background: rgba(111,230,173,.12); border: 1px solid rgba(111,230,173,.45); color: #b9f5d8; border-radius: 10px; padding: 10px 12px; }
.done.bad { background: rgba(217,83,79,.16); border-color: rgba(255,143,143,.55); color: #ffd9d7; }
#rows:focus-visible { outline: 2px solid #8fb0ff; outline-offset: -2px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.btn:disabled { opacity: .45; cursor: default; filter: none; }

/* ---------- 1.1: report button, detail actions, previews, timing bar, toast, loading ---------- */
.small-btn { padding: 5px 12px; font-size: 12px; margin-left: auto; }
.btn.mini { padding: 4px 10px; font-size: 12px; font-weight: 600; border-radius: 7px; }
.d-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.d-sec h3 { display: flex; align-items: center; gap: 10px; }
.tog { margin-left: auto; text-transform: none; letter-spacing: 0; }
img.preview { display: block; max-width: 100%; max-height: 360px; background: repeating-conic-gradient(#1a2138 0 25%, #0f1628 0 50%) 0 0 / 16px 16px; border: 1px solid #1c2742; border-radius: 8px; }
.tbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: 2px 0 8px; background: #161f38; }
.tbar span { display: block; height: 100%; min-width: 2px; }
.tlegend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; color: #aebbdf; margin-bottom: 8px; }
.tl::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; background: currentColor; }
.tb-blocked { background: #6b7aa3; color: #8f9cc4; } .tb-dns { background: #2dd4bf; color: #2dd4bf; } .tb-connect { background: #f59e0b; color: #f5b041; }
.tb-send { background: #a78bfa; color: #b9a3ff; } .tb-wait { background: #5b8cff; color: #8fb0ff; } .tb-receive { background: #6fe6ad; color: #6fe6ad; }
.tl { background: none !important; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: #14321f; border: 1px solid rgba(111,230,173,.55); color: #c9f7df; padding: 9px 16px; border-radius: 10px; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.4); z-index: 80; }
.toast.bad { background: #4a1f1f; border-color: #d9534f; color: #ffd9d7; }
.loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(14,18,32,.86); color: #cdd8f5; font-size: 15px; font-weight: 600; z-index: 70; }
.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
#toolbar select { max-width: 220px; }