doru 1.0.0

package/dist/ui/styles.css

@@ -0,0 +1,1293 @@
+:root {
+  /* base surfaces */
+  --bg: #1a1a1f;
+  --bg-alt: #202025;
+  --surface: #26262c;
+  --surface-2: #2e2e36;
+
+  /* borders */
+  --border: #3a3a44;
+  --border-hover: #4a4a56;
+
+  /* text hierarchy */
+  --fg: #f5f5f7;
+  --fg-2: #d0d0d8;
+  --muted: #9090a0;
+
+  /* accent - amber/orange */
+  --accent: #f59e0b;
+  --accent-dim: rgba(245, 158, 11, 0.18);
+
+  /* semantic colors */
+  --green: #34d399;
+  --yellow: #fbbf24;
+  --red: #f87171;
+  --blue: #60a5fa;
+
+  /* status icon colors (for CSS var fallbacks) */
+  --color-success: #22c55e;
+  --color-redirect: #3b82f6;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  --color-muted: #6b7280;
+
+  /* derived */
+  --pill: #3a3a44;
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+
+  /* typography */
+  --font-mono: "SF Mono", "Fira Code", "JetBrains Mono", ui-monospace, monospace;
+  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+/* light theme */
+[data-theme="light"] {
+  /* base surfaces */
+  --bg: #f5f5f7;
+  --bg-alt: #eeeef0;
+  --surface: #ffffff;
+  --surface-2: #f0f0f2;
+
+  /* borders */
+  --border: #d4d4d8;
+  --border-hover: #a1a1aa;
+
+  /* text hierarchy */
+  --fg: #18181b;
+  --fg-2: #3f3f46;
+  --muted: #71717a;
+
+  /* accent - darker amber for light bg */
+  --accent: #d97706;
+  --accent-dim: rgba(217, 119, 6, 0.15);
+
+  /* semantic colors - darker for light bg */
+  --green: #16a34a;
+  --yellow: #ca8a04;
+  --red: #dc2626;
+  --blue: #2563eb;
+
+  /* status icon colors - adjusted for light bg */
+  --color-success: #16a34a;
+  --color-redirect: #2563eb;
+  --color-warning: #d97706;
+  --color-error: #dc2626;
+  --color-muted: #71717a;
+
+  /* derived */
+  --pill: #e4e4e7;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--fg);
+  font: 12px/1.5 var(--font-sans);
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  display: grid;
+  grid-template-rows: 40px 1fr 24px;
+}
+
+/* scrollbars */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--border-hover);
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* header bar */
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+}
+
+header .brand {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-weight: 500;
+  font-size: 13px;
+  letter-spacing: -0.01em;
+  color: var(--fg-2);
+}
+
+.badge {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  background: var(--accent);
+  color: var(--bg);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.brand-name {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--fg);
+}
+
+.input,
+.select {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--fg);
+  padding: 5px 8px;
+  border-radius: var(--radius);
+  outline: none;
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.input:focus,
+.select:focus {
+  border-color: var(--border-hover);
+  background: var(--surface-2);
+}
+
+.input::placeholder {
+  color: var(--muted);
+}
+
+.btn {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--fg-2);
+  border-radius: var(--radius);
+  padding: 5px 10px;
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  transition: all 0.1s ease;
+}
+
+.btn:hover {
+  background: var(--surface-2);
+  border-color: var(--border-hover);
+  color: var(--fg);
+}
+
+.btn.active {
+  background: var(--accent-dim);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.theme-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 8px;
+}
+
+.theme-btn svg {
+  display: block;
+}
+
+#stats {
+  font-family: var(--font-mono);
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* main layout */
+main {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+}
+
+/* list panel */
+#list {
+  width: 100%;
+  height: 100%;
+  border-right: 1px solid var(--border);
+  background: var(--bg);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+}
+
+/* resize handle */
+.resize-handle {
+  width: 3px;
+  background: var(--border) !important;
+  cursor: col-resize;
+  transition: background 0.1s ease;
+}
+
+.resize-handle:hover,
+.resize-handle:active,
+.resize-handle[data-resize-handle-active] {
+  background: var(--accent) !important;
+}
+
+/* filter bar in list panel */
+#filterBar {
+  display: flex;
+  gap: 6px;
+  padding: 8px;
+  background: var(--bg-alt);
+  border-bottom: 1px solid var(--border);
+  flex-wrap: wrap;
+}
+
+#filterBar .input {
+  flex: 1;
+  min-width: 120px;
+}
+
+#filterBar .select {
+  min-width: 80px;
+}
+
+#listHeader {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding: 4px 8px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--muted);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  background: var(--bg);
+  z-index: 1;
+}
+
+#listHeader > :nth-child(1) {
+  flex: 0 0 52px;
+}
+#listHeader > :nth-child(2) {
+  flex: 0 0 48px;
+}
+#listHeader > :nth-child(3) {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+#listHeader > :nth-child(4) {
+  flex: 0 0 60px;
+  text-align: right;
+}
+#listHeader > :nth-child(5) {
+  flex: 0 0 50px;
+  text-align: right;
+}
+#listHeader > :nth-child(6) {
+  flex: 0 0 70px;
+  text-align: right;
+}
+
+#listBody {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding: 5px 8px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  min-width: 0;
+  transition: background 0.05s ease;
+}
+
+.row > :nth-child(1) {
+  flex: 0 0 52px;
+}
+.row > :nth-child(2) {
+  flex: 0 0 48px;
+}
+.row > :nth-child(3) {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.row > :nth-child(4) {
+  flex: 0 0 60px;
+  text-align: right;
+}
+.row > :nth-child(5) {
+  flex: 0 0 50px;
+  text-align: right;
+}
+.row > :nth-child(6) {
+  flex: 0 0 70px;
+  text-align: right;
+}
+
+.row:hover {
+  background: var(--surface);
+}
+
+.row.sel {
+  background: var(--accent-dim);
+  border-left: 2px solid var(--accent);
+  padding-left: 6px;
+}
+
+/* utilities */
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mono {
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.pill {
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 10px;
+  background: var(--pill);
+  color: #fff;
+  display: inline-block;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.status {
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 10px;
+  display: inline-block;
+  text-align: center;
+}
+
+.s-2 {
+  background: rgba(52, 211, 153, 0.2);
+  color: #6ee7b7;
+}
+.s-3 {
+  background: rgba(251, 191, 36, 0.2);
+  color: #fcd34d;
+}
+.s-4 {
+  background: rgba(251, 146, 60, 0.2);
+  color: #fdba74;
+}
+.s-5 {
+  background: rgba(248, 113, 113, 0.2);
+  color: #fca5a5;
+}
+
+/* light theme status badges */
+[data-theme="light"] .s-2 {
+  background: rgba(22, 163, 74, 0.15);
+  color: #15803d;
+}
+[data-theme="light"] .s-3 {
+  background: rgba(202, 138, 4, 0.15);
+  color: #a16207;
+}
+[data-theme="light"] .s-4 {
+  background: rgba(234, 88, 12, 0.15);
+  color: #c2410c;
+}
+[data-theme="light"] .s-5 {
+  background: rgba(220, 38, 38, 0.15);
+  color: #b91c1c;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.dot.ok {
+  background: var(--green);
+}
+.dot.warn {
+  background: var(--yellow);
+}
+.dot.err {
+  background: var(--red);
+}
+
+/* detail panel */
+#detail {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  background: var(--bg);
+  overflow: hidden;
+}
+
+#detail > .tabs {
+  flex-shrink: 0;
+}
+
+#detail > .tab,
+#detail > div:last-child {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+#summary {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  gap: 10px;
+  align-items: center;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-alt);
+}
+
+#summary .url {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fg);
+}
+
+#summary .meta {
+  display: flex;
+  gap: 12px;
+  font-family: var(--font-mono);
+  color: var(--muted);
+  font-size: 10px;
+}
+
+/* tabs */
+.tabs {
+  display: flex;
+  gap: 0;
+  padding: 0 8px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-alt);
+  justify-content: flex-start;
+  align-items: stretch;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+
+.tab-btn {
+  padding: 8px 12px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  cursor: pointer;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  flex: none;
+  white-space: nowrap;
+  transition: all 0.1s ease;
+}
+
+.tab-btn:hover {
+  color: var(--fg-2);
+}
+
+.tab-btn.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+.tab-content {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.tab {
+  display: none;
+  height: 100%;
+  width: 100%;
+}
+
+.tab.active {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  width: 100%;
+}
+
+/* react-resizable-panels overrides */
+[data-group] {
+  height: 100% !important;
+  width: 100% !important;
+}
+
+[data-panel] {
+  overflow: hidden;
+}
+
+[data-panel] > div {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+[data-panel] .panel {
+  flex: 1 1 0;
+  min-height: 0;
+  width: 100%;
+}
+
+.panel {
+  border: none;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+
+.panel .title {
+  flex: 0 0 auto;
+  padding: 6px 10px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--muted);
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.panel .body {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: auto;
+  background: var(--surface);
+}
+
+/* vertical resize handle for detail panel columns */
+.resize-handle-v {
+  height: 3px;
+  background: var(--border) !important;
+  cursor: row-resize;
+  transition: background 0.1s ease;
+}
+
+.resize-handle-v:hover,
+.resize-handle-v:active,
+.resize-handle-v[data-resize-handle-active] {
+  background: var(--accent) !important;
+}
+
+.panel .body.code-wrap {
+  display: flex;
+  flex-direction: column;
+}
+
+.panel .body.code-wrap > pre.code,
+.panel .body.code-wrap > iframe.preview,
+.panel .body.code-wrap > .img-preview {
+  flex: 1 1 0;
+  min-height: 0;
+  width: 100%;
+}
+
+pre.code {
+  width: 100%;
+}
+
+/* key-value grid */
+.kv {
+  display: grid;
+  grid-template-columns: 160px 1fr;
+  border-bottom: 1px solid var(--border);
+}
+
+.kv div {
+  padding: 6px 10px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.kv .k {
+  color: var(--muted);
+  background: var(--surface-2);
+}
+
+.kv .v {
+  color: var(--fg-2);
+  word-break: break-all;
+}
+
+.empty {
+  color: var(--muted);
+  padding: 20px;
+  text-align: center;
+  font-size: 11px;
+}
+
+.section-label {
+  padding: 6px 10px;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--muted);
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--border);
+}
+
+/* code and preview */
+.code-wrap {
+  padding: 0;
+}
+
+pre.code {
+  margin: 0;
+  padding: 10px;
+  overflow: auto;
+  white-space: pre;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.6;
+  width: 100%;
+  color: var(--fg-2);
+}
+
+.controls {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.panel .title .controls-slot {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.panel .title .controls-slot .controls {
+  display: contents;
+}
+
+.controls .btn {
+  padding: 3px 6px;
+  font-size: 10px;
+}
+
+iframe.preview {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: white;
+}
+
+.img-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.img-preview img {
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: var(--radius);
+}
+
+/* footer */
+footer {
+  padding: 0 12px;
+  border-top: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* view */
+.view-switcher {
+  display: flex;
+  gap: 2px;
+  background: var(--surface);
+  padding: 2px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+}
+
+.view-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 11px;
+  font-family: var(--font-sans);
+  transition: all 0.1s ease;
+}
+
+.view-btn:hover {
+  color: var(--fg);
+  background: var(--surface-2);
+}
+
+.view-btn.active {
+  background: var(--accent-dim);
+  color: var(--accent);
+}
+
+.view-btn svg {
+  opacity: 0.7;
+}
+
+.view-btn.active svg {
+  opacity: 1;
+}
+
+/* sortable headers */
+.sortable {
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.1s ease;
+}
+
+.sortable:hover {
+  color: var(--fg-2);
+}
+
+.sortable.active {
+  color: var(--accent);
+}
+
+/* status cell with icon */
+.status-cell {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.status-icon {
+  flex-shrink: 0;
+}
+
+/* copy as  cURL button */
+.copy-curl-btn {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--fg-2);
+  border-radius: 4px;
+  padding: 3px 8px;
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  transition: all 0.1s ease;
+  margin-left: 8px;
+}
+
+.copy-curl-btn:hover {
+  background: var(--surface-2);
+  border-color: var(--border-hover);
+}
+
+.copy-curl-btn.copied {
+  background: rgba(52, 211, 153, 0.2);
+  border-color: var(--green);
+  color: var(--green);
+}
+
+.copy-curl-btn.error {
+  background: rgba(248, 113, 113, 0.2);
+  border-color: var(--red);
+  color: var(--red);
+}
+
+/* skeleton */
+.skeleton {
+  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.skeleton-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding: 10px 8px;
+  border-bottom: 1px solid var(--border);
+}
+
+.skeleton-row > * {
+  flex: 1;
+}
+
+.skeleton-list {
+  padding: 0;
+}
+
+/* empty state */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  text-align: center;
+  height: 100%;
+  min-height: 200px;
+}
+
+.empty-state-icon {
+  color: var(--muted);
+  opacity: 0.5;
+  margin-bottom: 16px;
+}
+
+.empty-state-title {
+  margin: 0 0 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fg);
+}
+
+.empty-state-description {
+  margin: 0 0 16px;
+  font-size: 12px;
+  color: var(--muted);
+  max-width: 280px;
+}
+
+.empty-state-action {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--fg-2);
+  border-radius: 4px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.1s ease;
+}
+
+.empty-state-action:hover {
+  background: var(--surface-2);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* error boundary */
+.error-boundary {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  text-align: center;
+  height: 100%;
+}
+
+.error-boundary-icon {
+  color: var(--red);
+  opacity: 0.7;
+  margin-bottom: 16px;
+}
+
+.error-boundary-title {
+  margin: 0 0 8px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--fg);
+}
+
+.error-boundary-message {
+  margin: 0 0 16px;
+  font-size: 12px;
+  color: var(--muted);
+  font-family: var(--font-mono);
+  max-width: 400px;
+  word-break: break-word;
+}
+
+.error-boundary-retry {
+  border: 1px solid var(--red);
+  background: rgba(248, 113, 113, 0.1);
+  color: var(--red);
+  border-radius: 4px;
+  padding: 8px 16px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.1s ease;
+}
+
+.error-boundary-retry:hover {
+  background: rgba(248, 113, 113, 0.2);
+}
+
+/* waterfall */
+.waterfall-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background: var(--bg);
+}
+
+.waterfall-header {
+  display: flex;
+  padding: 8px 12px;
+  background: var(--bg-alt);
+  border-bottom: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--muted);
+}
+
+.waterfall-url-col {
+  flex: 0 0 280px;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.waterfall-timeline-col {
+  flex: 1;
+  min-width: 0;
+}
+
+.waterfall-time-markers {
+  display: flex;
+  justify-content: space-between;
+}
+
+.waterfall-time-marker {
+  font-size: 9px;
+}
+
+.waterfall-body {
+  flex: 1;
+  overflow: auto;
+}
+
+.waterfall-row {
+  display: flex;
+  align-items: center;
+  padding: 4px 12px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.05s ease;
+}
+
+.waterfall-row:hover {
+  background: var(--surface);
+}
+
+.waterfall-row.selected {
+  background: var(--accent-dim);
+}
+
+.waterfall-method {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  flex-shrink: 0;
+  width: 40px;
+}
+
+.waterfall-url {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.waterfall-bar-container {
+  position: relative;
+  height: 16px;
+  width: 100%;
+}
+
+.waterfall-bar {
+  position: absolute;
+  top: 4px;
+  height: 8px;
+  border-radius: 2px;
+  min-width: 2px;
+  opacity: 0.85;
+  transition: opacity 0.1s ease;
+}
+
+.waterfall-row:hover .waterfall-bar {
+  opacity: 1;
+}
+
+/* analytics */
+.analytics-dashboard {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  padding: 16px;
+  gap: 16px;
+  background: var(--bg);
+}
+
+.analytics-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+}
+
+.stat-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+}
+
+.stat-value {
+  font-family: var(--font-mono);
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--fg);
+  margin-bottom: 4px;
+}
+
+.stat-label {
+  font-size: 11px;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.stat-subvalue {
+  font-size: 10px;
+  color: var(--red);
+  margin-top: 4px;
+}
+
+.analytics-section {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.analytics-section h3 {
+  margin: 0 0 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--fg);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.breakdown-bar {
+  display: flex;
+  height: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--surface-2);
+  margin-bottom: 8px;
+}
+
+.breakdown-segment {
+  transition: width 0.3s ease;
+}
+
+.breakdown-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.analytics-tables {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 16px;
+}
+
+.analytics-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 11px;
+}
+
+.analytics-table th {
+  text-align: left;
+  padding: 8px;
+  font-weight: 500;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid var(--border);
+}
+
+.analytics-table td {
+  padding: 8px;
+  border-bottom: 1px solid var(--border);
+}
+
+.analytics-table tr.clickable {
+  cursor: pointer;
+  transition: background 0.05s ease;
+}
+
+.analytics-table tr.clickable:hover {
+  background: var(--surface-2);
+}
+
+/* main view */
+.main-view-full {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* summary section */
+#sumUrl {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  overflow: hidden;
+}
+
+#sumUrl .method {
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 600;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+#sumUrl .url {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#sumMeta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--muted);
+}
+
+#sumStatus {
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+}