.app{min-height:100vh;display:flex;flex-direction:column}.app__header{border-bottom:1px solid var(--ob-border);background:var(--ob-bg);position:sticky;top:0;z-index:10}.app__header-inner{display:flex;align-items:center;gap:1.5rem;padding:.75rem 1.5rem}.app__logo{font-size:1.25rem;color:var(--ob-text)}.app__logo:hover{text-decoration:none}.app__logo strong{color:var(--ob-primary)}.app__nav{display:flex;gap:.25rem;flex:1}.app__main{flex:1}.app__footer{border-top:1px solid var(--ob-border);padding:1.5rem 0;text-align:center;font-size:.875rem;color:var(--ob-text-muted)}.nav-link{padding:.5rem .75rem;border-radius:var(--ob-radius);color:var(--ob-text-muted);font-size:.875rem;font-weight:500}.nav-link:hover{background:var(--ob-bg-alt);color:var(--ob-text);text-decoration:none}.nav-link.active{color:var(--ob-primary);background:var(--ob-bg-alt)}:root{--ob-bg: #ffffff;--ob-bg-alt: #f8f9fa;--ob-text: #1a1a2e;--ob-text-muted: #6b7280;--ob-border: #e5e7eb;--ob-primary: #2563eb;--ob-primary-hover: #1d4ed8;--ob-radius: 8px;--ob-max-width: 1200px}[data-theme=dark]{--ob-bg: #101114;--ob-bg-alt: #1a1a2e;--ob-text: #e5e7eb;--ob-text-muted: #9ca3af;--ob-border: #374151;--ob-primary: #3b82f6;--ob-primary-hover: #60a5fa}*{margin:0;padding:0;box-sizing:border-box}html{font-family:system-ui,-apple-system,sans-serif;background:var(--ob-bg);color:var(--ob-text);line-height:1.6}a{color:var(--ob-primary);text-decoration:none}a:hover{text-decoration:underline}.container{max-width:var(--ob-max-width);margin:0 auto;padding:0 1.5rem}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:var(--ob-radius);border:1px solid var(--ob-border);background:var(--ob-bg);color:var(--ob-text);cursor:pointer;font-size:.875rem;font-weight:500;transition:all .15s}.btn:hover{border-color:var(--ob-primary)}.btn--primary{background:var(--ob-primary);color:#fff;border-color:var(--ob-primary)}.btn--primary:hover{background:var(--ob-primary-hover)}.card{background:var(--ob-bg-alt);border:1px solid var(--ob-border);border-radius:var(--ob-radius);padding:1.25rem}.grid{display:grid;gap:1rem}.grid--brands{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.grid--colors{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.badge{display:inline-block;padding:.125rem .5rem;border-radius:999px;font-size:.75rem;font-weight:500;background:var(--ob-bg-alt);border:1px solid var(--ob-border)}.search-input{width:100%;padding:.75rem 1rem;border:1px solid var(--ob-border);border-radius:var(--ob-radius);font-size:1rem;background:var(--ob-bg);color:var(--ob-text)}.search-input:focus{outline:2px solid var(--ob-primary)}