*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #111;--bg-secondary: #1a1a1a;--bg-row: #1e1e1e;--bg-row-alt: #222;--bg-row-hover: #2a2a2a;--border: #333;--text-primary: #e0e0e0;--text-secondary: #888;--text-muted: #555;--accent: #c8a84b;--green: #4caf50;--red: #f44336;--blue: #2196f3}html{font-size:16px;background:var(--bg-primary);color:var(--text-primary)}body{font-family:Courier New,Courier,monospace;min-height:100vh;display:flex;flex-direction:column}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.site-header{padding:1rem;border-bottom:2px solid var(--border);background:var(--bg-secondary)}.site-header h1{font-size:1.4rem;font-weight:700;color:var(--text-primary);margin:0;text-transform:uppercase;letter-spacing:.05em}.site-header .subtitle{color:var(--text-secondary);font-size:.85rem;margin:.25rem 0 0}.layout{display:grid;grid-template-columns:220px 1fr;grid-template-rows:auto 1fr;min-height:calc(100vh - 80px)}.filter-container{grid-column:1;grid-row:1 / -1;border-right:2px solid var(--border);background:var(--bg-secondary);overflow-y:auto}.main-content{grid-column:2;grid-row:1 / -1;display:flex;flex-direction:column;overflow-x:auto}.controls-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid var(--border);background:var(--bg-secondary);gap:.5rem}.controls-right{display:flex;align-items:center;gap:0;flex:1;justify-content:flex-end}.result-count{font-size:.85rem;color:var(--text-secondary);letter-spacing:0;white-space:nowrap;flex-shrink:1}.filter-toggle{display:none;padding:.35rem .75rem;background:#222;color:var(--text-secondary);border:1px solid var(--border);border-right:none;font-family:inherit;font-size:.8rem;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;transition:all .15s;min-width:110px;text-align:center}.filter-toggle:hover{background:#333;color:var(--text-primary)}.filter-toggle.has-filters{background:var(--accent);color:#000;border-color:var(--accent)}.sort-select{padding:.35rem .5rem;background:#222;border:1px solid var(--border);color:var(--text-primary);font-family:inherit;font-size:.8rem;cursor:pointer;flex:1;max-width:180px;min-width:0}.sort-select:focus{outline:none;border-color:var(--accent)}footer{margin-top:auto;padding:1rem;border-top:1px solid var(--border);color:var(--text-muted);font-size:.8rem;text-align:center}@media(max-width:768px){.layout{grid-template-columns:1fr;grid-template-rows:auto auto 1fr}.main-content{grid-column:1;grid-row:1}.filter-container{grid-column:1;grid-row:2;display:none;border-right:none;border-bottom:2px solid var(--border)}.filter-container.open{display:block}.filter-toggle{display:block;min-width:0;flex-shrink:1}.controls-row{flex-wrap:wrap;gap:.4rem}.controls-right{width:100%;flex:none}.sort-select{flex:1;max-width:none;min-width:0}.result-count{font-size:.75rem}}.filters{padding:.75rem}.filter-group{margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border)}.filter-group:last-child{border-bottom:none}.filter-label{display:block;font-size:.75rem;font-weight:700;color:var(--text-secondary);letter-spacing:.1em;margin-bottom:.5rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;padding:.2rem 0;color:var(--text-primary);font-size:.9rem;cursor:pointer}.checkbox-label:hover{color:var(--accent)}input[type=checkbox]{accent-color:var(--accent);cursor:pointer}.search-input,.select-input{width:100%;padding:.4rem .5rem;background:#111;border:1px solid var(--border);color:var(--text-primary);font-family:inherit;font-size:.9rem}.search-input:focus,.select-input:focus{outline:none;border-color:var(--accent)}.reset-btn{width:100%;padding:.5rem;background:#222;color:var(--text-secondary);border:1px solid var(--border);font-family:inherit;font-size:.75rem;letter-spacing:.1em;cursor:pointer;text-transform:uppercase}.reset-btn:hover{background:#333;color:var(--text-primary)}.filter-close{display:none}@media(max-width:768px){.filter-close{display:block;position:absolute;top:.75rem;right:.75rem;background:none;border:none;color:var(--text-secondary);font-size:1.1rem;cursor:pointer;padding:.25rem .5rem;line-height:1}.filter-close:hover{color:var(--text-primary)}#filterContainer.open{display:block;position:fixed;top:0;left:0;width:80%;max-width:320px;height:100vh;overflow-y:auto;background:var(--bg-secondary, #111);border-right:1px solid var(--border);z-index:999;padding:1rem}}.table-heading{padding:.75rem 1rem;font-size:1rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--border);background:var(--bg-secondary)}.keyboard-table{width:100%;border-collapse:collapse;font-size:.9rem}thead{position:sticky;top:0;z-index:10}th{padding:.6rem .75rem;text-align:left;background:#111;color:var(--text-secondary);font-size:.75rem;letter-spacing:.1em;border-bottom:2px solid var(--border);white-space:nowrap}th.sortable{cursor:pointer}th.sortable:hover{color:var(--accent)}.product-row{border-bottom:1px solid var(--border);background:var(--bg-row)}.product-row:nth-child(2n){background:var(--bg-row-alt)}.product-row:hover{background:var(--bg-row-hover)}.product-row.hidden{display:none}td{padding:.5rem .75rem;vertical-align:middle}.product-title{cursor:pointer}.product-title:hover{color:var(--accent)}.col-img{width:70px}.product-thumb{display:block;object-fit:contain;background:#fff;padding:2px;cursor:pointer;transition:opacity .15s}.product-thumb:hover{opacity:.8}.col-title{min-width:200px;max-width:320px}.product-title{color:var(--text-primary);line-height:1.3;margin-bottom:.25rem;font-size:.9rem}.product-meta{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}.brand-tag{color:var(--text-secondary);font-size:.8rem}.badge{font-size:.65rem;padding:.1rem .3rem;border-radius:2px;text-transform:uppercase;letter-spacing:.05em}.badge-choice{background:#1a3a1a;color:var(--green);border:1px solid var(--green)}.badge-seller{background:#3a2a1a;color:var(--accent);border:1px solid var(--accent)}.col-price{white-space:nowrap}.price{font-size:1.1rem;font-weight:700;color:var(--accent)}.col-rating{white-space:nowrap}.stars{color:var(--accent)}.review-count{color:var(--text-muted);font-size:.8rem}.tag{display:inline-block;padding:.15rem .35rem;background:#222;border:1px solid var(--border);color:var(--text-secondary);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;margin:.1rem;white-space:nowrap}.tag-dim{opacity:.4}.tag-conn{border-color:#2196f355;color:var(--blue)}.features{display:flex;gap:.3rem;flex-wrap:wrap}.feat{font-size:.9rem;cursor:default}.col-buy{white-space:nowrap}.buy-btn{display:inline-block;padding:.4rem .75rem;background:var(--accent);color:#000;font-weight:700;font-size:.82rem;letter-spacing:.1em;text-decoration:none;transition:background .15s}.buy-btn:hover{background:#e0bf6a;text-decoration:none}@media(max-width:768px){.col-switch,.col-layout,.col-conn{display:none}}.modal-overlay{display:none;position:fixed;inset:0;background:#000000d9;z-index:1000;align-items:center;justify-content:center;padding:1rem}.modal-overlay.open{display:flex}.modal-box{position:relative;background:var(--bg-secondary);border:1px solid var(--border);max-width:500px;width:100%;padding:1.5rem}.modal-close{position:absolute;top:.5rem;right:.75rem;background:none;border:none;color:var(--text-secondary);font-size:1.2rem;cursor:pointer;line-height:1}.modal-close:hover{color:var(--text-primary)}.modal-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.modal-image-wrap{background:#fff;padding:1rem;width:100%;display:flex;align-items:center;justify-content:center}.modal-image{max-width:300px;max-height:300px;width:100%;object-fit:contain}.modal-info{width:100%;display:flex;flex-direction:column;gap:.75rem}.modal-title{color:var(--text-primary);font-size:.9rem;line-height:1.4}.modal-price{color:var(--accent);font-size:1.3rem;font-weight:700}.modal-buy-btn{display:block;text-align:center;padding:.75rem;background:var(--accent);color:#000;font-weight:700;font-size:.9rem;letter-spacing:.1em;text-decoration:none;transition:background .15s}.modal-buy-btn:hover{background:#e0bf6a;text-decoration:none}@media(max-width:768px){.modal-image{max-width:200px;max-height:200px}}
