.tf-card { max-width: 720px; margin: 0 auto 48px; padding: 36px; border: 1px solid #deded6; border-radius: 20px; background: #fff; box-shadow: 0 8px 26px #24382d0a; }
.tf-card h3 { margin: 16px 0 12px; font-size: 1.5rem; line-height: 1.5; color: #263b32; }
.tf-badge { display: inline-block; padding: 5px 13px; border-radius: 30px; background: #fff2cc; color: #765107; font-size: .9rem; font-weight: 700; }
.tf-intro, .tf-hint { color: #58645e; line-height: 1.8; }
.tf-hint { font-size: .9rem; margin: 9px 0 20px; }
.tf-steps { display: flex; list-style: none; padding: 0; gap: 12px; margin: 28px 0; }
.tf-steps li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: .95rem; color: #69736e; }
.tf-steps span { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: #eaf0eb; }
.tf-steps .is-current { color: #245c40; font-weight: 700; }
.tf-steps .is-current span { background: #286344; color: #fff; }
.tf-card label { display: block; margin-bottom: 10px; font-weight: 700; }
.tf-card input { box-sizing: border-box; width: 100%; padding: 12px; margin-bottom: 22px; border: 1px solid #9aa79e; border-radius: 8px; font: inherit; background: white; color: #263b32; }
.tf-button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; min-height: 46px; border: 1px solid #286344; border-radius: 8px; background: #286344; color: #fff !important; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.5; }
.tf-button:hover { background: #1b4e33; }
.tf-secondary { background: #fff; color: #28533b !important; border-color: #a0b6a8; }
.tf-secondary:hover { background: #eef4ef; }
.tf-button:disabled, .tf-card input:disabled, .tf-text-button:disabled { opacity: .6; cursor: wait; }
.tf-button:focus-visible, .tf-card input:focus-visible, .tf-footer a:focus-visible, .tf-text-button:focus-visible { outline: 3px solid #d29113; outline-offset: 3px; }
.tf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tf-actions form { margin: 0; }
.tf-status { margin-top: 24px; padding: 22px; border: 1px solid #c7dbcc; border-radius: 12px; background: #f3f8f3; }
.tf-status h4 { margin: 0 0 8px; font-size: 1.2rem; }
.tf-status p { margin: 8px 0; line-height: 1.7; }
.tf-status[data-state="rejected"], .tf-status[data-state="expired"] { background: #fff8ed; border-color: #ead7b7; }
.tf-error { padding: 12px 16px; background: #fff1ef; border-left: 4px solid #ac3528; color: #8b291f; line-height: 1.7; margin-top: 20px; }
.tf-notice { padding: 16px; margin: 20px 0; background: #f0f5ef; border-radius: 8px; line-height: 1.8; }
.tf-footer { border-top: 1px solid #e3e8e2; margin-top: 28px; padding-top: 20px; }
.tf-footer a { color: #28533b; text-decoration: underline; }
.tf-member-banner { margin: 16px 0 24px; padding: 18px 22px; border: 1px solid #b7d0bc; border-radius: 10px; background: #f0f8ef; line-height: 1.8; }
.tf-member-banner p { margin: 4px 0 12px; }
.tf-member-banner button { font: inherit; padding: 7px 14px; border: 1px solid #477552; border-radius: 5px; background: white; color: #28533b; cursor: pointer; }
.tf-card [hidden] { display: none !important; }
.tf-captcha-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
.tf-text-button { border: 0; background: transparent; color: #28533b; text-decoration: underline; cursor: pointer; padding: 8px 0; font: inherit; }
.tf-examples { margin-top: 28px; border-top: 1px solid #e3e8e2; padding-top: 20px; }
.tf-examples summary { cursor: pointer; font-weight: 700; }
.tf-example { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 18px; font-size: .95rem; line-height: 1.7; }
.tf-device-page { margin: 0; padding: 44px 16px; background: #edf3ee; color: #263b32; font-family: system-ui, sans-serif; line-height: 1.7; }
.tf-device-page .tf-card { max-width: 480px; }
.tf-device-page h1 { font-size: 1.75rem; margin: 22px 0 16px; }
@media (max-width: 600px) {
    .tf-card { padding: 22px 18px; border-radius: 14px; }
    .tf-steps { gap: 5px; }
    .tf-steps li { flex-direction: column; gap: 6px; text-align: center; font-size: .85rem; }
    .tf-actions { flex-direction: column; }
    .tf-actions .tf-button, .tf-actions form, #tf-start { width: 100%; }
    .tf-status { padding: 16px; }
}