.ybf12[data-tool="pairs"]{box-sizing:border-box;max-width:640px;margin:0 auto;padding:16px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#1f2933;line-height:1.5}
.ybf12[data-tool="pairs"] *,.ybf12[data-tool="pairs"] *::before,.ybf12[data-tool="pairs"] *::after{box-sizing:border-box} .ybf12[data-tool="pairs"] .ybf12-title{margin:0 0 6px;font-size:20px;font-weight:700} .ybf12[data-tool="pairs"] .ybf12-desc{margin:0 0 12px;font-size:14.4px;color:#52606d} .ybf12[data-tool="pairs"] .ybf12-controls{display:flex;flex-wrap:wrap;gap:10px;padding:10px;border:2px solid #3b82f6;border-radius:10px;background:#eff6ff} .ybf12[data-tool="pairs"] .ybf12-btn{min-height:44px;min-width:96px;padding:10px 18px;font-size:16px;font-weight:600;border-radius:8px;border:2px solid transparent;cursor:pointer;background:#fff;color:#1f2933} .ybf12[data-tool="pairs"] .ybf12-btn-start{background:#2563eb;color:#fff;border-color:#1d4ed8} .ybf12[data-tool="pairs"] .ybf12-btn-start:hover{background:#1d4ed8} .ybf12[data-tool="pairs"] .ybf12-btn-reset{background:#fff;color:#1f2933;border-color:#94a3b8} .ybf12[data-tool="pairs"] .ybf12-btn-reset:hover{background:#f1f5f9} .ybf12[data-tool="pairs"] .ybf12-btn:focus-visible{outline:3px solid #f59e0b;outline-offset:2px} .ybf12[data-tool="pairs"] .ybf12-btn:disabled{opacity:.55;cursor:not-allowed} .ybf12[data-tool="pairs"] .ybf12-panel{margin-top:12px;padding:12px;background:#fff;border:1px solid #d9e2ec;border-radius:10px} .ybf12[data-tool="pairs"] .ybf12-stats{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 12px;font-size:14.4px;color:#334e68} .ybf12[data-tool="pairs"] .ybf12-stat{margin:0} .ybf12[data-tool="pairs"] .ybf12-stat span{font-weight:700;color:#102a43} .ybf12[data-tool="pairs"] .ybf12-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .ybf12[data-tool="pairs"] .ybf12-card{position:relative;display:flex;align-items:center;justify-content:center;min-height:64px;padding:4px;font-size:25.6px;font-weight:700;border-radius:8px;border:2px solid #94a3b8;background:#e2e8f0;color:#334155;cursor:pointer;user-select:none} .ybf12[data-tool="pairs"] .ybf12-card:hover:not(:disabled){background:#cbd5e1} .ybf12[data-tool="pairs"] .ybf12-card:focus-visible{outline:3px solid #f59e0b;outline-offset:2px} .ybf12[data-tool="pairs"] .ybf12-card:disabled{cursor:default} .ybf12[data-tool="pairs"] .ybf12-card[data-state="down"]{background:#e2e8f0;color:#334155} .ybf12[data-tool="pairs"] .ybf12-card[data-state="up"]{background:#fff;border-color:#2563eb;color:#1d4ed8} .ybf12[data-tool="pairs"] .ybf12-card[data-state="matched"]{background:#dcfce7;border-color:#16a34a;color:#166534} .ybf12[data-tool="pairs"] .ybf12-status{margin:12px 0 0;padding:8px 10px;font-size:14.4px;background:#f1f5f9;border-radius:8px;color:#334e68;min-height:2.4em}
@media (max-width:430px){.ybf12[data-tool="pairs"]{padding:12px} .ybf12[data-tool="pairs"] .ybf12-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .ybf12[data-tool="pairs"] .ybf12-card{min-height:60px;font-size:22.4px} .ybf12[data-tool="pairs"] .ybf12-btn{flex:1 1 auto}}
@media (prefers-reduced-motion:reduce){.ybf12[data-tool="pairs"] *{transition:none!important;animation:none!important}}
.ybf12[data-tool="pairs"]{background:linear-gradient(135deg,#7854ac,#b16bac);padding:22px;border-radius:22px;color:#fff}
.ybf12[data-tool="pairs"] .ybf12-title,.ybf12[data-tool="pairs"] .ybf12-desc{color:#fff}
.ybf12[data-tool="pairs"] .ybf12-controls{background:#fff;border-color:transparent}
.ybf12[data-tool="pairs"] .ybf12-btn-start{background:#7044a6;border-color:#7044a6}
.ybf12[data-tool="pairs"] .ybf12-panel{color:#253345}