HTML
<div class="lego-wrapper">
    <h2 class="lego-title">Active Marketplace Listings</h2>
    
    <div class="marketplace-grid">
        <!-- Sidebar Filters -->
        <aside class="lego-sidebar">
            <div class="f-group">
                <label>Theme</label>
                <select>
                    <option>All Themes</option>
                    <option>Star Wars</option>
                    <option>Icons / Creator Expert</option>
                    <option>Technic</option>
                </select>
            </div>
            <div class="f-group">
                <label>Condition</label>
                <select>
                    <option>Any Condition</option>
                    <option>MISB (Sealed)</option>
                    <option>Used / Complete</option>
                </select>
            </div>
            <div class="f-group">
                <label>Completeness</label>
                <select>
                    <option>100% Complete</option>
                    <option>Missing Pieces</option>
                </select>
            </div>
            <div class="f-group">
                <label>Search Set #</label>
                <input type="text" placeholder="e.g. 10305">
            </div>
        </aside>

        <!-- Listings Grid -->
        <main class="listings-container">
            <!-- Set Card 1 -->
            <article class="lego-card">
                <div class="card-img">[ Set Photo Placeholder ]<span class="badge misb">MISB</span></div>
                <div class="card-info">
                    <span class="meta">Star Wars • Set 75313</span>
                    <h3>UCS AT-AT</h3>
                    <div class="specs">
                        <span>Pcs: 6,785</span><span>Minifigs: 9</span>
                        <span>Box: Mint</span><span>Manual: Yes</span>
                    </div>
                    <div class="card-footer">
                        <span class="price">$710.00</span>
                        <a href="#" class="lego-btn">View Listing</a>
                    </div>
                </div>
            </article>

            <!-- Set Card 2 -->
            <article class="lego-card">
                <div class="card-img">[ Set Photo Placeholder ]<span class="badge used">Used</span></div>
                <div class="card-info">
                    <span class="meta">Icons • Set 10497</span>
                    <h3>Galaxy Explorer</h3>
                    <div class="specs">
                        <span>Pcs: 1,254</span><span>Box: None</span>
                        <span>Complete: 100%</span><span>Manual: Digital</span>
                    </div>
                    <div class="card-footer">
                        <span class="price">$85.00</span>
                        <a href="#" class="lego-btn">View Listing</a>
                    </div>
                </div>
            </article>
        </div>
    </div>
</div>

<style>
.marketplace-grid { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; }
@media(max-width: 768px) { .marketplace-grid { grid-template-columns: 1fr; } }
.lego-sidebar { background: #fff; padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color); height: fit-content; }
.f-group { margin-bottom: 1.25rem; }
.f-group label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.9rem; }
.f-group select, .f-group input { width: 100%; padding: 0.6rem; border: 1px solid var(--border-color); border-radius: 4px; }
.listings-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.lego-card { background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); display: flex; flex-direction: column; }
.card-img { background: #eaedfc; height: 180px; display: flex; align-items: center; justify-content: center; position: relative; color: #888; font-size: 0.9rem; }
.badge { position: absolute; top: 10px; right: 10px; padding: 0.25rem 0.6rem; font-size: 0.75rem; font-weight: bold; border-radius: 4px; color: #fff; }
.badge.misb { background: var(--lego-blue); }
.badge.used { background: var(--lego-red); }
.card-info { padding: 1.25rem; display: flex; flex-direction: column; flex-grow: 1; }
.card-info h3 { font-size: 1.15rem; margin: 0.25rem 0 0.75rem 0; }
.meta { font-size: 0.8rem; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; font-size: 0.85rem; background: var(--light-bg); padding: 0.6rem; border-radius: 4px; margin-bottom: 1rem; }
.card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.price { font-size: 1.3rem; font-weight: 800; color: var(--lego-red); }
</style>

HTML
<div class="lego-wrapper">
    <div class="lego-form-card">
        <h2 class="lego-title">Submit a Wanted / Trade Request</h2>
        <form>
            <div class="lego-form-row">
                <div class="field-half">
                    <label>What are you looking to do?</label>
                    <select>
                        <option>WTB - Want to Buy (Cash Offer)</option>
                        <option>WTT - Want to Trade (Lego for Lego)</option>
                        <option>WTS - Want to Sell (List Inventory)</option>
                    </select>
                </div>
                <div class="field-half">
                    <label>Set Number or Set Name</label>
                    <input type="text" placeholder="e.g. 10332 Medieval Town Square">
                </div>
            </div>
            
            <div class="lego-form-row">
                <div class="field-half">
                    <label>Condition Wanted</label>
                    <select>
                        <option>New Sealed In Box (MISB)</option>
                        <option>Used - 100% Complete with Instructions</option>
                        <option>Open Box / Loose Parts</option>
                    </select>
                </div>
                <div class="field-half">
                    <label>Estimated Valuation / Trade Budget ($)</label>
                    <input type="number" placeholder="e.g. 230">
                </div>
            </div>

            <div style="margin-bottom: 1.5rem;">
                <label style="display:block; font-weight:600; margin-bottom:0.5rem;">Detailed Offer Notes</label>
                <textarea rows="4" placeholder="List exactly what sets/minifigures you have to offer in trade, or your specific shipping/payment conditions..."></textarea>
            </div>

            <button type="submit" class="lego-btn lego-btn-blue" style="width:100%; padding: 0.8rem;">Publish Request to Board</button>
        </form>
    </div>
</div>

<style>
.lego-form-card { background: #fff; padding: 2rem; border-radius: 8px; border: 1px solid var(--border-color); }
.lego-form-row { display: flex; gap: 1.5rem; margin-bottom: 1.25rem; }
@media(max-width: 768px) { .lego-form-row { flex-direction: column; gap: 1.25rem; } }
.field-half { flex: 1; }
.lego-form-card label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
.lego-form-card input, .lego-form-card select, .lego-form-card textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.95rem; }
</style>

HTML
<div class="lego-wrapper">
    <div class="tracker-dashboard">
        <h2 class="lego-title">
            Collection Inventory Tracker
            <span class="total-value">Total Collection Value: $1,430.00</span>
        </h2>
        
        <div class="table-scroll-wrapper">
            <table class="tracker-table">
                <thead>
                    <tr>
                        <th>Set #</th>
                        <th>Set Name</th>
                        <th>Theme</th>
                        <th>Paid Price</th>
                        <th>Current Value</th>
                        <th>YTD Trend</th>
                        <th>Collection Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><strong>10305</strong></td>
                        <td>Lion Knights' Castle</td>
                        <td>Icons</td>
                        <td>$399.99</td>
                        <td>$430.00</td>
                        <td class="trend up">+7.5%</td>
                        <td><span class="status-pill built">Built / Displayed</span></td>
                    </tr>
                    <tr>
                        <td><strong>75192</strong></td>
                        <td>UCS Millennium Falcon</td>
                        <td>Star Wars</td>
                        <td>$849.99</td>
                        <td>$880.00</td>
                        <td class="trend up">+3.5%</td>
                        <td><span class="status-pill sealed">Sealed Box</span></td>
                    </tr>
                    <tr>
                        <td><strong>21325</strong></td>
                        <td>Medieval Blacksmith</td>
                        <td>Ideas</td>
                        <td>$149.99</td>
                        <td>$120.00</td>
                        <td class="trend down">-20.0%</td>
                        <td><span class="status-pill parted">Parted Out</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
.tracker-dashboard { background: #fff; border-radius: 8px; border: 1px solid var(--border-color); overflow: hidden; }
.total-value { font-size: 1rem; font-weight: 400; color: #555; background: var(--light-bg); padding: 0.4rem 0.8rem; border-radius: 4px; }
.table-scroll-wrapper { overflow-x: auto; }
.tracker-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.95rem; }
.tracker-table th, .tracker-table td { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); }
.tracker-table th { background: #F9FAFB; font-weight: 700; color: #444; }
.trend.up { color: #22c55e; font-weight: 700; }
.trend.down { color: #ef4444; font-weight: 700; }
.status-pill { padding: 0.25rem 0.6rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.status-pill.built { background: #dcfce7; color: #15803d; }
.status-pill.sealed { background: #fef9c3; color: #854d0e; }
.status-pill.parted { background: #fee2e2; color: #b91c1c; }
</style>