:root{--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #e9ecef;--text-primary: #1a1a1a;--text-secondary: #495057;--text-muted: #6c757d;--accent: #0066cc;--accent-hover: #0052a3;--border: #dee2e6;--border-light: #e9ecef;--table-header-bg: #212529;--table-header-text: #ffffff;--table-row-odd: #f8f9fa;--table-row-even: #ffffff;--table-row-hover: #e9ecef;--header-bg: #2c5282;--header-text: #ffffff;--tier-basic-bg: transparent;--tier-basic-border: transparent;--tier-preferred-bg: rgba(255, 193, 7, .1);--tier-preferred-border: #ffc107;--tier-extended-bg: rgba(255, 140, 0, .15);--tier-extended-border: #ff8c00;--success: #28a745;--warning: #ffc107;--danger: #dc3545;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--transition-fast: .15s ease;--transition-normal: .25s ease}@media (prefers-color-scheme: dark){:root{--bg-primary: #1a1a1a;--bg-secondary: #242424;--bg-tertiary: #2d2d2d;--text-primary: #e0e0e0;--text-secondary: #a0a0a0;--text-muted: #6c757d;--accent: #4da6ff;--accent-hover: #7fbfff;--border: #404040;--border-light: #333333;--table-header-bg: #0d0d0d;--table-header-text: #e0e0e0;--table-row-odd: #242424;--table-row-even: #1a1a1a;--table-row-hover: #2d2d2d;--header-bg: #1e3a5f;--header-text: #ffffff;--tier-basic-bg: transparent;--tier-basic-border: transparent;--tier-preferred-bg: rgba(255, 193, 7, .15);--tier-preferred-border: #ffc107;--tier-extended-bg: rgba(255, 140, 0, .2);--tier-extended-border: #ff8c00;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);--shadow-md: 0 4px 6px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .3)}}*{box-sizing:border-box}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0;color:var(--text-primary);background-color:var(--bg-primary)}#app{display:flex;flex-direction:column;min-height:100vh}header{display:flex;justify-content:space-between;align-items:center;background-color:var(--header-bg);padding:0 var(--spacing-md);position:sticky;top:0;z-index:100;box-shadow:var(--shadow-md)}.headerlogo{color:var(--header-text);font-size:1.5rem;font-weight:600;padding:var(--spacing-sm) 0;text-decoration:none}.headerlogo:hover{opacity:.9}header nav{display:flex;gap:var(--spacing-xs)}header a{color:var(--header-text);padding:var(--spacing-sm) var(--spacing-md);text-decoration:none;border-radius:var(--radius-sm);transition:background-color var(--transition-fast)}header a:hover{background-color:#ffffff1a}header a.active{background-color:#fff3}main{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:var(--spacing-lg)}footer{background-color:var(--bg-secondary);border-top:1px solid var(--border);padding:var(--spacing-md) var(--spacing-lg);text-align:center;color:var(--text-muted);font-size:.875rem}footer p{max-width:800px;margin:0 auto}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;font-family:inherit;font-size:inherit}@media (max-width: 768px){header{flex-direction:column;padding:var(--spacing-sm)}header nav{width:100%;justify-content:center;flex-wrap:wrap}header a{padding:var(--spacing-xs) var(--spacing-sm);font-size:.875rem}main{padding:var(--spacing-md)}}.page-header{display:flex;align-items:flex-start;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.page-header-image{width:64px;height:64px;object-fit:contain;flex-shrink:0}.page-header-text{flex:1}.page-title{font-size:1.75rem;font-weight:600;color:var(--text-primary);margin:0 0 var(--spacing-lg) 0}.page-header .page-title{margin-bottom:var(--spacing-xs)}.page-subtitle{font-size:1rem;color:var(--text-secondary);margin:-var(--spacing-md) 0 var(--spacing-lg) 0}.page-header .page-subtitle{margin:0}.tier-legend{display:flex;flex-wrap:wrap;gap:var(--spacing-lg);margin-bottom:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--bg-secondary);border-radius:var(--radius-md);font-size:.875rem;align-items:center;justify-content:space-between}.tier-legend-items{display:flex;gap:var(--spacing-lg)}.tier-toggle{display:flex;align-items:center}.tier-toggle-label{display:flex;align-items:center;gap:var(--spacing-xs);cursor:pointer;-webkit-user-select:none;user-select:none}.tier-toggle-label input{width:18px;height:18px;cursor:pointer}.tier-toggle-text{font-size:.875rem;color:var(--text-secondary)}.tier-legend-item{display:flex;align-items:center;gap:var(--spacing-xs)}.tier-legend-swatch{width:16px;height:16px;border-radius:var(--radius-sm);border:2px solid transparent}.tier-legend-swatch.basic{background-color:var(--tier-basic-bg);border-color:var(--border);border-style:dashed}.tier-legend-swatch.preferred{background-color:var(--tier-preferred-bg);border-color:var(--tier-preferred-border);border-style:dashed}.tier-legend-swatch.extended{background-color:var(--tier-extended-bg);border-color:var(--tier-extended-border)}.component-grid-container{overflow-x:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.component-grid{width:100%;border-collapse:collapse;font-size:.875rem}.component-grid th{background-color:var(--table-header-bg);color:var(--table-header-text);padding:var(--spacing-md);text-align:center;font-weight:600;white-space:nowrap;position:sticky;top:0;z-index:10}.component-grid th:first-child{text-align:left;position:sticky;left:0;top:0;z-index:12}.component-grid td{padding:var(--spacing-sm) var(--spacing-md);text-align:center;border-bottom:1px solid var(--border-light);vertical-align:top}.component-grid td:first-child{text-align:left;font-weight:500;background-color:inherit;position:sticky;left:0;z-index:1}.component-grid tbody tr:nth-child(odd){background-color:var(--table-row-odd)}.component-grid tbody tr:nth-child(2n){background-color:var(--table-row-even)}.component-grid tbody tr:hover{background-color:var(--table-row-hover)}.package-header{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.package-header img{max-width:80px;height:auto;border-radius:var(--radius-sm)}.jlc-link-wrapper{display:inline-flex;align-items:center;position:relative}.jlc-copy-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;margin-left:4px;border:1px solid var(--border);border-radius:var(--radius-sm);background-color:var(--bg-secondary);color:var(--text-muted);cursor:pointer;opacity:0;transition:all var(--transition-fast)}.jlc-link-wrapper:hover .jlc-copy-btn{opacity:1}.jlc-copy-btn:hover{background-color:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border)}.jlc-copy-btn.copied{background-color:var(--success);border-color:var(--success);color:#fff;opacity:1}.jlc-link{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);font-family:monospace;font-size:.8rem;text-decoration:none;color:var(--text-primary);border:1px dashed var(--border);background-color:var(--bg-primary)}.jlc-link:hover{background-color:var(--bg-tertiary);text-decoration:none}.jlc-link.copied{background-color:var(--success);color:#fff;border-color:var(--success)}.jlc-link.preferred{background-color:var(--tier-preferred-bg);border:1px dashed var(--tier-preferred-border)}.jlc-link.preferred:hover{background-color:#ffc10733}.jlc-link.extended{background-color:var(--tier-extended-bg);border:1px solid var(--tier-extended-border)}.jlc-link.extended:hover{background-color:#ff8c0040}.jlc-link.has-specs{flex-direction:column;align-items:center;gap:1px;padding:var(--spacing-xs) var(--spacing-sm)}.jlc-link-specs{font-size:.65rem;color:var(--text-muted);font-family:inherit}.jlc-link-check{font-size:.75rem;margin-left:2px}.jlc-tooltip{position:fixed;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 4px 20px #00000040;z-index:99999;width:240px;text-align:left;font-size:.75rem;pointer-events:none}.jlc-tooltip-header{font-weight:600;font-size:.875rem;color:var(--text-primary);margin-bottom:4px}.jlc-tooltip-tier{color:var(--text-secondary);margin-bottom:4px}.jlc-tooltip-friendly{color:var(--text-primary);font-weight:600;font-size:.9rem;margin-bottom:6px}.jlc-tooltip-info{color:var(--text-primary);font-weight:500}.jlc-tooltip-desc{color:var(--text-secondary);margin-top:4px;line-height:1.4;max-height:60px;overflow:hidden;text-overflow:ellipsis}.jlc-tooltip-hint{margin-top:8px;padding-top:6px;border-top:1px solid var(--border-light);color:var(--text-muted);font-size:.75rem}.cell-empty{color:var(--text-muted);font-style:italic}.datasheet-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted);transition:color var(--transition-fast)}.datasheet-icon:hover{color:#c62828}.stacked-parts{display:flex;flex-direction:column;gap:var(--spacing-sm)}.stacked-cell{display:flex;flex-direction:column;align-items:center;gap:1px}.cell-specs{font-size:.65rem;color:var(--text-muted);white-space:nowrap}.component-notes{margin-top:4px;padding:4px 8px;background-color:var(--bg-tertiary);border-left:2px solid var(--accent);font-size:.75rem;color:var(--text-secondary);font-style:italic}.part-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.part-header-main{flex:1;min-width:0}.part-friendly-desc{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin:0 0 var(--spacing-sm) 0;line-height:1.3}.part-identity{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--spacing-xs);margin:0}.part-mpn{font-size:1rem;font-weight:500;color:var(--text-secondary)}.part-mfr{font-size:1.125rem;color:var(--text-muted)}.part-jlc-pill{flex-shrink:0;font-size:1.25rem;font-weight:600;font-family:monospace;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--accent);color:#fff;border-radius:999px;white-space:nowrap}.part-jlc-pill:hover{background-color:var(--accent-hover)}.part-jlc-pill.copied{background-color:var(--success)}.copyable-text{display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:2px 6px;margin:-2px -6px;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.copyable-text:hover{background-color:var(--bg-tertiary)}.copyable-text.copied{background-color:var(--success);color:#fff}.copyable-icon{display:inline-flex;align-items:center;opacity:0;transition:opacity var(--transition-fast);color:var(--text-muted)}.copyable-text:hover .copyable-icon{opacity:1}.copyable-text.copied .copyable-icon{opacity:1;color:#fff}.part-jlc-pill .copyable-icon{color:#ffffffb3}.part-jlc-pill:hover .copyable-icon{color:#fff}@media (max-width: 768px){.part-header{flex-direction:column;gap:var(--spacing-md)}.part-jlc-pill{align-self:flex-start}.part-friendly-desc{font-size:1.25rem}}.part-details-card{background-color:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--spacing-lg)}.part-details-table{width:100%;border-collapse:collapse}.part-details-table th{text-align:left;padding:var(--spacing-sm) var(--spacing-md);color:var(--text-secondary);font-weight:500;width:120px;vertical-align:top}.part-details-table td{padding:var(--spacing-sm) var(--spacing-md);color:var(--text-primary)}.part-details-table tr:not(:last-child){border-bottom:1px solid var(--border-light)}.detail-button{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border);border-radius:var(--radius-sm);background-color:var(--bg-secondary);color:var(--text-primary);text-decoration:none;font-size:.875rem;transition:all var(--transition-fast)}.detail-button:hover{background-color:var(--bg-tertiary);text-decoration:none}.detail-button.primary{background-color:var(--accent);border-color:var(--accent);color:#fff}.detail-button.primary:hover{background-color:var(--accent-hover)}.detail-button.datasheet{background:linear-gradient(135deg,#e53935,#c62828);border-color:#c62828;color:#fff;font-weight:600;font-size:1rem;padding:var(--spacing-md) var(--spacing-lg);box-shadow:0 2px 8px #c628284d}.detail-button.datasheet:hover{background:linear-gradient(135deg,#f44336,#d32f2f);box-shadow:0 4px 12px #c6282866;transform:translateY(-1px)}.detail-button.datasheet svg{flex-shrink:0}.temp-class-guide{margin-bottom:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--bg-secondary);border-radius:var(--radius-md);font-size:.75rem}.temp-class-guide-header{display:flex;align-items:baseline;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.temp-class-guide-header strong{color:var(--text-primary);font-size:.875rem}.temp-class-guide-subtitle{color:var(--text-muted);font-size:.75rem}.temp-class-table{width:100%;border-collapse:collapse;font-size:.75rem}.temp-class-table th{text-align:left;padding:var(--spacing-xs) var(--spacing-sm);color:var(--text-secondary);font-weight:600;border-bottom:1px solid var(--border-light)}.temp-class-table td{padding:var(--spacing-xs) var(--spacing-sm);color:var(--text-secondary)}.temp-class-table td:first-child{font-family:monospace;color:var(--text-primary)}.temp-class-table td b{font-weight:600}.filter-bar{display:flex;flex-wrap:wrap;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background-color:var(--bg-secondary);border-radius:var(--radius-md)}.filter-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.filter-group label{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.filter-group select{padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--border);border-radius:var(--radius-sm);background-color:var(--bg-primary);color:var(--text-primary);font-size:.875rem;min-width:120px}.filter-group select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #06c3}.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-lg);padding:var(--spacing-lg) 0}.home-card{background-color:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--spacing-xl);text-decoration:none;color:var(--text-primary);transition:all var(--transition-normal)}.home-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent);text-decoration:none}.home-card-image{width:80px;height:80px;object-fit:contain;margin-bottom:var(--spacing-sm)}.home-card h2{margin:0 0 var(--spacing-sm) 0;font-size:1.25rem;color:var(--text-primary)}.home-card p{margin:0;color:var(--text-secondary);font-size:.875rem}.home-card.coming-soon{opacity:.6;cursor:not-allowed}.home-card.coming-soon:hover{transform:none;box-shadow:none;border-color:var(--border)}.component-grid th:first-child,.component-grid td:first-child{background-color:var(--bg-primary)}.component-grid tbody tr:nth-child(odd) td:first-child{background-color:var(--table-row-odd)}.component-grid tbody tr:nth-child(2n) td:first-child{background-color:var(--table-row-even)}.component-grid tbody tr:hover td:first-child{background-color:var(--table-row-hover)}.component-grid th:first-child:after,.component-grid td:first-child:after{content:"";position:absolute;top:0;right:-8px;bottom:0;width:8px;background:linear-gradient(to right,rgba(0,0,0,.08),transparent);pointer-events:none}.component-grid th:first-child,.component-grid td:first-child{position:sticky;left:0;z-index:1}@media (max-width: 768px){.component-grid{font-size:.75rem}.component-grid th,.component-grid td{padding:var(--spacing-xs) var(--spacing-sm)}.jlc-link{padding:var(--spacing-sm) var(--spacing-md);min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}.package-header img{max-width:50px}.filter-bar{flex-direction:column}.filter-group{width:100%}.filter-group select{width:100%;min-height:44px}.filter-bar button{min-height:44px;padding:var(--spacing-sm) var(--spacing-md)}.home-card{padding:var(--spacing-lg)}.page-title{font-size:1.5rem}.page-subtitle{font-size:.875rem}.tier-legend{flex-direction:column;gap:var(--spacing-sm)}.temp-class-guide{overflow-x:auto}.temp-class-table{min-width:400px}}