#trainer { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid #d5dce8; border-radius: 12px; background: #f7f9fc; color: #1d2433; max-width: 46rem; }
#trainer * { box-sizing: border-box; }
.tr-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; color: #4a5568; margin-bottom: .5rem; }
.tr-bar { height: 6px; background: #dfe5ef; border-radius: 3px; overflow: hidden; margin-bottom: 1rem; }
.tr-bar-fill { height: 100%; background: #173d73; transition: width .2s; }
.tr-question { font-size: 1.2rem; font-weight: 600; margin: .5rem 0 1rem; line-height: 1.4; }
.tr-options { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.tr-option, .tr-btn, .tr-tab { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid #173d73; padding: .7rem 1rem; background: #fff; color: #173d73; min-height: 44px; }
.tr-option:hover:not(:disabled), .tr-tab:hover { background: #eaf0fa; }
.tr-option:disabled { cursor: default; }
.tr-option.is-right { background: #e3f6e8; border-color: #2a8a46; color: #14532d; }
.tr-option.is-wrong { background: #fde8e6; border-color: #c0392b; color: #7a1d14; }
.tr-option.is-picked { outline: 2px solid #173d73; }
.tr-btn { background: #173d73; color: #fff; margin-top: 1rem; }
.tr-btn:hover { background: #0f2c55; }
.tr-feedback { margin-top: 1rem; line-height: 1.5; }
.tr-feedback.is-ok { color: #14532d; }
.tr-feedback.is-bad { color: #7a1d14; }
.tr-result-title { margin-top: 0; font-size: 1.5rem; }
.tr-lead { font-size: 1.05rem; line-height: 1.55; }
.tr-note { color: #4a5568; font-size: .92rem; }
.tr-sub { margin: 1.25rem 0 .5rem; }
.tr-list { padding-left: 1.2rem; line-height: 1.5; }
.tr-list li { margin-bottom: .5rem; }
.tr-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; }
.tr-tab.is-active { background: #173d73; color: #fff; }
.tr-search, .tr-input { width: 100%; font: inherit; padding: .65rem .8rem; border: 1px solid #aab6cb; border-radius: 8px; background: #fff; min-height: 44px; }
.tr-form { display: grid; gap: .6rem; }
.tr-form .tr-btn { margin-top: .2rem; }
.tr-input.is-right { border-color: #2a8a46; background: #e3f6e8; }
.tr-input.is-wrong { border-color: #c0392b; background: #fde8e6; }
.tr-table-wrap { overflow-x: auto; max-height: 32rem; overflow-y: auto; }
.tr-table { border-collapse: collapse; width: 100%; font-size: .95rem; background: #fff; }
.tr-table th, .tr-table td { border: 1px solid #d5dce8; padding: .45rem .6rem; text-align: left; }
.tr-table thead th { background: #eaf0fa; position: sticky; top: 0; }