:root {
  --tool-border: rgba(195, 200, 193, .72);
  --tool-border-strong: rgba(74, 101, 73, .22);
  --tool-shadow: 0 28px 70px -34px rgba(6, 27, 14, .34);
  --tool-soft: #f4f6f5;
  --tool-soft-2: #eef4ef;
}

.tool-section {
  position: relative;
  background:
    linear-gradient(90deg, rgba(255,255,255,.92), rgba(248,249,250,.68) 46%, rgba(255,255,255,.96));
  border-top: 1px solid rgba(195, 200, 193, .34);
  border-bottom: 1px solid rgba(195, 200, 193, .34);
}

.tool-layout {
  gap: 32px;
  align-items: stretch;
}

.tool-layout > .panel,
.tool-layout > form.panel,
.tool-layout > section.panel,
.tool-layout > .output {
  position: relative;
  border: 1px solid var(--tool-border);
  border-radius: 8px;
  box-shadow: var(--tool-shadow);
}

.tool-layout > form.panel {
  min-height: 620px;
}

.tool-layout > section.panel,
.tool-layout > .output {
  min-height: 520px;
}

.tool-layout > .panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #061b0e, #4a6549, #d0e9d4);
  border-radius: 8px 8px 0 0;
  opacity: .9;
}

.panel h2,
.panel-head h2,
.output-panel h2 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.12;
}

.field-grid {
  gap: 22px;
}

.field span {
  font-size: 14px;
  letter-spacing: -.01em;
}

input,
textarea,
select {
  min-height: 56px;
  border-color: rgba(195, 200, 193, .9);
  border-radius: 8px;
  background: #fff;
  font-size: 16px;
}

textarea {
  min-height: 128px;
  line-height: 1.55;
}

input::placeholder,
textarea::placeholder {
  color: rgba(67, 72, 67, .66);
}

.help,
.notice {
  font-size: 14px;
}

.actions,
.output-actions,
.output-toolbar {
  gap: 12px;
  align-items: center;
}

.btn {
  min-height: 54px;
  border-radius: 999px;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  box-shadow: 0 22px 44px -28px rgba(6, 27, 14, .82);
}

.btn-primary .material-symbols-outlined,
.actions .btn-primary .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.btn-light:hover {
  border-color: rgba(74, 101, 73, .42);
  background: var(--tool-soft-2);
}

.status {
  display: block;
  margin-top: 16px;
}

.result-empty,
.empty {
  min-height: 430px;
  border: 1px dashed rgba(74, 101, 73, .28);
  background:
    linear-gradient(180deg, rgba(248,249,250,.96), rgba(243,244,245,.98));
}

.result-empty > div,
.empty > div {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 620px;
}

.result-empty .material-symbols-outlined,
.empty .material-symbols-outlined {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: #e7f2e8;
  color: #456b46;
  font-size: 42px;
}

.result-empty h2,
.empty h2 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.15;
  text-align: center;
}

.result-empty p,
.empty p {
  max-width: 640px;
  font-size: 18px;
  line-height: 1.55;
}

.metric-row {
  gap: 14px;
}

.metric {
  min-height: 104px;
  border-color: var(--tool-border);
  background: linear-gradient(180deg, #fff, #f6f8f6);
}

.metric small {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 14px;
}

.metric strong {
  font-size: 32px;
}

.output-actions {
  margin-top: 22px;
}

.result-card,
.prompt-card,
.category-card {
  border-color: var(--tool-border);
  box-shadow: 0 16px 40px -32px rgba(6, 27, 14, .38);
}

.result-card + .result-card {
  margin-top: 14px;
}

.tool-attribution {
  margin-top: 18px;
}

.score-ring {
  box-shadow: inset 0 0 0 1px rgba(74, 101, 73, .14), 0 18px 44px -30px rgba(6, 27, 14, .72);
}

pre#llms-output {
  border: 1px solid rgba(208, 233, 212, .16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.output pre {
  border-radius: 8px;
}

@media (min-width: 981px) {
  .tool-layout > section.panel,
  .tool-layout > .output {
    position: sticky;
    top: 96px;
  }
}

@media (max-width: 980px) {
  .tool-layout > form.panel,
  .tool-layout > section.panel,
  .tool-layout > .output {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .result-empty,
  .empty {
    min-height: 300px;
    padding: 22px;
  }

  .result-empty .material-symbols-outlined,
  .empty .material-symbols-outlined {
    width: 58px;
    height: 58px;
    font-size: 34px;
  }

  input,
  textarea,
  select {
    font-size: 16px;
  }
}