:root { color-scheme: light; font-family: system-ui, sans-serif; color: #17212b; background: #f5f7fa; }
body { margin: 0; }
.lab-shell { max-width: 1120px; margin: 24px auto 0; padding: 0 20px; }
.progress-panel { padding: 24px; border: 1px solid #d8e0e8; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px #1b355010; }
.progress-panel h1 { margin: 0 0 8px; font-size: 1.6rem; }
.progress-panel > p { color: #4d5d6c; }
#token-form label { display: block; margin: 16px 0 6px; font-weight: 650; }
#token-form .token-row input { width: 100%; box-sizing: border-box; }
.token-hint { margin: 6px 0 10px; color: #4d5d6c; font-size: .92rem; }
.registration-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.registration-fields label { display: grid; gap: 6px; font-weight: 600; }
.registration-fields input { min-width: 0; padding: 10px 12px; border: 1px solid #aab7c4; border-radius: 6px; font: inherit; }
#registration-form > button { padding: 10px 18px; border: 0; border-radius: 6px; color: white; background: #1769aa; font: inherit; font-weight: 650; cursor: pointer; }
#issued-token-panel { margin-top: 16px; }
#issued-token-panel label { display: block; margin-bottom: 6px; font-weight: 650; }
.token-row { display: flex; gap: 8px; }
.token-row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #aab7c4; border-radius: 6px; font: inherit; }
.token-row button { padding: 10px 18px; border: 0; border-radius: 6px; color: white; background: #1769aa; font: inherit; font-weight: 650; cursor: pointer; }
#connection-status { min-height: 1.4em; margin: 10px 0; }
.task-list { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.task { display: flex; gap: 12px; padding: 12px; border-radius: 8px; background: #f4f7fa; }
.task h2 { margin: 0 0 4px; font-size: 1rem; }
.task p { margin: 0; color: #4d5d6c; white-space: pre-line; }
.task-state { font-size: 1.35rem; color: #738190; }
.task.completed .task-state { color: #21844b; }
.tracking-question { margin-top: 16px; padding: 16px; border: 1px solid #b8c8d5; border-radius: 8px; background: #fbfcfd; }
.tracking-question h2 { margin: 0 0 8px; font-size: 1.1rem; }
.tracking-question fieldset { margin: 14px 0; padding: 12px; border: 1px solid #c6d0da; border-radius: 6px; }
.tracking-question-options { display: grid; gap: 8px; }
.tracking-question-option { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border-radius: 5px; background: #f4f7fa; cursor: pointer; }
.tracking-question-option input { margin-top: 4px; }
.tracking-question button { padding: 10px 18px; border: 0; border-radius: 6px; color: white; background: #1769aa; font: inherit; font-weight: 650; cursor: pointer; }
.tracking-question [role="status"] { min-height: 1.4em; margin-bottom: 0; }
.tracking-question[hidden] { display: none; }
.completion-message { margin: 18px 0 0; padding: 16px; border: 1px solid #9bd2af; border-radius: 8px; color: #155f35; background: #eaf8ef; font-size: 1.1rem; font-weight: 700; }
.completion-message[hidden] { display: none; }
#swagger-ui { max-width: 1160px; margin: 0 auto; }
.progress-toast { position: fixed; z-index: 1000; right: 24px; bottom: 24px; max-width: min(420px, calc(100vw - 32px)); padding: 14px 18px; border-radius: 8px; color: #fff; background: #176b42; box-shadow: 0 8px 24px #102a1d40; }
.progress-toast.error { background: #b42318; }
.progress-toast[hidden] { display: none; }
.expected-error-hint { position: fixed; z-index: 999; right: 24px; bottom: 88px; width: min(420px, calc(100vw - 68px)); padding: 16px 42px 16px 18px; border: 1px solid #9bd2af; border-radius: 8px; color: #155f35; background: #eaf8ef; box-shadow: 0 8px 24px #102a1d30; }
.expected-error-hint p { margin: 6px 0 0; line-height: 1.45; }
.expected-error-hint button { position: absolute; top: 8px; right: 8px; border: 0; color: inherit; background: transparent; font: inherit; font-size: 1.35rem; cursor: pointer; }
.expected-error-hint[hidden] { display: none; }
@media (max-width: 700px) { .registration-fields { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .lab-shell { margin-top: 12px; padding: 0 10px; } .progress-panel { padding: 16px; } .token-row { flex-direction: column; } }