Design a fully working, production-grade inline Context Selection feature inside the existing Superfuel Workflow page (dark theme). The page must match the screenshot exactly: left sidebar, a header with the workflow title “Add Competitor Keywords to the Bullet Points,” and a numbered vertical list of workflow steps. Add a fully functional Select Context button on Step 1 (“Get ASIN from Context”) that expands an inline Context Selection Panel beneath Step 1 (not a separate page or full-screen drawer). The panel must support three tabs: Manual Input, Search & Filters, Saved Contexts. Use the Superfuel x shadcn style: Inter font, 8px grid, dark palette (background #0B0C0F, panel #131417, borders #2B2C2F, text #E6E6E6, secondary text #A0A3A8, accent #2563EB), 8px radii, subtle shadows, and 150ms ease motion. All copy must match the tone: concise, factual, and technical.
9839720
verified
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* Animation for panel */ | |
| @keyframes slideDown { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| #contextPanel { | |
| animation: slideDown 150ms ease-out forwards; | |
| } | |
| /* Tab styling */ | |
| .tab-btn { | |
| transition: all 150ms ease; | |
| } | |
| .tab-btn.active-tab { | |
| border-bottom-color: #2563EB; | |
| color: #E6E6E6; | |
| } | |
| /* Product card styling */ | |
| .product-card { | |
| transition: all 150ms ease; | |
| border: 1px solid #2B2C2F; | |
| } | |
| .product-card:hover { | |
| border-color: #2563EB; | |
| transform: translateY(-2px); | |
| } | |
| .product-card.selected { | |
| border-color: #2563EB; | |
| background-color: rgba(37, 99, 235, 0.08); | |
| } | |
| /* Chip buttons */ | |
| .chip-btn { | |
| transition: all 150ms ease; | |
| } | |
| .chip-btn:hover { | |
| border-color: #2563EB; | |
| color: #E6E6E6; | |
| } | |
| /* Scrollbar styling */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1E1F23; | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #2B2C2F; | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #3B3C3F; | |
| } | |
| /* Focus styles */ | |
| button:focus, input:focus, textarea:focus, select:focus { | |
| outline: 2px solid #2563EB; | |
| outline-offset: 2px; | |
| } |