/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:var(--radius-sm); font-weight:600; font-size:0.9rem; transition:var(--transition); line-height:1; }
.btn-primary { background:var(--primary); color:white; }
.btn-primary:hover { background:var(--primary-dark); transform: translateY(-1px); box-shadow:var(--shadow-md); }
.btn-secondary { background:var(--bg-3); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--border); }
.btn-ghost { background:transparent; color:var(--text-2); }
.btn-ghost:hover { color:var(--text); background:var(--bg-3); }
.btn-sm { padding:6px 12px; font-size:0.8rem; }
.icon-btn { width:36px; height:36px; display:grid; place-items:center; border-radius:var(--radius-sm); background:var(--bg-3); }
.icon-btn:hover { background:var(--border); }

/* Inputs */
.input, .textarea, .select { width:100%; padding:10px 14px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:0.9rem; transition:var(--transition); }
.input:focus, .textarea:focus, .select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(108,92,231,0.15); }
.textarea { min-height:100px; resize:vertical; }

/* SearchBar */
.search-bar { display:flex; align-items:center; gap:10px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-pill); padding:6px 6px 6px 16px; box-shadow:var(--shadow-sm); }
.search-bar input { flex:1; border:0; background:transparent; outline:none; font-size:0.95rem; color:var(--text); }
.search-bar:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(108,92,231,0.15); }
.platform-pills { display:flex; gap:6px; }
.pill { font-size:0.7rem; padding:4px 10px; border-radius:var(--radius-pill); background:var(--bg-3); border:1px solid var(--border); cursor:pointer; font-weight:600; }
.pill.active { background:var(--primary); color:white; border-color:var(--primary); }

/* Stats Cards */
.stat-card { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px; box-shadow:var(--shadow-sm); }
.stat-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-3); font-weight:600; }
.stat-value { font-size:1.6rem; font-weight:700; margin:6px 0; }
.stat-sub { font-size:0.8rem; color:var(--text-2); }

/* Product Card */
.product-card { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:var(--transition); display:flex; flex-direction:column; }
.product-card:hover { transform: translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-strong); }
.product-img-wrap { position:relative; height:160px; background:var(--bg-3); overflow:hidden; }
.product-img-wrap img { width:100%; height:100%; object-fit:cover; }
.badge { position:absolute; top:10px; left:10px; font-size:0.65rem; font-weight:700; padding:3px 8px; border-radius:var(--radius-pill); background:var(--accent-success); color:white; }
.badge.sales { background:var(--primary); }
.badge.mock { background:var(--accent-warning); color:#000; }
.badge.badge-muted { background:var(--bg-3); color:var(--text-3); font-weight:600; }
.tag.tag-category { background:var(--primary-light); color:#fff; }
.product-img { width:100%; height:100%; object-fit:cover; }
.score-circle { position:absolute; top:10px; right:10px; width:44px; height:44px; border-radius:50%; background:var(--bg-2); display:grid; place-items:center; font-weight:700; font-size:0.85rem; box-shadow:var(--shadow-sm); border:3px solid var(--primary); }
.product-body { padding:14px; flex:1; display:flex; flex-direction:column; gap:8px; }
.product-title { font-weight:650; font-size:0.96rem; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.product-meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.price { font-weight:700; font-size:1.05rem; color:var(--primary); }
.price-original { text-decoration:line-through; color:var(--text-3); font-size:0.8rem; }
.seller { font-size:0.78rem; color:var(--text-2); }
.tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.tag { font-size:0.65rem; padding:2px 7px; background:var(--bg-3); border-radius:var(--radius-pill); color:var(--text-2); }
.product-actions { display:flex; gap:8px; margin-top:auto; padding-top:10px; }

/* Prompt Panel */
.prompt-panel { display:flex; flex-direction:column; gap:16px; }
.tabs { display:flex; gap:4px; background:var(--bg-3); padding:4px; border-radius:var(--radius-sm); }
.tab { flex:1; padding:6px 10px; font-size:0.75rem; font-weight:600; border-radius:6px; text-align:center; cursor:pointer; color:var(--text-2); transition:var(--transition); }
.tab.active { background:var(--bg-2); color:var(--text); box-shadow:var(--shadow-sm); }
.prompt-card { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; display:flex; flex-direction:column; gap:10px; }
.prompt-card-header { display:flex; justify-content:space-between; align-items:center; }
.prompt-type { font-size:0.6rem; padding:3px 8px; border-radius:var(--radius-pill); font-weight:700; text-transform:uppercase; }
.prompt-type.cloner { background:#E6E3FF; color:var(--primary); }
.prompt-type.differentiator { background:#FFE9E9; color:var(--accent-danger); }
.prompt-type.bundle { background:#E0FFF8; color:#00A88B; }
.prompt-type.niche_analysis { background:#FFF6E0; color:#9A6A00; }
.prompt-title { font-weight:600; font-size:0.9rem; }
.prompt-content { font-family:var(--font-mono); font-size:0.78rem; background:var(--bg-3); padding:10px; border-radius:var(--radius-sm); max-height:180px; overflow-y:auto; white-space:pre-wrap; line-height:1.5; }
.prompt-actions { display:flex; gap:6px; }

/* Drawer */
.drawer { position:fixed; inset:0; z-index:200; display:flex; justify-content:flex-end; }
.drawer.hidden { display:none; }
.drawer-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(2px); }
.drawer-content { position:relative; width:480px; max-width:90vw; background:var(--bg-2); height:100%; overflow-y:auto; padding:24px; box-shadow:var(--shadow-lg); animation: slideIn 0.25s ease; }
.drawer-close { position:absolute; top:16px; right:16px; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--bg-3); }
@keyframes slideIn { from{ transform:translateX(100%)} to{ transform:translateX(0)} }

/* Modal */
.modal { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px; }
.modal.hidden { display:none; }
.modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); }
.modal-card { position:relative; background:var(--bg-2); border-radius:var(--radius-lg); padding:28px; width:100%; max-width:440px; box-shadow:var(--shadow-lg); animation: popIn 0.2s ease; }
@keyframes popIn { from{ transform:scale(0.95); opacity:0} to{ transform:scale(1); opacity:1} }

/* Auth */
.auth-form { display:flex; flex-direction:column; gap:16px; }
.auth-title { font-size:1.4rem; font-weight:700; }
.auth-subtitle { color:var(--text-2); font-size:0.9rem; margin-top:-8px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label { font-size:0.8rem; font-weight:600; color:var(--text-2); }
.auth-switch { font-size:0.85rem; text-align:center; color:var(--text-2); }

/* Toasts */
.toast-container { position:fixed; bottom:20px; right:20px; z-index:400; display:flex; flex-direction:column; gap:10px; }
.toast { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 16px; box-shadow:var(--shadow-lg); font-size:0.85rem; min-width:260px; display:flex; gap:10px; align-items:center; animation: slideUp 0.25s ease; }
.toast.success { border-left:4px solid var(--accent-success); }
.toast.error { border-left:4px solid var(--accent-danger); }
@keyframes slideUp { from{ transform:translateY(20px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

/* Skeleton */
.skeleton { height:36px; background:linear-gradient(90deg, var(--bg-3) 25%, var(--border) 50%, var(--bg-3) 75%); background-size:200% 100%; animation: shimmer 1.2s infinite; border-radius:var(--radius-sm); }
@keyframes shimmer { 0%{ background-position:200% 0 } 100%{ background-position:-200% 0 } }

/* Empty state */
.empty-state { text-align:center; padding:40px 20px; color:var(--text-2); }
.empty-state-icon { font-size:3rem; margin-bottom:12px; }

/* Progress */
.progress-bar { height:8px; background:var(--border); border-radius:var(--radius-pill); overflow:hidden; }
.progress-fill { height:100%; background:var(--primary); transition: width 0.4s; }
.status-bar { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; display:flex; align-items:center; gap:12px; margin-bottom:18px; }

/* Charts container */
.charts-row { display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-top:24px; }
.chart-card { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; }
@media (max-width:900px){ .charts-row{ grid-template-columns:1fr; } }

/* Filters */
.filters-bar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; margin-bottom:18px; }
.filter-group { display:flex; align-items:center; gap:6px; }

/* View toggle */
.view-toggle { display:flex; background:var(--bg-3); border-radius:var(--radius-sm); padding:3px; }
.view-toggle button { padding:5px 10px; border-radius:6px; font-size:0.8rem; }
.view-toggle button.active { background:var(--bg-2); box-shadow:var(--shadow-sm); }

/* Keyword cloud */
.keywords-cloud { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.keyword-bubble { padding:4px 10px; background:var(--bg-3); border-radius:var(--radius-pill); font-size:0.78rem; cursor:pointer; border:1px solid var(--border); }
.keyword-bubble:hover { background:var(--primary-light); color:white; }