* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(circle at top right, #eff6ff 0%, #f8fafc 45%, #f1f5f9 100%);
  color: #1f2937;
  line-height: 1.5;
  min-height: 100vh;
}

.container {
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
}

h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 16px;
  color: #111827;
  text-align: left;
}

h2 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 12px;
  color: #111827;
}

.panel {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid #dbeafe;
  box-shadow: 0 10px 30px rgba(30, 64, 175, 0.07);
}

.workspace {
  position: absolute;
  top: 20px;
  left: 20px;
  bottom: 20px;
  right: 20px;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 16px;
  min-height: calc(100vh - 92px);
}

.left-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}

.prompt-panel {
  position: sticky;
  z-index: 5;
}

.prompt-panel label[for="systemPromptInput"] {
  margin-top: 10px;
}

.model-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.model-panel h2 {
  margin-bottom: 10px;
}

.result-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.result-header {
  margin-bottom: 12px;
}

.result-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.result-header-top h2 {
  margin-bottom: 0;
}

.result-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #dbeafe;
  background: #f8fbff;
}

.result-sort label {
  margin-bottom: 0;
  font-size: 13px;
  color: #475569;
}

.result-sort select {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  color: #0f172a;
  background: #ffffff;
  cursor: pointer;
}

.result-sort select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
}

textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 14px;
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #ffffff;
}

textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

button {
  margin-top: 12px;
  border: none;
  border-radius: 12px;
  padding: 13px 20px;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
  width: 100%;
}

button:hover:not(:disabled) {
  filter: brightness(1.06);
}

button:active:not(:disabled) {
  transform: scale(0.98);
}

button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  min-height: 0;
}

.model-checkbox-item {
  display: flex;
  align-items: flex-start;
  padding: 9px 10px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: #f9fafb;
}

.model-checkbox-item:hover {
  border-color: #d1d5db;
  background: #f3f4f6;
}

.model-checkbox-item:has(input:checked) {
  border-color: #3b82f6;
  background: #eff6ff;
}

.model-checkbox-item input {
  margin-top: 2px;
  margin-right: 10px;
  width: 16px;
  height: 16px;
  accent-color: #3b82f6;
  cursor: pointer;
}

.model-info {
  display: flex;
  flex-direction: column;
}

.model-info strong {
  font-size: 13px;
  color: #111827;
  margin-bottom: 4px;
}

.model-type {
  font-size: 11px;
  color: #6b7280;
  background: #e5e7eb;
  padding: 2px 7px;
  border-radius: 999px;
  display: inline-block;
  width: fit-content;
}

.result-strip {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 2px;
  scroll-snap-type: x proximity;
}

.result-strip::-webkit-scrollbar {
  height: 10px;
}

.result-strip::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #bfdbfe;
}

.card {
  flex: 0 0 min(420px, calc(100vw - 470px));
  min-width: 320px;
  height: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

.result-card {
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.result-card:hover {
  transform: translateY(-2px);
  border-color: #bfdbfe;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.08);
}

.card h3 {
  margin: 0 0 8px 0;
  font-size: 17px;
  color: #111827;
}

.status-success {
  color: #10b981;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}

.status-failed {
  color: #ef4444;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}

.metric {
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 6px;
}

.card-tip {
  margin-top: 12px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  font-size: 13px;
  color: #334155;
  margin-top: 12px;
  flex-grow: 1;
  max-height: none;
  overflow-y: auto;
  line-height: 1.6;
}

.loading-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #6b7280;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 0;
  font-size: 13px;
}

.summary-stats span {
  color: #4b5563;
}

.summary-stats strong {
  color: #111827;
}

.markdown-body {
  margin-top: 12px;
  color: #1f2937;
  font-size: 13px;
  line-height: 1.6;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}

.markdown-body h3,
.markdown-body h4,
.markdown-body h5 {
  margin: 14px 0 8px;
  color: #0f172a;
}

.markdown-body p {
  margin: 8px 0;
}

.markdown-body ul {
  margin: 8px 0;
  padding-left: 20px;
}

.markdown-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  background: #eef2ff;
  color: #3730a3;
  border-radius: 6px;
  padding: 2px 6px;
}

.markdown-pre {
  margin: 10px 0;
}

.markdown-pre code {
  display: block;
  background: #0f172a;
  color: #f8fafc;
  border-radius: 10px;
  padding: 12px;
  overflow-x: auto;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.hidden {
  display: none;
}

.modal {
  width: min(1080px, 100%);
  max-height: calc(100vh - 40px);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.icon-btn {
  width: auto;
  margin: 0;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 14px;
}

.modal-body {
  overflow-y: auto;
  padding: 18px 20px 22px;
  display: grid;
  gap: 14px;
}

.trace-step {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  background: #f8fafc;
}

.trace-step-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.trace-block h6 {
  margin: 8px 0;
  font-size: 12px;
  color: #334155;
}

.trace-block p {
  margin: 6px 0 0;
  font-size: 13px;
  color: #64748b;
}

.trace-tool {
  border-top: 1px dashed #cbd5e1;
  padding-top: 10px;
  margin-top: 10px;
}

.trace-tool-title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

@media (max-width: 768px) {
  .container {
    padding: 12px;
  }

  h1 {
    text-align: center;
    font-size: 22px;
  }

  .workspace {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .left-column {
    grid-template-rows: auto auto;
  }

  .prompt-panel {
    position: static;
  }

  .panel {
    padding: 16px;
    border-radius: 12px;
  }

  .result-panel {
    min-height: 62vh;
  }

  .result-header-top {
    flex-direction: column;
    align-items: stretch;
  }

  .result-sort {
    justify-content: space-between;
  }

  .result-strip {
    gap: 10px;
  }

  .card {
    flex-basis: calc(100vw - 48px);
    min-width: calc(100vw - 48px);
  }

  .summary-stats {
    gap: 6px;
  }
}

@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.bg-ani {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #dbccf0;
    overflow: hidden;
    position: fixed;
}

.bg-ani span.bg-el {
    width: 41vmin;
    height: 41vmin;
    border-radius: 41vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 17;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.bg-ani span.bg-el:nth-child(0) {
    color: #ff6190;
    top: 72%;
    left: 57%;
    animation-duration: 323s;
    animation-delay: -131s;
    transform-origin: 13vw -24vh;
    box-shadow: -82vmin 0 10.673806404122152vmin currentColor;
}
.bg-ani span.bg-el:nth-child(1) {
    color: #ff6190;
    top: 18%;
    left: 95%;
    animation-duration: 107s;
    animation-delay: -95s;
    transform-origin: -22vw 3vh;
    box-shadow: -82vmin 0 10.493212731232873vmin currentColor;
}
.bg-ani span.bg-el:nth-child(2) {
    color: #ffe5e5;
    top: 43%;
    left: 78%;
    animation-duration: 247s;
    animation-delay: -83s;
    transform-origin: 25vw 16vh;
    box-shadow: -82vmin 0 11.2437528582127vmin currentColor;
}
.bg-ani span.bg-el:nth-child(3) {
    color: #a9d6c8;
    top: 100%;
    left: 85%;
    animation-duration: 228s;
    animation-delay: -293s;
    transform-origin: -3vw -17vh;
    box-shadow: -82vmin 0 10.640452717640265vmin currentColor;
}
.bg-ani span.bg-el:nth-child(4) {
    color: #a9d6c8;
    top: 79%;
    left: 19%;
    animation-duration: 136s;
    animation-delay: -222s;
    transform-origin: 7vw -3vh;
    box-shadow: -82vmin 0 10.998765356775237vmin currentColor;
}
.bg-ani span.bg-el:nth-child(5) {
    color: #a3c3e6;
    top: 84%;
    left: 83%;
    animation-duration: 92s;
    animation-delay: -166s;
    transform-origin: -7vw 3vh;
    box-shadow: 82vmin 0 10.729892315669712vmin currentColor;
}
.bg-ani span.bg-el:nth-child(6) {
    color: #a3c3e6;
    top: 50%;
    left: 11%;
    animation-duration: 202s;
    animation-delay: -1s;
    transform-origin: 13vw 3vh;
    box-shadow: -82vmin 0 10.287677494923557vmin currentColor;
}
.bg-ani span.bg-el:nth-child(7) {
    color: #ffe5e5;
    top: 8%;
    left: 64%;
    animation-duration: 55s;
    animation-delay: -278s;
    transform-origin: 7vw -24vh;
    box-shadow: -82vmin 0 10.46155407138808vmin currentColor;
}
.bg-ani span.bg-el:nth-child(8) {
    color: #a3c3e6;
    top: 85%;
    left: 33%;
    animation-duration: 277s;
    animation-delay: -64s;
    transform-origin: 11vw 0vh;
    box-shadow: 82vmin 0 10.955104847257692vmin currentColor;
}
.bg-ani span.bg-el:nth-child(9) {
    color: #ff6190;
    top: 16%;
    left: 61%;
    animation-duration: 99s;
    animation-delay: -222s;
    transform-origin: 9vw -11vh;
    box-shadow: -82vmin 0 10.400274389236241vmin currentColor;
}
.bg-ani span.bg-el:nth-child(10) {
    color: #a9d6c8;
    top: 74%;
    left: 50%;
    animation-duration: 17s;
    animation-delay: -168s;
    transform-origin: -24vw -18vh;
    box-shadow: -82vmin 0 10.882930337811201vmin currentColor;
}
.bg-ani span.bg-el:nth-child(11) {
    color: #a3c3e6;
    top: 78%;
    left: 43%;
    animation-duration: 327s;
    animation-delay: -195s;
    transform-origin: 10vw 18vh;
    box-shadow: -82vmin 0 10.260281424395748vmin currentColor;
}
.bg-ani span.bg-el:nth-child(12) {
    color: #a9d6c8;
    top: 49%;
    left: 20%;
    animation-duration: 151s;
    animation-delay: -260s;
    transform-origin: 8vw -9vh;
    box-shadow: 82vmin 0 10.691659775448713vmin currentColor;
}
.bg-ani span.bg-el:nth-child(13) {
    color: #ffe5e5;
    top: 15%;
    left: 99%;
    animation-duration: 125s;
    animation-delay: -92s;
    transform-origin: -10vw 10vh;
    box-shadow: 82vmin 0 10.332968929811862vmin currentColor;
}
.bg-ani span.bg-el:nth-child(14) {
    color: #ffe5e5;
    top: 64%;
    left: 48%;
    animation-duration: 315s;
    animation-delay: -129s;
    transform-origin: -6vw 25vh;
    box-shadow: 82vmin 0 11.181594094632196vmin currentColor;
}
.bg-ani span.bg-el:nth-child(15) {
    color: #a9d6c8;
    top: 8%;
    left: 1%;
    animation-duration: 218s;
    animation-delay: -78s;
    transform-origin: -7vw 9vh;
    box-shadow: -82vmin 0 10.965425925014205vmin currentColor;
}
.bg-ani span.bg-el:nth-child(16) {
    color: #a9d6c8;
    top: 25%;
    left: 60%;
    animation-duration: 152s;
    animation-delay: -120s;
    transform-origin: -20vw -17vh;
    box-shadow: 82vmin 0 10.497628383595039vmin currentColor;
}
.bg-ani span.bg-el:nth-child(17) {
    color: #ffe5e5;
    top: 29%;
    left: 72%;
    animation-duration: 241s;
    animation-delay: -57s;
    transform-origin: 13vw -3vh;
    box-shadow: 82vmin 0 10.416760757779983vmin currentColor;
}
.bg-ani span.bg-el:nth-child(18) {
    color: #ffe5e5;
    top: 100%;
    left: 86%;
    animation-duration: 216s;
    animation-delay: -49s;
    transform-origin: 3vw -1vh;
    box-shadow: -82vmin 0 10.878972808734698vmin currentColor;
}
.bg-ani span.bg-el:nth-child(19) {
    color: #ffe5e5;
    top: 23%;
    left: 33%;
    animation-duration: 72s;
    animation-delay: -201s;
    transform-origin: -7vw -3vh;
    box-shadow: 82vmin 0 10.535354160432078vmin currentColor;
}
.bg-ani span.bg-el:nth-child(20) {
    color: #ffe5e5;
    top: 52%;
    left: 28%;
    animation-duration: 295s;
    animation-delay: -197s;
    transform-origin: 0vw 4vh;
    box-shadow: 82vmin 0 11.242088567901451vmin currentColor;
}
.bg-ani span.bg-el:nth-child(21) {
    color: #ffe5e5;
    top: 70%;
    left: 44%;
    animation-duration: 65s;
    animation-delay: -259s;
    transform-origin: 18vw 10vh;
    box-shadow: -82vmin 0 10.314212830235968vmin currentColor;
}
.bg-ani span.bg-el:nth-child(22) {
    color: #ffe5e5;
    top: 40%;
    left: 55%;
    animation-duration: 103s;
    animation-delay: -170s;
    transform-origin: -2vw 10vh;
    box-shadow: 82vmin 0 10.536402741301375vmin currentColor;
}
.bg-ani span.bg-el:nth-child(23) {
    color: #a3c3e6;
    top: 51%;
    left: 15%;
    animation-duration: 111s;
    animation-delay: -310s;
    transform-origin: -18vw 25vh;
    box-shadow: -82vmin 0 10.32857058835236vmin currentColor;
}
.bg-ani span.bg-el:nth-child(24) {
    color: #a3c3e6;
    top: 95%;
    left: 22%;
    animation-duration: 232s;
    animation-delay: -311s;
    transform-origin: -12vw -1vh;
    box-shadow: -82vmin 0 10.280537984789568vmin currentColor;
}
.bg-ani span.bg-el:nth-child(25) {
    color: #a3c3e6;
    top: 79%;
    left: 14%;
    animation-duration: 21s;
    animation-delay: -64s;
    transform-origin: -10vw 7vh;
    box-shadow: -82vmin 0 10.80644706023577vmin currentColor;
}
.bg-ani span.bg-el:nth-child(26) {
    color: #ffe5e5;
    top: 71%;
    left: 43%;
    animation-duration: 65s;
    animation-delay: -146s;
    transform-origin: -17vw -24vh;
    box-shadow: 82vmin 0 10.393812150439137vmin currentColor;
}
.bg-ani span.bg-el:nth-child(27) {
    color: #a9d6c8;
    top: 1%;
    left: 7%;
    animation-duration: 267s;
    animation-delay: -308s;
    transform-origin: -11vw -14vh;
    box-shadow: -82vmin 0 11.12133833060447vmin currentColor;
}
.bg-ani span.bg-el:nth-child(28) {
    color: #ff6190;
    top: 70%;
    left: 45%;
    animation-duration: 313s;
    animation-delay: -210s;
    transform-origin: -7vw 1vh;
    box-shadow: 82vmin 0 10.73937078307505vmin currentColor;
}
.bg-ani span.bg-el:nth-child(29) {
    color: #a3c3e6;
    top: 25%;
    left: 24%;
    animation-duration: 68s;
    animation-delay: -271s;
    transform-origin: 23vw 15vh;
    box-shadow: 82vmin 0 10.498639393336198vmin currentColor;
}
.bg-ani span.bg-el:nth-child(30) {
    color: #a9d6c8;
    top: 28%;
    left: 8%;
    animation-duration: 278s;
    animation-delay: -43s;
    transform-origin: -23vw -23vh;
    box-shadow: -82vmin 0 10.882968588495407vmin currentColor;
}
.bg-ani span.bg-el:nth-child(31) {
    color: #a9d6c8;
    top: 22%;
    left: 66%;
    animation-duration: 22s;
    animation-delay: -147s;
    transform-origin: 19vw -5vh;
    box-shadow: 82vmin 0 10.801178690125605vmin currentColor;
}
.bg-ani span.bg-el:nth-child(32) {
    color: #ffe5e5;
    top: 48%;
    left: 6%;
    animation-duration: 189s;
    animation-delay: -67s;
    transform-origin: -18vw -5vh;
    box-shadow: -82vmin 0 10.926639158585928vmin currentColor;
}