.oc-compat-tool{--oc-blue:#0c5aad;--oc-blue-light:#e8f0fa;--oc-blue-hover:#094a8f;--oc-green:#1a7a3a;--oc-green-bg:#e9f5ee;--oc-yellow:#9e6c00;--oc-yellow-bg:#fff8e1;--oc-red:#b91c1c;--oc-red-bg:#fef2f2;--oc-gray:#6b7280;--oc-gray-bg:#f3f4f6;--oc-border:#d1d5db;--oc-radius:6px;--oc-radius-lg:10px;--oc-shadow-sm:0 1px 2px rgba(0,0,0,.06);--oc-shadow-md:0 4px 12px rgba(0,0,0,.08);--oc-transition:.2s ease;background:#f3f2fc;margin:0;max-width:100%;padding:60px 20px}.oc-compat-tool__disclaimer,.oc-compat-tool__error,.oc-compat-tool__header,.oc-compat-tool__loading,.oc-compat-tool__panel,.oc-compat-tool__tabs{margin-left:auto;margin-right:auto;max-width:880px}.oc-compat-tool,.oc-compat-tool .oc-compat-tool__badge,.oc-compat-tool .oc-compat-tool__card-mat,.oc-compat-tool .oc-compat-tool__card-meaning,.oc-compat-tool .oc-compat-tool__details-btn,.oc-compat-tool .oc-compat-tool__drawer-disclaimer,.oc-compat-tool .oc-compat-tool__drawer-label,.oc-compat-tool .oc-compat-tool__drawer-title,.oc-compat-tool .oc-compat-tool__drawer-value,.oc-compat-tool .oc-compat-tool__error,.oc-compat-tool .oc-compat-tool__label,.oc-compat-tool .oc-compat-tool__loading,.oc-compat-tool .oc-compat-tool__no-match,.oc-compat-tool .oc-compat-tool__option,.oc-compat-tool .oc-compat-tool__results-heading,.oc-compat-tool .oc-compat-tool__tab,.oc-compat-tool button,.oc-compat-tool input,.oc-compat-tool label,.oc-compat-tool select,.oc-compat-tool textarea{font-family:Mulish,sans-serif}.oc-compat-tool__header{margin-bottom:32px;text-align:center}.oc-compat-tool__title{color:#1a1a2e;font-size:1.75rem;font-weight:700;margin:0 0 8px}.oc-compat-tool__subtitle{color:var(--oc-gray);font-size:.95rem;line-height:1.6;margin:0;margin-inline:auto;max-width:620px}.oc-compat-tool__tabs{border-bottom:2px solid var(--oc-border);display:flex;gap:0;margin-bottom:28px}.oc-compat-tool__tab{background:none;border:none;border-bottom:3px solid transparent;color:var(--oc-gray);cursor:pointer;flex:1;font-size:.9rem;font-weight:600;letter-spacing:0;margin-bottom:-2px;padding:12px 16px;transition:color var(--oc-transition),border-color var(--oc-transition)}.oc-compat-tool__tab:hover{color:var(--oc-blue)}.oc-compat-tool__tab.is-active{border-bottom-color:var(--oc-blue);color:var(--oc-blue)}.oc-compat-tool__search-row{align-items:flex-end;display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}.oc-compat-tool__combo{flex:1 1 260px;position:relative}.oc-compat-tool__material-select{flex:0 0 200px}.oc-compat-tool__label{color:#374151;display:block;font-size:.8rem;font-weight:600;letter-spacing:.03em;margin-bottom:5px;text-transform:uppercase}.oc-compat-tool__input{background:#fff;border:1.5px solid var(--oc-border);border-radius:var(--oc-radius);box-sizing:border-box;color:#1a1a2e;font-size:.95rem;padding:10px 14px;transition:border-color var(--oc-transition),box-shadow var(--oc-transition);width:100%}.oc-compat-tool__input:focus{border-color:var(--oc-blue);box-shadow:0 0 0 3px rgba(12,90,173,.12);outline:none}.oc-compat-tool__input::placeholder{color:#9ca3af;opacity:1}.oc-compat-tool__select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' viewBox='0 0 12 8'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;cursor:pointer;padding-right:36px}.oc-compat-tool__go-btn{align-self:flex-end;flex:0 0 auto}.oc-compat-tool__go-btn[disabled]{opacity:.45;pointer-events:none}.oc-compat-tool__go-btn .btn-text{position:relative;z-index:1}.oc-compat-tool__listbox{background:#fff;border:1.5px solid var(--oc-border);border-radius:var(--oc-radius);box-shadow:var(--oc-shadow-md);left:0;list-style:none;margin:4px 0 0;max-height:240px;overflow-y:auto;padding:4px 0;position:absolute;right:0;top:100%;z-index:50}.oc-compat-tool__listbox[hidden]{display:none}.oc-compat-tool__option{color:#1a1a2e;cursor:pointer;font-size:.9rem;padding:9px 14px;transition:background var(--oc-transition)}.oc-compat-tool__option:hover,.oc-compat-tool__option[aria-selected=true]{background:var(--oc-blue-light);color:var(--oc-blue)}.oc-compat-tool__option mark{background:none;color:inherit;font-weight:700}.oc-compat-tool__no-match{color:var(--oc-gray);font-size:.875rem;padding:12px 14px}.oc-compat-tool__loading{color:var(--oc-gray);font-size:.9rem;padding:24px;text-align:center}.oc-compat-tool__spinner{animation:oc-spin .7s linear infinite;border:2.5px solid var(--oc-border);border-radius:50%;border-top-color:var(--oc-blue);display:inline-block;height:18px;margin-right:8px;vertical-align:middle;width:18px}@keyframes oc-spin{to{transform:rotate(1turn)}}.oc-compat-tool__error{background:var(--oc-red-bg);border:1px solid #fecaca;border-radius:var(--oc-radius);color:var(--oc-red);font-size:.875rem;line-height:1.5;margin-bottom:16px;padding:14px 18px}.oc-compat-tool__error[hidden],.oc-compat-tool__results[hidden]{display:none}.oc-compat-tool__results-heading{color:#1a1a2e;font-size:1.05rem;font-weight:700;margin:0 0 16px}.oc-compat-tool__cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.oc-compat-tool__card{background:#fff;border:1.5px solid var(--oc-border);border-radius:var(--oc-radius-lg);padding:20px;transition:border-color var(--oc-transition),box-shadow var(--oc-transition)}.oc-compat-tool__card:hover{border-color:var(--oc-blue);box-shadow:var(--oc-shadow-sm)}.oc-compat-tool__card-mat{color:var(--oc-gray);font-size:.8rem;font-weight:600;letter-spacing:.04em;margin:0 0 10px;text-transform:uppercase}.oc-compat-tool__badge{align-items:center;border-radius:100px;display:inline-flex;font-size:.8rem;font-weight:600;gap:6px;line-height:1.4;padding:4px 10px}.oc-compat-tool__badge--compatible{background:var(--oc-green-bg);color:var(--oc-green)}.oc-compat-tool__badge--conditional{background:var(--oc-yellow-bg);color:var(--oc-yellow)}.oc-compat-tool__badge--not_compatible{background:var(--oc-red-bg);color:var(--oc-red)}.oc-compat-tool__badge--unknown{background:var(--oc-gray-bg);color:var(--oc-gray)}.oc-compat-tool__badge-dot{border-radius:50%;flex-shrink:0;height:8px;width:8px}.oc-compat-tool__badge--compatible .oc-compat-tool__badge-dot{background:var(--oc-green)}.oc-compat-tool__badge--conditional .oc-compat-tool__badge-dot{background:var(--oc-yellow)}.oc-compat-tool__badge--not_compatible .oc-compat-tool__badge-dot{background:var(--oc-red)}.oc-compat-tool__badge--unknown .oc-compat-tool__badge-dot{background:var(--oc-gray)}.oc-compat-tool__card-meaning{color:var(--oc-gray);font-size:.85rem;line-height:1.45;margin:10px 0 14px}.oc-compat-tool__details-btn{background:none;border:none;color:var(--oc-blue);cursor:pointer;font-size:.85rem;font-weight:600;padding:0;transition:color var(--oc-transition)}.oc-compat-tool__details-btn:hover{color:var(--oc-blue-hover);text-decoration:underline}.oc-compat-tool__disclaimer{background:var(--oc-gray-bg);border-radius:var(--oc-radius);color:#4b5563;font-size:.8rem;line-height:1.6;margin-top:32px;padding:16px 20px}.oc-compat-tool__disclaimer p{margin:0}.oc-compat-tool__disclaimer strong{color:#374151}.oc-compat-tool__overlay{background:rgba(0,0,0,.35);inset:0;opacity:0;position:fixed;transition:opacity .25s ease;z-index:999}.oc-compat-tool__overlay[hidden]{display:none}.oc-compat-tool__overlay.is-visible{opacity:1}.oc-compat-tool__drawer{background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column;height:100%;max-width:440px;position:fixed;right:0;top:0;transform:translateX(100%);transition:transform .3s ease;width:100%;z-index:1000}.oc-compat-tool__drawer[hidden]{display:none}.oc-compat-tool__drawer.is-visible{transform:translateX(0)}.oc-compat-tool__drawer-inner{display:flex;flex-direction:column;height:100%;overflow-y:auto}.oc-compat-tool__drawer-head{align-items:flex-start;border-bottom:1px solid var(--oc-border);display:flex;gap:12px;justify-content:space-between;padding:24px 24px 16px}.oc-compat-tool__drawer-title{color:#1a1a2e;font-size:1.1rem;font-weight:700;line-height:1.3;margin:0}.oc-compat-tool__drawer-close{background:none;border:none;border-radius:4px;color:var(--oc-gray);cursor:pointer;flex-shrink:0;padding:4px;transition:color var(--oc-transition),background var(--oc-transition)}.oc-compat-tool__drawer-close:hover{background:var(--oc-gray-bg);color:#1a1a2e}.oc-compat-tool__drawer-body{flex:1;padding:24px}.oc-compat-tool__drawer-row{margin-bottom:18px}.oc-compat-tool__drawer-label{color:var(--oc-gray);font-size:.75rem;font-weight:600;letter-spacing:.04em;margin:0 0 4px;text-transform:uppercase}.oc-compat-tool__drawer-value{color:#1a1a2e;font-size:.95rem;line-height:1.5;margin:0}.oc-compat-tool__drawer-foot{border-top:1px solid var(--oc-border);padding:16px 24px 24px}.oc-compat-tool__drawer-disclaimer{color:var(--oc-gray);font-size:.78rem;line-height:1.5;margin:0 0 14px}.oc-compat-tool__drawer-actions{display:flex;gap:10px}@media (max-width:768px){.oc-compat-tool{padding:40px 16px}.oc-compat-tool__title{font-size:1.35rem}.oc-compat-tool__subtitle{font-size:.875rem}.oc-compat-tool__search-row{flex-direction:column;gap:14px}.oc-compat-tool__combo,.oc-compat-tool__material-select{flex:1 1 100%;width:100%}.oc-compat-tool__go-btn{text-align:center;width:100%}.oc-compat-tool__cards{gap:12px;grid-template-columns:1fr}.oc-compat-tool__card{padding:16px}.oc-compat-tool__tab{font-size:.82rem;padding:10px 8px}.oc-compat-tool__drawer{max-width:100%}.oc-compat-tool__disclaimer{margin-top:24px;padding:14px 16px}}@media (max-width:400px){.oc-compat-tool{padding:32px 12px}.oc-compat-tool__title{font-size:1.2rem}.oc-compat-tool__header{margin-bottom:24px}.oc-compat-tool__tabs{margin-bottom:20px}.oc-compat-tool__tab{font-size:.78rem;padding:10px 6px}}