← back to Handbag Authentication
views/product.ejs
657 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= product.title %> - LuxArb Prime</title>
<meta name="description" content="Detailed arbitrage analysis for <%= product.title %>">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/product.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
</head>
<body>
<header>
<div class="container">
<h1><a href="/">💎 LuxArb Prime</a></h1>
<p class="tagline">Cross-Border Luxury Arbitrage Intelligence</p>
</div>
</header>
<main class="container product-detail">
<!-- Back Button -->
<div class="back-nav">
<a href="/" class="btn-back">← Back to Listings</a>
</div>
<!-- Product Header -->
<div class="product-header">
<div class="product-images">
<img src="<%= product.image_url %>" alt="<%= product.title %>" class="main-image">
<div class="image-actions">
<button class="btn-zoom" onclick="zoomImage()">🔍 Zoom</button>
<button class="btn-reverse-search" onclick="reverseImageSearch()">🔎 Reverse Search</button>
</div>
</div>
<div class="product-summary">
<h2><%= product.title %></h2>
<div class="product-meta">
<span class="badge badge-brand"><%= product.brand || 'Unknown' %></span>
<span class="badge badge-source"><%= product.source %></span>
<span class="badge badge-condition"><%= product.condition || 'Used' %></span>
<% if (product.listing_type) { %>
<span class="badge badge-type"><%= product.listing_type %></span>
<% } %>
</div>
<!-- Quick Stats -->
<div class="quick-stats">
<div class="stat-box highlight">
<label>Japan Price</label>
<h3>¥<%= product.price_jpy.toLocaleString() %></h3>
<p>$<%= product.price_usd %> USD</p>
</div>
<div class="stat-box">
<label>Est. US Retail</label>
<h3 id="est-us-price">-</h3>
<p id="retail-source">Market Average</p>
</div>
<div class="stat-box profit">
<label>Potential Profit</label>
<h3 id="profit-amount">-</h3>
<p id="profit-margin">-</p>
</div>
</div>
<!-- Action Buttons -->
<div class="action-buttons">
<a href="<%= product.product_url %>" target="_blank" rel="noopener noreferrer" class="btn-primary">
🛒 View on <%= product.source %>
</a>
<button class="btn-presell" onclick="presellItem()">
⚡ Presell Strategy
</button>
<button class="btn-compare" onclick="compareAllPlatforms()">
📊 Compare All Platforms
</button>
</div>
</div>
</div>
<!-- Tabs -->
<div class="tabs">
<button class="tab active" data-tab="crosslist">🚀 Cross-List to USA</button>
<button class="tab" data-tab="analysis">📈 Arbitrage Analysis</button>
<button class="tab" data-tab="sku">🔍 SKU Details</button>
<button class="tab" data-tab="retailer">🏬 Brand Retailer Match</button>
<button class="tab" data-tab="platforms">🚀 Resale Platforms</button>
<button class="tab" data-tab="guide">📚 US Resale Guide</button>
<button class="tab" data-tab="comps">💰 Sold Comps</button>
</div>
<!-- Tab Content: Cross-List to USA -->
<div class="tab-content active" id="crosslist">
<h3>🚀 One-Click Cross-Listing to US Platforms</h3>
<div class="sku-section">
<h4>📦 Your Product SKU</h4>
<div class="sku-display">
<code class="sku-code"><%= sku %></code>
<button onclick="copySKU()" class="btn-copy">Copy SKU</button>
</div>
<p class="sku-note">Use this SKU across all platforms for consistent inventory tracking</p>
</div>
<div class="quick-list-buttons" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
<% Object.entries(crossListingLinks).forEach(([platform, data]) => { %>
<div class="platform-quick-card" style="background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
<h4 style="margin: 0 0 0.5rem 0; font-size: 1.3rem;"><%= data.url.includes('ebay') ? 'eBay' : data.url.includes('posh') ? 'Poshmark' : data.url.includes('mercari') ? 'Mercari' : data.url.includes('vestiaire') ? 'Vestiaire' : data.url.includes('realreal') ? 'The RealReal' : 'Fashionphile' %></h4>
<p style="font-size: 0.9rem; color: #666; margin-bottom: 1rem;"><%= data.quickStart %></p>
<a href="<%= data.url %>" target="_blank" rel="noopener noreferrer" class="btn-primary" style="display: block; text-align: center; padding: 0.75rem; text-decoration: none;">
🚀 List on <%= data.url.includes('ebay') ? 'eBay' : data.url.includes('posh') ? 'Poshmark' : data.url.includes('mercari') ? 'Mercari' : data.url.includes('vestiaire') ? 'Vestiaire' : data.url.includes('realreal') ? 'RealReal' : 'Fashionphile' %>
</a>
</div>
<% }); %>
</div>
<div class="platform-profits">
<h4>💰 Profit Calculator by Platform</h4>
<table class="platform-profit-table" style="width: 100%; border-collapse: collapse; background: white; border-radius: 10px; overflow: hidden;">
<thead>
<tr style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
<th style="padding: 1rem; text-align: left;">Platform</th>
<th style="padding: 1rem; text-align: right;">List Price</th>
<th style="padding: 1rem; text-align: right;">Fees</th>
<th style="padding: 1rem; text-align: right;">Net Profit</th>
<th style="padding: 1rem; text-align: right;">ROI</th>
<th style="padding: 1rem;">Notes</th>
</tr>
</thead>
<tbody>
<% Object.entries(platformProfits).forEach(([key, profit]) => { %>
<tr style="border-bottom: 1px solid #eee;">
<td style="padding: 1rem; font-weight: 600;"><%= profit.platform %></td>
<td style="padding: 1rem; text-align: right; font-weight: 600;">$<%= profit.suggestedPrice %></td>
<td style="padding: 1rem; text-align: right; color: #e74c3c;">-$<%= profit.totalFees %></td>
<td style="padding: 1rem; text-align: right; font-weight: 700; color: <%= parseFloat(profit.netProfit) > 0 ? '#27ae60' : '#e74c3c' %>;">
$<%= profit.netProfit %>
</td>
<td style="padding: 1rem; text-align: right; font-weight: 700; color: <%= parseFloat(profit.roiPercent) > 20 ? '#27ae60' : '#f39c12' %>;">
<%= profit.roiPercent %>%
</td>
<td style="padding: 1rem; font-size: 0.85rem; color: #666;"><%= profit.notes.substring(0, 60) %>...</td>
</tr>
<% }); %>
</tbody>
</table>
</div>
<div class="data-extraction" style="margin-top: 2rem; padding: 1.5rem; background: #f8f9fa; border-radius: 10px;">
<h4>🔍 Extract Full Product Data from Yahoo Japan</h4>
<p>Click below to scrape full product details, images, condition notes, and more from the source listing:</p>
<button onclick="extractYahooData()" class="btn-primary" id="extract-btn">
🔄 Extract Full Yahoo Data
</button>
<div id="extracted-data" style="margin-top: 1rem; display: none;"></div>
</div>
</div>
<!-- Tab Content: Analysis -->
<div class="tab-content" id="analysis">
<h3>💰 Complete Arbitrage Breakdown</h3>
<div class="cost-breakdown">
<table class="breakdown-table">
<thead>
<tr>
<th>Item</th>
<th>Amount</th>
<th>Notes</th>
</tr>
</thead>
<tbody id="cost-breakdown-body">
<!-- Populated by JS -->
</tbody>
</table>
</div>
<div class="profit-scenarios">
<h4>📊 Profit Scenarios by Platform</h4>
<div id="platform-scenarios"></div>
</div>
<div class="negotiation-strategy">
<h4>💬 Negotiation Intelligence</h4>
<div id="negotiation-tips"></div>
</div>
</div>
<!-- Tab Content: SKU Details -->
<div class="tab-content" id="sku">
<h3>🔍 Product Identification & SKU Data</h3>
<div class="sku-grid">
<div class="sku-card">
<h4>Extracted Details</h4>
<table class="detail-table">
<tr><td>Brand</td><td id="sku-brand">-</td></tr>
<tr><td>Model</td><td id="sku-model">-</td></tr>
<tr><td>Size</td><td id="sku-size">-</td></tr>
<tr><td>Color</td><td id="sku-color">-</td></tr>
<tr><td>Material</td><td id="sku-material">-</td></tr>
<tr><td>Condition</td><td id="sku-condition">-</td></tr>
<tr><td>External ID</td><td id="sku-external-id">-</td></tr>
</table>
</div>
<div class="sku-card">
<h4>Authentication Markers</h4>
<div id="auth-checklist">
<p>🔐 Key authentication points to verify:</p>
<ul id="auth-points"></ul>
</div>
</div>
<div class="sku-card">
<h4>Market Intelligence</h4>
<div id="market-intel">
<!-- Populated by StockX/Rebag API data -->
</div>
</div>
</div>
</div>
<!-- Tab Content: Brand Retailer Match -->
<div class="tab-content" id="retailer">
<h3>🏬 Find NEW Version on Brand Website</h3>
<p class="retailer-note">Compare this used item to the NEW retail version to understand depreciation and value</p>
<div class="retailer-grid" id="retailer-links">
<!-- Populated by JS with brand-specific links -->
</div>
<div class="retail-comparison">
<h4>📊 New vs. Used Value Analysis</h4>
<canvas id="valueComparisonChart" width="400" height="200"></canvas>
</div>
</div>
<!-- Tab Content: Sales History -->
<div class="tab-content" id="history">
<h3>📊 Historical Sales Data & Price Trends</h3>
<div class="history-sources">
<button class="source-btn active" data-source="stockx">StockX</button>
<button class="source-btn" data-source="rebag">Rebag Clair</button>
<button class="source-btn" data-source="fashionphile">Fashionphile</button>
<button class="source-btn" data-source="1stdibs">1stDibs</button>
</div>
<div class="price-history">
<canvas id="priceHistoryChart" width="800" height="400"></canvas>
</div>
<div class="history-stats">
<div class="stat-card">
<h4>Average Sale Price</h4>
<p id="avg-sale-price">-</p>
</div>
<div class="stat-card">
<h4>Highest Sale</h4>
<p id="high-sale-price">-</p>
</div>
<div class="stat-card">
<h4>Lowest Sale</h4>
<p id="low-sale-price">-</p>
</div>
<div class="stat-card">
<h4>Sales Volume (30d)</h4>
<p id="sales-volume">-</p>
</div>
</div>
</div>
<!-- Tab Content: Sold Comps -->
<div class="tab-content" id="comps">
<h3>💰 Recently Sold Comparables</h3>
<div class="comps-filters">
<select id="comps-platform">
<option value="all">All Platforms</option>
<option value="ebay">eBay</option>
<option value="poshmark">Poshmark</option>
<option value="fashionphile">Fashionphile</option>
<option value="rebag">Rebag</option>
</select>
<select id="comps-condition">
<option value="all">All Conditions</option>
<option value="new">New</option>
<option value="excellent">Excellent</option>
<option value="good">Good</option>
</select>
</div>
<div id="comps-grid" class="comps-grid">
<!-- Populated by JS with sold items -->
</div>
</div>
<!-- Tab Content: US Resale Guide -->
<div class="tab-content" id="guide">
<h3>📚 Complete US Resale Guide - Everything You Need to Know</h3>
<!-- Platform Setup Guide -->
<div class="guide-section">
<h4>🚀 Platform Setup Guides</h4>
<div class="platforms-accordion">
<% Object.entries(platformGuide).forEach(([platform, guide]) => { %>
<div class="accordion-item">
<button class="accordion-header" onclick="toggleAccordion(this)">
<strong style="text-transform: capitalize;"><%= platform %></strong> - Complete Setup Guide
</button>
<div class="accordion-content" style="display: none; padding: 1.5rem; background: #f8f9fa;">
<div class="setup-steps">
<h5>📋 Setup Steps:</h5>
<ol>
<% guide.setupSteps.forEach(step => { %>
<li style="margin: 0.5rem 0;"><%= step %></li>
<% }); %>
</ol>
</div>
<div class="fee-structure" style="margin-top: 1.5rem; padding: 1rem; background: white; border-radius: 8px;">
<h5>💰 Fee Structure:</h5>
<ul>
<% Object.entries(guide.fees).forEach(([key, value]) => { %>
<li><strong style="text-transform: capitalize;"><%= key.replace(/_/g, ' ') %>:</strong> <%= value %></li>
<% }); %>
</ul>
</div>
<div class="pro-tips" style="margin-top: 1.5rem; padding: 1rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px;">
<h5 style="color: white;">💡 Pro Tips:</h5>
<ul>
<% guide.tips.forEach(tip => { %>
<li style="margin: 0.5rem 0;"><%= tip %></li>
<% }); %>
</ul>
</div>
</div>
</div>
<% }); %>
</div>
</div>
<!-- Authentication Guide -->
<div class="guide-section" style="margin-top: 2rem;">
<h4>🔐 Authentication - CRITICAL for US Sales</h4>
<p style="background: #fff3cd; padding: 1rem; border-left: 4px solid #ffc107; margin-bottom: 1rem;">
<strong>⚠️ WARNING:</strong> Selling fake designer bags is a FEDERAL CRIME in the USA. Authentication is not optional - it's mandatory.
</p>
<div class="auth-services">
<h5>Top Authentication Services:</h5>
<% resaleGuide.authentication.services.forEach(service => { %>
<div class="service-card" style="background: white; padding: 1.5rem; margin: 1rem 0; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
<h6 style="margin: 0 0 0.5rem 0; font-size: 1.2rem;"><%= service.name %></h6>
<p><strong>Cost:</strong> <%= service.cost %></p>
<p><strong>Method:</strong> <%= service.method %></p>
<p><strong>URL:</strong> <a href="<%= service.url %>" target="_blank" rel="noopener noreferrer"><%= service.url %></a></p>
<p style="color: #666; font-size: 0.9rem;"><%= service.notes %></p>
</div>
<% }); %>
<h5 style="margin-top: 1.5rem;">Free Platform Authentication:</h5>
<ul style="background: #d4edda; padding: 1rem; border-radius: 8px;">
<% Object.entries(resaleGuide.authentication.platformAuth).forEach(([platform, desc]) => { %>
<li><strong style="text-transform: capitalize;"><%= platform %>:</strong> <%= desc %></li>
<% }); %>
</ul>
</div>
</div>
<!-- Import Duties -->
<div class="guide-section" style="margin-top: 2rem;">
<h4>🛃 Importing from Japan to USA</h4>
<div style="background: #f8d7da; padding: 1.5rem; border-left: 4px solid #dc3545; border-radius: 8px; margin-bottom: 1rem;">
<h5 style="margin-top: 0; color: #721c24;">⚠️ You MUST Pay Customs Duties</h5>
<p><strong>Handbag Duty Rate:</strong> <%= resaleGuide.importDuties.handbagDuty %></p>
<p><strong>Calculation:</strong> <%= resaleGuide.importDuties.calculationMethod %></p>
</div>
<div class="duty-thresholds" style="background: white; padding: 1.5rem; border-radius: 10px;">
<h5>Import Thresholds:</h5>
<ul>
<% Object.entries(resaleGuide.importDuties.thresholds).forEach(([type, desc]) => { %>
<li><strong style="text-transform: capitalize;"><%= type %>:</strong> <%= desc %></li>
<% }); %>
</ul>
<h5 style="margin-top: 1.5rem;">💡 Import Tips:</h5>
<ul>
<% resaleGuide.importDuties.tips.forEach(tip => { %>
<li style="margin: 0.5rem 0;"><%= tip %></li>
<% }); %>
</ul>
</div>
</div>
<!-- Tax Considerations -->
<div class="guide-section" style="margin-top: 2rem;">
<h4>💼 US Tax Requirements for Resellers</h4>
<div class="tax-requirements" style="background: white; padding: 1.5rem; border-radius: 10px;">
<h5>📋 Required Steps:</h5>
<ol>
<% resaleGuide.taxConsiderations.requirements.forEach(req => { %>
<li style="margin: 0.5rem 0;"><%= req %></li>
<% }); %>
</ol>
<h5 style="margin-top: 1.5rem; color: #27ae60;">💰 Tax Deductions You Can Take:</h5>
<ul style="background: #d4edda; padding: 1rem; border-radius: 8px;">
<% resaleGuide.taxConsiderations.deductions.forEach(ded => { %>
<li style="margin: 0.5rem 0;"><%= ded %></li>
<% }); %>
</ul>
</div>
</div>
<!-- Shipping Best Practices -->
<div class="guide-section" style="margin-top: 2rem;">
<h4>📦 Shipping Luxury Bags in the USA</h4>
<table style="width: 100%; border-collapse: collapse; background: white; border-radius: 10px; overflow: hidden;">
<thead>
<tr style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: white;">
<th style="padding: 1rem; text-align: left;">Carrier</th>
<th style="padding: 1rem;">Cost</th>
<th style="padding: 1rem;">Insurance</th>
<th style="padding: 1rem;">Speed</th>
<th style="padding: 1rem;">Best For</th>
</tr>
</thead>
<tbody>
<% resaleGuide.shippingBestPractices.carriers.forEach((carrier, idx) => { %>
<tr style="border-bottom: 1px solid #eee;">
<td style="padding: 1rem; font-weight: 600;"><%= carrier.name %></td>
<td style="padding: 1rem; text-align: center;"><%= carrier.cost %></td>
<td style="padding: 1rem; text-align: center;"><%= carrier.insurance %></td>
<td style="padding: 1rem; text-align: center;"><%= carrier.speed %></td>
<td style="padding: 1rem; font-size: 0.9rem;"><%= carrier.notes %></td>
</tr>
<% }); %>
</tbody>
</table>
<div class="packaging-tips" style="margin-top: 1.5rem; padding: 1.5rem; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); border-radius: 10px;">
<h5 style="margin-top: 0;">📦 Packaging Tips:</h5>
<ul>
<% resaleGuide.shippingBestPractices.packagingTips.forEach(tip => { %>
<li style="margin: 0.5rem 0;"><%= tip %></li>
<% }); %>
</ul>
</div>
</div>
</div>
<!-- Tab Content: Platforms -->
<div class="tab-content" id="platforms">
<h3>🚀 Where to Sell - Platform Comparison</h3>
<div class="platform-comparison-table">
<table>
<thead>
<tr>
<th>Platform</th>
<th>Commission</th>
<th>Speed</th>
<th>Est. Sale Price</th>
<th>Your Profit</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="platform-comparison-body">
<!-- Populated by JS -->
</tbody>
</table>
</div>
</div>
</main>
<script>
const productData = <%- JSON.stringify(product) %>;
const skuData = '<%= sku %>';
// Copy SKU to clipboard
function copySKU() {
navigator.clipboard.writeText(skuData).then(() => {
alert('✅ SKU copied to clipboard!');
});
}
// Extract full Yahoo Japan data
async function extractYahooData() {
const btn = document.getElementById('extract-btn');
const resultDiv = document.getElementById('extracted-data');
btn.disabled = true;
btn.textContent = '🔄 Extracting data...';
try {
const response = await fetch('/api/extract-yahoo-data', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ yahooUrl: productData.product_url })
});
const result = await response.json();
if (result.success) {
const data = result.data;
resultDiv.style.display = 'block';
resultDiv.innerHTML = `
<div style="background: white; padding: 1.5rem; border-radius: 10px; border: 2px solid #27ae60;">
<h5 style="color: #27ae60; margin-top: 0;">✅ Full Data Extracted!</h5>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1rem 0;">
<div><strong>Brand:</strong> ${data.brand || 'N/A'}</div>
<div><strong>Model:</strong> ${data.model || 'N/A'}</div>
<div><strong>Size:</strong> ${data.size || 'N/A'}</div>
<div><strong>Color:</strong> ${data.color || 'N/A'}</div>
<div><strong>Material:</strong> ${data.material || 'N/A'}</div>
<div><strong>Serial:</strong> ${data.serial || 'N/A'}</div>
<div><strong>Condition (JP):</strong> ${data.condition || 'N/A'}</div>
<div><strong>Condition (EN):</strong> ${data.conditionEnglish || 'N/A'}</div>
</div>
${data.description ? `
<div style="margin: 1rem 0; padding: 1rem; background: #f8f9fa; border-radius: 8px;">
<strong>Description:</strong><br>
${data.description}
</div>
` : ''}
${data.conditionNotes ? `
<div style="margin: 1rem 0; padding: 1rem; background: #fff3cd; border-radius: 8px;">
<strong>⚠️ Condition Notes:</strong><br>
${data.conditionNotes}
</div>
` : ''}
${data.images && data.images.length > 0 ? `
<div style="margin: 1rem 0;">
<strong>📷 Images Found:</strong> ${data.images.length}
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.5rem; margin-top: 0.5rem;">
${data.images.slice(0, 6).map(img => `<img src="${img}" style="width: 100%; border-radius: 5px;" />`).join('')}
</div>
</div>
` : ''}
<details style="margin-top: 1rem;">
<summary style="cursor: pointer; font-weight: 600;">📊 Full Detail Table</summary>
<pre style="background: #f8f9fa; padding: 1rem; border-radius: 8px; overflow-x: auto; font-size: 0.85rem; margin-top: 0.5rem;">${JSON.stringify(data.detailTable, null, 2)}</pre>
</details>
</div>
`;
} else {
resultDiv.style.display = 'block';
resultDiv.innerHTML = `<div style="color: red; padding: 1rem; background: #f8d7da; border-radius: 8px;">❌ ${result.error}</div>`;
}
} catch (error) {
console.error(error);
resultDiv.style.display = 'block';
resultDiv.innerHTML = `<div style="color: red; padding: 1rem; background: #f8d7da; border-radius: 8px;">❌ Extraction failed</div>`;
} finally {
btn.disabled = false;
btn.textContent = '🔄 Extract Full Yahoo Data';
}
}
// Toggle accordion
function toggleAccordion(btn) {
const content = btn.nextElementSibling;
const isOpen = content.style.display === 'block';
// Close all accordions
document.querySelectorAll('.accordion-content').forEach(el => {
el.style.display = 'none';
});
// Open clicked one if it was closed
if (!isOpen) {
content.style.display = 'block';
}
}
// Tab switching
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
// Remove active from all tabs and contents
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
// Add active to clicked tab and corresponding content
tab.classList.add('active');
const targetTab = tab.getAttribute('data-tab');
document.getElementById(targetTab).classList.add('active');
});
});
</script>
<script src="/js/product.js"></script>
<style>
.sku-code {
background: #282c34;
color: #61dafb;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-family: 'Courier New', monospace;
font-size: 1.2rem;
letter-spacing: 0.1rem;
display: inline-block;
margin-right: 1rem;
}
.sku-display {
display: flex;
align-items: center;
margin: 1rem 0;
}
.btn-copy {
padding: 0.75rem 1.5rem;
background: #27ae60;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
}
.btn-copy:hover {
background: #229954;
}
.accordion-header {
width: 100%;
padding: 1rem 1.5rem;
background: white;
border: 1px solid #ddd;
border-radius: 8px;
margin: 0.5rem 0;
cursor: pointer;
text-align: left;
font-size: 1rem;
transition: all 0.3s;
}
.accordion-header:hover {
background: #f8f9fa;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.guide-section {
background: white;
padding: 2rem;
border-radius: 15px;
margin: 1.5rem 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
</style>
</body>
</html>