.tf-sokfilter { --tf-sf-ink:#18324a; --tf-sf-line:#d3d6bd; --tf-sf-blue:#006ec5; box-sizing:border-box; width:100%; max-width:100%; min-width:0; display:grid; gap:18px; color:var(--tf-sf-ink); font:inherit; line-height:1.5; }
.tf-sokfilter *, .tf-sokfilter *::before, .tf-sokfilter *::after { box-sizing:border-box; }
.tf-sokfilter [hidden] { display:none !important; }
.tf-sokfilter > * { min-width:0; max-width:100%; margin:0 !important; }
.tf-sokfilter p { color:var(--tf-sf-ink); margin:0 0 12px; overflow-wrap:anywhere; }
.tf-sokfilter .tf-sf-warning { background:#fff1ce; padding:16px; border-radius:12px; }
.tf-sokfilter .tf-sf-warning p { margin:8px 0 0; }
.tf-sokfilter .tf-sf-controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; }
.tf-sokfilter label { display:block; min-width:0; font-weight:600; }
.tf-sokfilter input, .tf-sokfilter select, .tf-sokfilter textarea { display:block; width:100% !important; min-width:0 !important; max-width:100% !important; min-height:48px; margin:8px 0 0; padding:10px; border:1px solid var(--tf-sf-line); border-radius:8px; background:#ffffed; color:var(--tf-sf-ink); font:inherit; font-size:16px; }
.tf-sokfilter .tf-sf-list { display:grid; gap:16px; }
.tf-sokfilter .tf-sf-card { min-width:0; max-width:100%; padding:18px; border:1px solid var(--tf-sf-line); border-radius:14px; background:#ffffed; margin:0; }
.tf-sokfilter .tf-sf-category { display:block; font-size:.85em; margin:0 0 6px; }
.tf-sokfilter h3 { font-size:1.1em; margin:0 0 8px; color:var(--tf-sf-ink); }
.tf-sokfilter .tf-sf-review { font-weight:600; color:#76500c; font-size:.9em; }
.tf-sokfilter .tf-sf-code { display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-width:0; }
.tf-sokfilter code { min-width:0; max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; font-family:ui-monospace,monospace; color:var(--tf-sf-ink); background:#f1f4d9; border-radius:6px; padding:8px; font-size:.95em; user-select:all; }
.tf-sokfilter .tf-sf-code code { flex:1 1 200px; }
.tf-sokfilter button { min-height:44px; border:0; border-radius:22px; padding:10px 18px; color:#fff; background:var(--tf-sf-blue); font:inherit; font-weight:600; cursor:pointer; }
.tf-sokfilter button:hover { background:#005a9f; }
.tf-sokfilter button:focus-visible, .tf-sokfilter input:focus-visible, .tf-sokfilter select:focus-visible, .tf-sokfilter textarea:focus-visible, .tf-sokfilter summary:focus-visible { outline:3px solid var(--tf-sf-blue); outline-offset:3px; }
.tf-sokfilter summary { min-height:44px; padding:10px 0; font-weight:600; cursor:pointer; }
.tf-sokfilter .tf-sf-operators ul { padding-left:22px; margin:12px 0; }
.tf-sokfilter .tf-sf-operators li { margin:0 0 12px; overflow-wrap:anywhere; }
.tf-sokfilter .tf-sf-status:empty { display:none; }
.tf-sokfilter .tf-sf-source { font-size:.85em; }
.tf-sokfilter a { color:#005b9f; text-decoration:underline; }
@media(max-width:480px){ .tf-sokfilter .tf-sf-controls { grid-template-columns:1fr; } }