/* Match CycleTrack's Bootstrap controls. No third-party scripts on credential pages. */
:root { color-scheme: light; --ink: #212529; --canvas: #fff; --surface: #fff; --panel: #f8f9fa; --blue: #0d6efd; --line: #ced4da; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
main { max-width: 48rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; overflow-wrap: anywhere; }
h1, h2 { font-family: inherit; font-weight: 500; line-height: 1.2; }
h1 { font-size: 2rem; }
.assistant-beta { display: inline-block; vertical-align: middle; padding: .2rem .5rem; margin-left: .5rem; border: 1px solid var(--line); border-radius: .375rem; background: var(--panel); color: #495057; font-size: .8rem; font-weight: 600; line-height: 1.5; }
h2 { font-size: 1.5rem; }
a { color: var(--blue); }
a:hover { color: #0a58ca; }
section { margin-block: 1.5rem; padding: 1rem; border: 1px solid #dee2e6; border-radius: 6px; background: var(--panel); }
form { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; }
fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 1rem; margin: 0; min-width: 0; }
fieldset label { display: block; padding-block: .5rem; }
input:not([type=checkbox]), select, textarea { width: 100%; max-width: 100%; min-height: 44px; font: inherit; padding: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.agent-select { position: relative; min-width: 0; }
.agent-select select { -webkit-appearance: none; appearance: none; display: block; min-height: 56px; font-size: 1.0625rem; line-height: 1.5; padding: .85rem 2.75rem .85rem 1rem; }
.agent-select::after { content: ''; position: absolute; right: 1rem; top: 50%; margin-top: -.15rem; width: 0; height: 0; border-left: .35rem solid transparent; border-right: .35rem solid transparent; border-top: .4rem solid #495057; pointer-events: none; }
textarea { font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
input[type=checkbox] { width: 1.2rem; height: 1.2rem; vertical-align: middle; margin-right: .5rem; }
button { align-self: flex-start; max-width: 100%; min-height: 44px; border: 1px solid var(--blue); border-radius: 6px; padding: .5rem .75rem; color: #fff; background: var(--blue); font: inherit; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
button:hover { background: #0b5ed7; border-color: #0a58ca; }
button.secondary { color: #6c757d; border-color: #6c757d; background: var(--surface); }
button.secondary:hover { color: #fff; background: #6c757d; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.connection { border-bottom: 1px solid var(--line); padding-block: 1rem; }
.connection p { margin: 0; }
dd { margin-inline-start: 0; }

.assistant-title { display: flex; align-items: center; gap: 1rem; min-height: 44px; margin-bottom: 1rem; }
.assistant-title h2 { margin: 0; }
.assistant-title img, .assistant-choice img { object-fit: contain; max-width: 100%; }
.assistant-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 1rem; }
.assistant-choice { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); text-decoration: none; }
.assistant-choice:hover { border-color: var(--blue); }
.assistant-pending { background: #e9ecef; color: #60666c; }
.assistant-pending img { filter: grayscale(1); opacity: .55; }
.assistant-choice.assistant-pending:hover { border-color: var(--line); }
.assistant-choice-mark { display: flex; align-items: center; height: 44px; }
@media (max-width: 575.98px) { .assistant-choices { grid-template-columns: 1fr; } }