:root {
	--tf-primary: #173B57;
	--tf-secondary: #2A7F9E;
	--tf-accent: #35AFA0;
	--tf-bg: #F4FAFA;
	--tf-card: #FFFFFF;
	--tf-text: #20303A;
	--tf-muted: #64748B;
	--tf-success: #2E8B68;
	--tf-warning: #C78A27;
	--tf-danger: #C95C5C;
	--tf-radius: 14px;
	--tf-shadow: 0 4px 16px rgba(23, 59, 87, 0.08);
	--tf-border: #E2EAEE;
	--tf-max-width: 1180px;
}

.tf-tool-page, .tf-hub, .tf-codes-index, .tf-codes-page, .tf-admin {
	color: var(--tf-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
	box-sizing: border-box;
}
.tf-tool-page *, .tf-hub *, .tf-codes-index *, .tf-codes-page * { box-sizing: border-box; }

.tf-tool-page, .tf-hub, .tf-codes-index, .tf-codes-page {
	max-width: var(--tf-max-width);
	margin: 0 auto;
	padding: 24px 16px 64px;
}

/* Breadcrumb */
.tf-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 16px; font-size: 0.9rem; color: var(--tf-muted); }
.tf-breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 6px; color: var(--tf-muted); }
.tf-breadcrumb a { color: var(--tf-secondary); text-decoration: none; }
.tf-breadcrumb a:hover { text-decoration: underline; }

/* Headings */
.tf-tool-header h1, .tf-hub-hero h1, .tf-codes-index h1, .tf-codes-page h1 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	color: var(--tf-primary);
	margin: 0 0 12px;
}
.tf-tool-page h2 { font-size: 1.3rem; color: var(--tf-primary); margin: 32px 0 12px; }
.tf-tool-page h3 { font-size: 1.05rem; color: var(--tf-primary); }
.tf-tool-intro { font-size: 1.05rem; color: var(--tf-muted); max-width: 68ch; }

/* Alerts */
.tf-alert { border-radius: var(--tf-radius); padding: 14px 18px; margin: 16px 0; font-size: 0.95rem; }
.tf-alert-crisis { background: #FBEEEE; border: 1px solid var(--tf-danger); color: var(--tf-text); }

/* Layout */
.tf-tool-layout { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 24px; }
@media (min-width: 900px) {
	.tf-tool-layout { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); align-items: start; }
	.tf-tool-side { position: sticky; top: 24px; }
}

/* Cards / boxes */
.tf-box, .tf-card, .tf-section {
	background: var(--tf-card);
	border: 1px solid var(--tf-border);
	border-radius: var(--tf-radius);
	box-shadow: var(--tf-shadow);
	padding: 20px 22px;
	margin-bottom: 20px;
}
.tf-tool-side .tf-box { padding: 18px 20px; }

/* Progress */
.tf-progress { margin-bottom: 20px; }
.tf-progress-bar-track, .tf-progress { background: #E7F1F1; border-radius: 999px; height: 8px; overflow: hidden; }
.tf-progress-bar { background: var(--tf-accent); height: 8px; border-radius: 999px; transition: width .25s ease; }
.tf-progress-label { font-size: 0.85rem; color: var(--tf-muted); margin: 8px 0 0; }

/* Questions */
.tf-question { border: 1px solid var(--tf-border); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.tf-question legend { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; padding: 0; }
.tf-q-number { background: var(--tf-secondary); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; }
.tf-options { display: grid; gap: 8px; margin-top: 12px; }
@media (min-width: 560px) { .tf-options { grid-template-columns: 1fr 1fr; } }
.tf-option { display: flex; align-items: center; gap: 10px; border: 1px solid var(--tf-border); border-radius: 10px; padding: 12px 14px; cursor: pointer; min-height: 44px; transition: border-color .15s, background .15s; }
.tf-option:hover { border-color: var(--tf-secondary); }
.tf-option input:focus-visible { outline: 2px solid var(--tf-secondary); outline-offset: 2px; }
.tf-option:has(input:checked) { border-color: var(--tf-accent); background: #EFFBF9; }
.tf-question-note { font-size: 0.85rem; color: var(--tf-muted); margin-top: 10px; }

/* Buttons */
.tf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 12px 22px; font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; cursor: pointer; min-height: 44px; text-decoration: none; }
.tf-btn-primary { background: var(--tf-secondary); color: #fff; }
.tf-btn-primary:hover { background: var(--tf-primary); }
.tf-btn-secondary { background: var(--tf-accent); color: #fff; }
.tf-btn-ghost { background: transparent; border-color: var(--tf-border); color: var(--tf-text); }
.tf-form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

/* Results */
.tf-result { border-radius: var(--tf-radius); padding: 24px; margin-top: 20px; background: var(--tf-bg); border: 1px solid var(--tf-border); }
.tf-score-value { font-size: 3rem; font-weight: 800; color: var(--tf-primary); line-height: 1; }
.tf-score-label { text-transform: uppercase; letter-spacing: .06em; font-size: 0.8rem; color: var(--tf-muted); }
.tf-score-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; margin: 10px 0; }
.tf-score-badge.tone-success { background: #E4F5EE; color: var(--tf-success); }
.tf-score-badge.tone-warning { background: #FBF1E1; color: var(--tf-warning); }
.tf-score-badge.tone-danger { background: #FBEEEE; color: var(--tf-danger); }
.tf-score-bar-track { background: #E2EAEE; border-radius: 999px; height: 10px; margin: 14px 0; overflow: hidden; }
.tf-score-bar-fill { height: 10px; background: var(--tf-secondary); border-radius: 999px; }
.tf-result-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* FAQ */
.tf-accordion-item { border-bottom: 1px solid var(--tf-border); padding: 12px 0; }
.tf-accordion-item summary { cursor: pointer; font-weight: 600; color: var(--tf-primary); }

/* Related */
.tf-related-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tf-related-list a { color: var(--tf-secondary); text-decoration: none; font-weight: 600; }
.tf-related-list a:hover { text-decoration: underline; }

/* Hub */
.tf-hub-hero { text-align: center; padding: 40px 16px; }
.tf-hub-hero p { max-width: 60ch; margin: 0 auto 20px; color: var(--tf-muted); }
.tf-hub-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.tf-hub-controls { margin: 32px 0 20px; }
.tf-hub-controls input[type="search"] { width: 100%; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--tf-border); font-size: 1rem; margin-bottom: 14px; }
.tf-hub-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-chip { border: 1px solid var(--tf-border); background: #fff; border-radius: 999px; padding: 8px 16px; font-size: 0.85rem; cursor: pointer; }
.tf-chip.is-active { background: var(--tf-primary); border-color: var(--tf-primary); color: #fff; }
.tf-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.tf-card h2 { margin: 0 0 4px; color: var(--tf-primary); font-size: 1.1rem; }
.tf-card-measures { color: var(--tf-secondary); font-weight: 600; font-size: 0.85rem; margin: 0 0 8px; }
.tf-card-meta { list-style: none; display: flex; gap: 12px; padding: 0; margin: 0 0 10px; font-size: 0.8rem; color: var(--tf-muted); }
.tf-card-desc { font-size: 0.9rem; color: var(--tf-muted); margin-bottom: 14px; }
.tf-hub-empty { text-align: center; color: var(--tf-muted); padding: 40px 0; }

/* Code search */
.tf-code-search-bar input { width: 100%; padding: 14px 16px; border: 1px solid var(--tf-border); border-radius: 10px; font-size: 1rem; margin: 20px 0; }
.tf-code-results table { width: 100%; border-collapse: collapse; }
.tf-code-results th, .tf-code-results td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--tf-border); font-size: 0.9rem; }
.tf-code-results th { color: var(--tf-primary); }
.tf-code-copy { background: none; border: 1px solid var(--tf-border); border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: 0.8rem; }
.tf-code-hint, .tf-code-empty { color: var(--tf-muted); padding: 20px 0; text-align: center; }

/* Admin */
.tf-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 20px 0; }
.tf-admin-card { background: #fff; border: 1px solid var(--tf-border); border-radius: 12px; padding: 16px; }
.tf-admin-card h3 { margin: 0 0 6px; font-size: 0.85rem; color: var(--tf-muted); text-transform: uppercase; }
.tf-admin-stat { font-size: 1.8rem; font-weight: 700; color: var(--tf-primary); margin: 0; }

/* Combined tool */
.tf-combined-part { margin-bottom: 30px; }

/* Utility */
.screen-reader-text { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
@media (max-width: 480px) {
	.tf-tool-page, .tf-hub, .tf-codes-index, .tf-codes-page { padding: 16px 12px 48px; }
}