.picker[data-v-4a4594aa] { position: relative; font-weight: 400;
}
.picker-trigger[data-v-4a4594aa] { position: relative;
}
.picker-trigger input[data-v-4a4594aa] { padding-right: 2rem;
}
.picker-clear[data-v-4a4594aa] { position: absolute; top: .35rem; right: .3rem; padding: .15rem .45rem; color: #536174; background: transparent; font-size: 1.15rem;
}
.picker-options[data-v-4a4594aa] { position: absolute; z-index: 20; top: calc(100% + .25rem); left: 0; width: max(100%, 22rem); max-height: 22rem; overflow-y: auto; border: 1px solid #c8d0dc; border-radius: 6px; padding: .3rem; background: white; box-shadow: 0 8px 24px #22304726;
}
.picker-option[data-v-4a4594aa] { display: grid; width: 100%; padding: .45rem .55rem; color: #172033; background: white; text-align: left;
}
.picker-option[data-v-4a4594aa]:hover, .picker-option.selected[data-v-4a4594aa] { background: #eaf1ff;
}
.picker-option small[data-v-4a4594aa] { overflow: hidden; color: #697589; text-overflow: ellipsis; white-space: nowrap;
}
.picker-option.deactivated span[data-v-4a4594aa] { text-decoration: line-through;
}
.picker-options p[data-v-4a4594aa] { margin: .5rem; color: #697589;
}
:root {
  color: #172033;
  background: #f3f6fa;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea, select { font: inherit; }
button { border: 0; border-radius: 7px; padding: .6rem .9rem; color: white; background: #2459c4; cursor: pointer; }
button.secondary { background: #536174; }
button.danger { background: #a83535; }
button.active { outline: 3px solid #f1b84b; }
button:disabled { cursor: not-allowed; opacity: .5; }
input, textarea, select { width: 100%; border: 1px solid #c8d0dc; border-radius: 6px; padding: .55rem; background: white; }
label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 650; }
label.inline { display: flex; align-items: center; gap: .5rem; }
label.inline input { width: auto; }
header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0 .8rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; }
.eyebrow { margin-bottom: .25rem; color: #2459c4; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.app-shell { width: min(1500px, 96vw); margin: auto; padding-bottom: 4rem; }
.panel, .record, .stats, .metrics { border: 1px solid #dbe1e9; border-radius: 10px; background: white; box-shadow: 0 2px 8px #2230470d; }
.panel { margin: .8rem 0; padding: 1rem; }
.auth-panel { max-width: 480px; margin: 5rem auto; text-align: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: .7rem; }
.grid > label:first-child { grid-column: span 2; }
.grid.compact { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
.actions { display: flex; gap: .55rem; margin-top: .8rem; }
.actions.wrap { flex-wrap: wrap; }
.actions select { width: auto; }
.status-select { position: relative; margin-top: 0; font-weight: 400; }
.status-select summary { min-height: 2.3rem; border: 1px solid #c8d0dc; border-radius: 6px; padding: .55rem; background: white; cursor: pointer; }
.status-options { position: absolute; z-index: 10; top: calc(100% + .25rem); left: 0; width: max-content; min-width: 100%; max-height: 22rem; overflow-y: auto; border: 1px solid #c8d0dc; border-radius: 6px; padding: .6rem; background: white; box-shadow: 0 8px 24px #22304726; }
.status-options label { padding: .3rem .2rem; white-space: nowrap; font-weight: 500; }
.stats, .metrics { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: .8rem 1rem; }
.message { min-height: 1.4rem; margin: .5rem 0; color: #3d4a60; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: .8rem; }
.record { min-width: 0; padding: .7rem; overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.record:hover { border-color: #aab7ca; box-shadow: 0 3px 10px #2230471c; }
.record.expanded { grid-column: 1 / -1; cursor: default; }
.record-head { display: grid; grid-template-columns: auto 64px minmax(0, 1fr) auto; gap: .6rem; align-items: start; }
.record-head input { width: auto; margin-top: .35rem; }
.record-head h3 { margin-bottom: .15rem; overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.record-head p, .muted { margin-bottom: .1rem; overflow: hidden; color: #697589; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.event-thumb { width: 64px; height: 58px; border-radius: 6px; object-fit: cover; background: #eef2f7; }
.event-thumb-placeholder { display: grid; place-items: center; color: #8490a3; font-size: .65rem; text-align: center; }
.description-preview { display: -webkit-box; min-height: 1.1rem; margin: .45rem 0 .35rem; overflow: hidden; color: #3d4a60; font-size: .82rem; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.quality-signals { display: flex; min-height: 1.45rem; gap: .25rem; overflow: hidden; white-space: nowrap; }
.quality-signals span { border-radius: 999px; padding: .15rem .4rem; background: #eef2f7; color: #566277; font-size: .66rem; }
.record-footer { display: flex; justify-content: space-between; gap: .5rem; margin-top: .35rem; overflow: hidden; color: #768297; font-size: .7rem; white-space: nowrap; }
.prediction-summary { margin-top: .35rem; overflow: hidden; border-radius: 4px; padding: .25rem .4rem; background: #e4f2e9; color: #17683a; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.prediction-summary.mismatch { background: #f7dcdc; color: #922d2d; }
.compact-actions { margin-top: .45rem; }
.compact-actions button { padding: .3rem .55rem; font-size: .75rem; }
.badge { border-radius: 999px; padding: .25rem .55rem; background: #e6eaf0; font-size: .75rem; font-weight: 800; }
.badge.event { background: #d8f2e3; color: #17683a; }
.badge.spam { background: #f7dcdc; color: #922d2d; }
.expanded-content { margin-top: .8rem; border-top: 1px solid #e1e6ed; padding-top: .8rem; cursor: auto; }
.expanded-content h4 { margin: 0 0 .35rem; }
.expanded-content section { margin-bottom: 1rem; }
.full-description { white-space: pre-wrap; }
.submission-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 0 0 1rem; }
.submission-details div { min-width: 0; padding: .5rem; border-radius: 6px; background: #f5f7fa; }
.submission-details dt { color: #697589; font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.submission-details dd { margin: .15rem 0 0; overflow-wrap: anywhere; font-size: .82rem; }
.predictions { margin: .8rem 0; padding: .7rem; border-radius: 7px; background: #f1f5fb; font-size: .85rem; }
details { margin-top: .7rem; }
pre { max-height: 360px; overflow: auto; padding: .7rem; border-radius: 6px; background: #101827; color: #e5edf8; font-size: .72rem; }
@media (max-width: 900px) {
  .grid, .grid.compact, .tool-grid { grid-template-columns: 1fr 1fr; }
  .records { grid-template-columns: 1fr; }
  .submission-details { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .grid, .grid.compact, .tool-grid, .submission-details { grid-template-columns: 1fr; }
  .grid > label:first-child { grid-column: auto; }
  .record-head { grid-template-columns: auto 52px minmax(0, 1fr); }
  .record-head .badge { grid-column: 3; }
  .event-thumb { width: 52px; height: 48px; }
}