:root{--bg: #ffffff;--text: #111;--card: #f7f7f7;--muted: #666;--primary: #2563eb;--danger: #dc2626;--border: #e5e7eb;--table-head: #f9fafb;--table-section: #f3f4f6;--table-cell: #ffffff;--table-diff: #ecfdf5}body[data-theme=dark]{--bg: #0b1220;--text: #f1f5f9;--card: #111a2e;--muted: #9aa4b2;--border: #22304b;--table-head: #111a2e;--table-section: #0f1b33;--table-cell: #0b1220;--table-diff: #123325}*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:var(--bg);color:var(--text)}.app{max-width:1100px;margin:auto;padding:16px 16px 120px}.header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--border);padding:10px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}.app-title{margin:0;font-size:16px;font-weight:800}.header-actions{display:flex;align-items:center;gap:10px}.search input{width:260px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);outline:none;margin:0}@media(max-width:700px){.header{flex-direction:column;align-items:stretch}.header-actions{width:100%;justify-content:space-between}.search input{width:100%}}.muted{color:var(--muted)}.small{font-size:12px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:500px){.grid{grid-template-columns:1fr}}.card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}.card-img{width:100%;height:150px;object-fit:cover}.card-body{padding:12px;display:flex;flex-direction:column;gap:8px}.card-title{display:flex;align-items:center;justify-content:space-between;width:-webkit-fill-available}.card-title h3{margin:0;font-size:15px}.price{font-size:16px;margin:0;display:flex;justify-content:end}.feature-list{padding-left:0;margin:0;color:var(--muted);font-size:13px}.spec-item{display:flex;gap:5px}.btn{padding:10px 12px;border:none;border-radius:10px;cursor:pointer;font-weight:700}.btn-primary{background:var(--primary);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}.compare-bar{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--border);padding:10px;border-radius:14px;gap:10px;flex-wrap:wrap}.compare-items{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.compare-chip{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);padding:7px 10px;border-radius:999px;font-size:13px}.chip-btn{background:transparent;border:none;cursor:pointer;font-size:14px;color:var(--danger)}.compare-bar.sticky{position:fixed;right:16px;bottom:16px;width:360px;z-index:50;box-shadow:0 10px 25px #00000014}@media(max-width:700px){.compare-bar.sticky{left:12px;right:12px;width:auto}}.drawer-overlay{position:fixed;inset:0;background:#00000059;z-index:60;opacity:0;transition:opacity .2s ease}.drawer-overlay.open{opacity:1}.drawer{position:fixed;top:0;right:0;height:100%;width:min(620px,92vw);background:var(--bg);border-left:1px solid var(--border);z-index:70;display:flex;flex-direction:column;padding:14px;overflow:hidden;transform:translate(40px) scale(.96);opacity:0;transform-origin:bottom right;transition:transform .25s ease,opacity .25s ease}.drawer.open{transform:translate(0) scale(1);opacity:1}.drawer-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}.drawer-title{margin:0}.drawer-close{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:10px;cursor:pointer;padding:8px 10px}.drawer-toolbar{display:flex;justify-content:flex-end;padding:4px 0 10px}.diff-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.drawer-table-scroll{flex:1;overflow:auto;border:1px solid var(--border);border-radius:12px}.drawer-footer{display:flex;gap:10px;justify-content:space-between;padding-top:12px}@media(max-width:700px){.drawer{top:auto;bottom:0;right:0;height:75vh;width:100%;border-left:none;border-top:1px solid var(--border);border-radius:16px 16px 0 0;transform:translateY(40px) scale(.98);transform-origin:bottom center}.drawer.open{transform:translateY(0) scale(1)}}.compare-table{width:100%;border-collapse:collapse;min-width:520px}.compare-table th,.compare-table td{border:1px solid var(--border)}.compare-table thead th{padding:10px;background:var(--table-head);font-size:13px;font-weight:800;text-align:left}.spec-label-row .spec-label{padding:8px;background:var(--table-section);font-size:14px;font-weight:600;text-align:left}.spec-value-row .spec-value{padding:10px;background:var(--table-cell);text-align:center;font-size:13px}.spec-value.diff{font-weight:500}.table-product-head{display:flex;align-items:center;gap:10px;text-align:left}.table-product-img{width:44px;height:44px;border-radius:12px;object-fit:cover;border:1px solid var(--border);flex-shrink:0}.table-product-meta{display:flex;flex-direction:column;gap:3px;min-width:0}.table-product-name{font-size:13px;font-weight:900;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.table-product-price{font-size:12px;font-weight:800;color:var(--text);opacity:.9}.brand-dot{width:10px;height:10px;border-radius:999px;display:inline-block;background:var(--muted)}@media(max-width:700px){.compare-table{min-width:0;width:100%}.table-product-name{max-width:110px}.compare-table thead th{padding:8px}.spec-value-row .spec-value{padding:8px;font-size:12px}}.app-title{margin:0;font-size:18px;font-weight:700;display:flex;align-items:center;gap:8px}