.llm-tester { --llm-panel: color-mix(in srgb, var(--bg-secondary) 94%, var(--accent-primary) 6%); display: grid; gap: 1rem; }
.llm-tester [hidden] { display: none !important; }
.llm-heading, .llm-section-heading, .llm-section-heading > div, .llm-profile-toolbar, .llm-profile-actions, .llm-subhead, .llm-preview-head, .llm-send-bar, .llm-inline, .llm-secret-control { display: flex; align-items: center; gap: .75rem; }
.llm-heading, .llm-section-heading, .llm-subhead, .llm-preview-head { justify-content: space-between; }
.llm-heading .page-title { margin: .2rem 0 .35rem; }
.llm-heading p, .llm-details p, .llm-guidance p { margin: 0; color: var(--text-secondary); line-height: 1.55; font-size: .86rem; }
.llm-eyebrow { color: var(--accent-primary); font: 700 .67rem/1 var(--font-mono); letter-spacing: .13em; }
.llm-state-badge, .llm-local-label, .llm-direct-badge, .llm-response-url { display: inline-flex; align-items: center; gap: .42rem; padding: .3rem .65rem; border: 1px solid var(--border-primary); border-radius: 999px; background: var(--bg-tertiary); color: var(--text-secondary); font: .72rem/1.25 var(--font-mono); white-space: nowrap; }
.llm-state-dot { width: .48rem; height: .48rem; border-radius: 50%; background: var(--accent-success); }
.llm-tester[data-state="running"] .llm-state-dot { background: var(--accent-warning); animation: llm-pulse 1s infinite; }
.llm-tester[data-state="error"] .llm-state-dot { background: var(--accent-danger); }
@keyframes llm-pulse { 50% { opacity: .35; } }
.llm-card { padding: 1rem; border: 1px solid var(--border-primary); border-radius: .75rem; background: var(--llm-panel); box-shadow: 0 10px 30px color-mix(in srgb, var(--shadow-color) 18%, transparent); }
.llm-section-heading { margin-bottom: .9rem; }
.llm-section-heading h2, .llm-subhead h3, .llm-preview-head h3 { margin: 0; font-size: 1rem; color: var(--text-primary); }
.llm-step { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; background: color-mix(in srgb, var(--accent-primary) 15%, var(--bg-tertiary)); color: var(--accent-primary); font: 700 .72rem/1 var(--font-mono); }
.llm-profile-toolbar { align-items: end; flex-wrap: wrap; }
.llm-profile-actions { margin-top: .75rem; flex-wrap: wrap; }
.llm-grow { flex: 1 1 220px; }
.llm-grid { display: grid; gap: .75rem; }
.llm-grid-connection { grid-template-columns: minmax(0, 2fr) minmax(160px, .7fr) minmax(220px, 1fr); }
.llm-span-2 { grid-column: span 1; }
.llm-request-options { grid-template-columns: minmax(150px, .7fr) minmax(260px, 1.8fr) repeat(3, minmax(120px, .65fr)) auto; align-items: end; }
.llm-path-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.llm-field { display: grid; gap: .35rem; min-width: 0; }
.llm-field > span, .llm-field label > span { color: var(--text-secondary); font-size: .76rem; font-weight: 600; }
.llm-field small { color: var(--text-muted); font-size: .67rem; }
.llm-inline > .input, .llm-secret-control > .input { flex: 1 1 auto; min-width: 0; }
.llm-secret-control .btn { flex: 0 0 auto; min-width: 2.5rem; padding-inline: .6rem; }
.llm-check { display: flex; align-items: center; gap: .55rem; min-height: 2.65rem; color: var(--text-secondary); font-size: .8rem; white-space: nowrap; }
.llm-check input { width: 1rem; height: 1rem; accent-color: var(--accent-primary); }
.llm-details { margin-top: .85rem; border-top: 1px solid var(--border-primary); padding-top: .8rem; }
.llm-details summary { cursor: pointer; color: var(--text-primary); font-weight: 600; font-size: .82rem; }
.llm-details[open] summary { margin-bottom: .75rem; }
.llm-subhead, .llm-preview-head { margin: 1rem 0 .65rem; }
.llm-custom-headers, .llm-messages { display: grid; gap: .55rem; }
.llm-header-row { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(220px, 1.2fr) auto auto; gap: .55rem; align-items: center; }
.llm-header-secret { display: inline-flex; gap: .35rem; align-items: center; color: var(--text-secondary); font-size: .72rem; white-space: nowrap; }
.llm-message { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: .55rem; align-items: start; padding: .65rem; border: 1px solid var(--border-primary); border-radius: .6rem; background: var(--bg-secondary); }
.llm-message textarea { min-height: 5.2rem; resize: vertical; }
.llm-message-actions { display: flex; gap: .3rem; }
.llm-message-actions .btn { min-width: 2.25rem; padding-inline: .5rem; }
.llm-code-input, .llm-code, .llm-answer { font-family: var(--font-mono); font-size: .75rem; line-height: 1.55; }
.llm-code { min-height: 6rem; max-height: 28rem; margin: 0; padding: .8rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--border-primary); border-radius: .6rem; background: color-mix(in srgb, var(--bg-input) 96%, black 4%); color: var(--text-primary); }
.llm-send-bar { margin-top: .8rem; flex-wrap: wrap; }
.llm-error { display: grid; grid-template-columns: auto 1fr; gap: .7rem; margin-top: .8rem; padding: .8rem; border: 1px solid color-mix(in srgb, var(--accent-danger) 42%, var(--border-primary)); border-radius: .6rem; color: var(--accent-danger); background: color-mix(in srgb, var(--accent-danger) 8%, var(--bg-secondary)); }
.llm-error p { margin: .25rem 0 0; color: var(--text-secondary); font-size: .8rem; }
.llm-inline-error { color: var(--accent-danger) !important; margin-top: .35rem !important; }
.llm-metrics { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); gap: .55rem; margin-bottom: .8rem; }
.llm-metrics div { padding: .65rem; border: 1px solid var(--border-primary); border-radius: .55rem; background: var(--bg-secondary); }
.llm-metrics span, .llm-metrics strong { display: block; }
.llm-metrics span { color: var(--text-muted); font-size: .67rem; text-transform: uppercase; }
.llm-metrics strong { margin-top: .25rem; color: var(--text-primary); font: 700 .8rem/1.2 var(--font-mono); }
.llm-tabs { display: flex; gap: .35rem; overflow-x: auto; margin-bottom: .6rem; }
.llm-tab { padding: .52rem .75rem; border: 1px solid var(--border-primary); border-radius: .5rem; background: var(--bg-tertiary); color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.llm-tab.active { border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 13%, var(--bg-tertiary)); color: var(--text-primary); }
.llm-answer { min-height: 8rem; margin: 0; padding: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--border-primary); border-radius: .6rem; background: var(--bg-secondary); color: var(--text-primary); }
.llm-guidance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.llm-guidance > div { padding: .85rem; border: 1px solid var(--border-primary); border-radius: .65rem; background: var(--bg-secondary); }
.llm-guidance i { color: var(--accent-primary); margin-right: .4rem; }
.llm-guidance strong { color: var(--text-primary); font-size: .82rem; }
.llm-guidance p { margin-top: .45rem; }
.llm-save-status { color: var(--accent-success); font-size: .75rem; }
.llm-response-url { max-width: 50%; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1100px) {
    .llm-grid-connection, .llm-request-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .llm-model-field { grid-column: span 2; }
}
@media (max-width: 720px) {
    .llm-heading, .llm-section-heading { align-items: flex-start; flex-direction: column; }
    .llm-grid-connection, .llm-request-options, .llm-path-grid, .llm-guidance, .llm-metrics { grid-template-columns: 1fr; }
    .llm-model-field { grid-column: auto; }
    .llm-header-row, .llm-message { grid-template-columns: 1fr; }
    .llm-message-actions { justify-content: flex-end; }
    .llm-inline { align-items: stretch; flex-direction: column; }
    .llm-response-url { max-width: 100%; }
}