/* ThreeFour tools – base styles (design B6 tokens; theme defines the tokens). Tool-specific CSS goes in assets/tools/{slug}.css */
.tt-hub{list-style:none;margin:32px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tt-hub a{display:flex;flex-direction:column;gap:6px;height:100%;padding:22px 22px 20px;background:var(--slate,#131a26);border:1px solid var(--line,rgba(190,205,230,.14));border-radius:3px;color:var(--text,#ebeff6);text-decoration:none}
.tt-hub a:hover{border-color:var(--amber,#ffbf3c)}
.tt-hub strong{font:700 20px/1.15 var(--display,sans-serif);letter-spacing:.01em}
.tt-hub span{color:var(--muted,#a2acbe);font-size:15px;line-height:1.5}

.tt-tool{display:grid;gap:22px;margin-block:28px}
.tt-form{display:grid;gap:16px;background:var(--slate,#131a26);border:1px solid var(--line,rgba(190,205,230,.14));padding:24px;border-radius:3px}
.tt-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.tt-field{display:grid;gap:6px;min-width:0}
.tt-field>span,.tt-legend{font:700 13px/1.2 var(--display,sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--soft,#c7cfdc)}
.tt-input,.tt-select{width:100%;min-width:0;min-height:48px;padding:0 14px;background:var(--ink,#070a10);border:1px solid var(--line-2,rgba(190,205,230,.24));border-radius:2px;color:var(--text,#ebeff6);font:500 17px/1 var(--body,sans-serif)}
.tt-input:focus-visible,.tt-select:focus-visible{border-color:var(--amber,#ffbf3c)}
.tt-input.tt-digits{font:800 30px/1 var(--display,sans-serif);letter-spacing:.3em;font-variant-numeric:tabular-nums}
.tt-choices{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;border:0;margin:0;padding:0}
.tt-choices label{display:inline-flex;align-items:center;gap:8px;min-height:32px;color:var(--soft,#c7cfdc);cursor:pointer}
.tt-choices input{accent-color:var(--amber,#ffbf3c);width:18px;height:18px;margin:0}
.tt-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tt-help{font-size:14px;color:var(--muted,#a2acbe)}

.tt-result{background:var(--stage,#0c111a);border:1px solid var(--line-2,rgba(190,205,230,.24));border-left:4px solid var(--amber,#ffbf3c);padding:20px 22px;border-radius:2px}
.tt-result.is-win{border-left-color:var(--live,#ff4438)}
.tt-result.is-none{border-left-color:var(--muted,#a2acbe)}
.tt-result h2,.tt-result h3{font-size:22px;margin-bottom:8px}
.tt-result p+p{margin-top:8px}
.tt-big{font:800 clamp(30px,5vw,46px)/1.05 var(--display,sans-serif);color:var(--amber-2,#ffd67a);font-variant-numeric:tabular-nums}
.tt-verify{margin-top:12px;font-size:14px;color:var(--muted,#a2acbe)}
.tt-flag{display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid var(--line-2,rgba(190,205,230,.24));border-radius:2px;font-size:12px;color:var(--muted,#a2acbe);vertical-align:middle}

.tt-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tt-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tt-table th,.tt-table td{padding:10px 12px;border-bottom:1px solid var(--line,rgba(190,205,230,.14));text-align:left;white-space:nowrap}
.tt-table th{font:700 12px/1.2 var(--display,sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#a2acbe)}
.tt-copy{max-width:68ch}
.tt-copy h2{font-size:clamp(24px,2.6vw,32px);margin:36px 0 12px}
.tt-copy p,.tt-copy li{color:var(--soft,#c7cfdc)}
.tt-copy p+p{margin-top:12px}
@media (max-width:560px){.tt-form{padding:18px}.tt-actions .btn{width:100%}}