/* BASE COMUNE — usa le variabili del modello:
   --bg --ink --muted --acc --accInk --line --serif --sans --ease --sab */
.tf-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.tf-w>span{display:inline-block}
.tf-chips{display:flex;flex-wrap:wrap;gap:8px}
.tf-ch{font:inherit;font-size:14px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.tf-ch.on{background:var(--acc);color:var(--accInk);border-color:var(--acc)}
@media (hover:hover) and (pointer:fine){.tf-ch:not(.on):hover{border-color:var(--ink)}}
.tf-err{color:#c0392b;font-size:14px;min-height:1.4em;margin-top:8px}
.tf-shake{animation:tfShake .4s}
@keyframes tfShake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
dialog#tf-dlg{border:0;padding:0;width:min(440px,calc(100vw - 28px));background:var(--bg);color:var(--ink);border-radius:20px}
dialog#tf-dlg::backdrop{background:rgba(0,0,0,.6)}
.tf-dlg{padding:26px}.tf-dlg h3{font-family:var(--serif);font-weight:400;font-size:26px;margin:0 0 8px}.tf-dlg p{color:var(--muted);font-size:14.5px;margin:0}
.tf-wa{background:#0b141a;padding:14px;border-radius:12px;margin:14px 0 18px}
.tf-wa div{background:#005c4b;color:#e9edef;padding:10px 12px;border-radius:10px 10px 0 10px;font:15px/1.45 system-ui,sans-serif;margin-left:10%;white-space:pre-wrap}
.tf-ok{width:100%;font:inherit;padding:14px;border-radius:999px;border:0;background:var(--acc);color:var(--accInk);cursor:pointer}
.tf-badge{position:fixed;left:16px;bottom:calc(16px + var(--sab,0px));z-index:60;display:flex;gap:9px;align-items:center;font:11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(15,15,15,.82);backdrop-filter:blur(8px);padding:9px 14px;border-radius:999px;text-decoration:none;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .4s,transform .5s}
.tf-badge.show{opacity:1;transform:none;pointer-events:auto}
.tf-badge span{opacity:.6}.tf-badge b{font-family:var(--serif);font-weight:400;font-style:italic;font-size:15px;letter-spacing:0;text-transform:none}
.js [data-up]{opacity:0}
.static [data-up]{opacity:1!important;transform:none!important;visibility:visible!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
