/* Shared styles for /free-tools pages. Mobile-first from 360px. */
.ft-page { padding: 32px 0 64px; overflow-wrap: anywhere; }
.ft-container { max-width: 860px; }
.ft-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0 0 16px; padding: 0; font-size: 14px; }
.ft-breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--tg-body-color); }
.ft-breadcrumb a { color: var(--tg-theme-primary); text-decoration: underline; }
.ft-title { font-size: clamp(28px, 6vw, 40px); margin-bottom: 12px; }
.ft-intro { font-size: 18px; margin-bottom: 24px; }
.ft-muted { font-size: 14px; color: var(--tg-body-color); margin: 0; }
.ft-section { margin-top: 40px; }
.ft-section h2 { font-size: 24px; margin-bottom: 12px; }
.ft-section a { color: var(--tg-theme-primary); text-decoration: underline; }
.ft-section h3 { font-size: 18px; margin: 16px 0 4px; }
.ft-tool-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ft-card { background: var(--tg-common-color-white); border: 1px solid #d9e1ee; border-radius: 12px; padding: 20px; }
.ft-card__title { font-size: 20px; margin-bottom: 8px; }
.ft-card__title a { color: var(--tg-theme-primary); text-decoration: underline; }
.ft-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border: 2px solid var(--tg-theme-primary); border-radius: 8px; background: var(--tg-theme-primary); color: var(--tg-common-color-white); font-weight: 600; cursor: pointer; text-decoration: none; }
.ft-btn:hover { color: var(--tg-common-color-white); opacity: .9; }
.ft-btn--ghost { background: transparent; color: var(--tg-theme-primary); }
.ft-btn--ghost:hover { color: var(--tg-theme-primary); }
.ft-page a:focus-visible, .ft-page button:focus-visible, .ft-page textarea:focus-visible, .ft-page input:focus-visible + span { outline: 3px solid var(--tg-common-color-dark); outline-offset: 2px; }
.ft-page [tabindex="-1"]:focus { outline: none; }
.ft-progress { display: block; margin-bottom: 20px; font-size: 14px; }
.ft-progress progress { display: block; width: 100%; height: 8px; margin-top: 4px; accent-color: var(--tg-theme-primary); }
.ft-question { border: 0; margin: 0; padding: 0; min-width: 0; }
.ft-question + .ft-question { margin-top: 24px; }
.ft-question legend { float: none; width: 100%; font-size: 20px; font-weight: 600; color: var(--tg-heading-color); margin-bottom: 12px; line-height: 1.3; }
.ft-option { display: block; margin-bottom: 8px; cursor: pointer; }
.ft-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ft-option span { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid #b6c2d6; border-radius: 8px; }
.ft-option input:checked + span { border: 2px solid var(--tg-theme-primary); background: #f9eefb; font-weight: 600; }
.ft-error { color: #b3261e; font-weight: 600; margin: 8px 0 0; }
.ft-error:empty { display: none; }
.ft-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.ft-result { background: var(--tg-common-color-white); border: 1px solid #d9e1ee; border-radius: 12px; padding: 20px; margin-top: 16px; }
.ft-result--primary { border: 2px solid var(--tg-theme-primary); }
.ft-result h3 { font-size: 22px; margin-bottom: 8px; }
.ft-result h4 { font-size: 16px; margin: 14px 0 4px; }
.ft-result ul, .ft-result ol { margin: 0; padding-left: 20px; }
.ft-result__label { font-size: 14px; font-weight: 600; color: var(--tg-theme-primary); margin: 0 0 4px; }
.ft-result__courses { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ft-copy-fallback { display: block; width: 100%; min-height: 120px; margin-top: 12px; padding: 10px; border: 1px solid #b6c2d6; border-radius: 8px; }
/* Python Skill Test */
.pq-banner { background: #fff4ce; border: 2px solid #8a6d00; border-radius: 8px; padding: 12px 16px; font-weight: 600; margin-bottom: 16px; }
.pq-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; line-height: 1.5; white-space: pre; overflow-x: auto; max-width: 100%; background: #f4f6fa; color: #1b1f24; border: 1px solid #d9e1ee; border-radius: 8px; padding: 12px 14px; margin: 0 0 16px; tab-size: 4; }
.pq-code code { font: inherit; color: inherit; background: none; padding: 0; }
.ft-option span.pq-option-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.ft-option input:disabled + span { cursor: default; }
.ft-option input + span.pq-option--correct { border: 2px solid #1e7d32; background: #e8f5e9; }
.ft-option input + span.pq-option--wrong { border: 2px solid #b3261e; background: #fdecea; }
.pq-feedback:empty { display: none; }
.pq-feedback { margin-top: 16px; padding: 14px 16px; border-radius: 8px; background: #f4f6fa; }
.pq-feedback p { margin: 0 0 8px; }
.pq-feedback p:last-child { margin-bottom: 0; }
.pq-correct { color: #1e7d32; font-weight: 700; font-size: 18px; }
.pq-wrong { color: #b3261e; font-weight: 700; font-size: 18px; }
.pq-answer-text { font-weight: 600; }
.pq-score { font-size: 22px; }
#pq-result h3 { font-size: 20px; margin: 24px 0 8px; }
.pq-score strong { font-size: 32px; margin-right: 8px; color: var(--tg-heading-color); }
.pq-topics { width: 100%; border-collapse: collapse; margin: 8px 0 16px; }
.pq-topics th, .pq-topics td { text-align: left; padding: 8px; border-bottom: 1px solid #d9e1ee; vertical-align: top; }
/* Salary Explorer */
.se-form { display: grid; gap: 16px; }
.se-field label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--tg-heading-color); }
.se-field select { display: block; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #b6c2d6; border-radius: 8px; background: var(--tg-common-color-white); font-size: 16px; }
.ft-page select:focus-visible { outline: 3px solid var(--tg-common-color-dark); outline-offset: 2px; }
.se-range { font-size: clamp(26px, 7vw, 36px); margin: 4px 0 8px; }
.se-note { background: #fff4ce; border-left: 4px solid #8a6d00; padding: 8px 12px; }
.se-disclosure { font-weight: 600; border-left: 4px solid var(--tg-theme-primary); padding: 8px 12px; background: #f4f6fa; }
.se-method { margin-top: 16px; border: 1px solid #d9e1ee; border-radius: 8px; padding: 12px 14px; }
.se-method summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.se-method dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 12px 0; }
.se-method dt { font-weight: 600; }
.se-method dd { margin: 0; }
@media (min-width: 768px) {
    .se-form { grid-template-columns: 1fr 1fr; }
    .se-form .ft-error, .se-form .ft-actions { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
    .ft-tool-list { grid-template-columns: 1fr 1fr; }
}