:root { --bg:#0f0f19; --fg:#fff; --muted:#9aa; --brand:#00d4ff; --ok:#00ff88; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--fg); }
.section { padding: 24px; max-width: 1100px; margin: 0 auto; }
.welcome { text-align:center; margin: 10vh auto; }
.welcome-hint { opacity:.75; }
.quick-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; opacity:0; transform: translateY(-8px); transition:.3s; }
.quick-actions.show { opacity:1; transform: translateY(0); }
.action-chip { background:#151526; border:1px solid rgba(0,212,255,.3); padding:10px 14px; border-radius:999px; cursor:pointer; }
.products { display:none; }
.products.active { display:block; }
.grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-top:16px; }
.product-card { background:#141426; border:1px solid rgba(0,212,255,.2); border-radius:12px; overflow:hidden; cursor:pointer; }
.product-image-container { position:relative; aspect-ratio:1/1; background:#10101b; }
.image-skeleton { position:absolute; inset:0; animation:pulse 1.4s infinite; }
@keyframes pulse { 0%{opacity:.4} 50%{opacity:.8} 100%{opacity:.4}}
.product-image { width:100%; height:100%; object-fit:contain; display:block; }
.product-discount { position:absolute; top:8px; left:8px; background:#312; color:#f66; padding:4px 8px; border-radius:8px; font-size:12px; }
.product-info { padding:10px 12px; }
.product-name { font-size:15px; line-height:1.3; min-height:40px; }
.product-price-container { margin-top:6px; display:flex; align-items:baseline; gap:8px; }
.price-current { color:var(--ok); font-weight:700; }
.price-old { color:#a77; text-decoration:line-through; font-size:13px; }
.controls { position:fixed; left:50%; transform:translateX(-50%); bottom:24px; display:flex; align-items:center; gap:16px; }
.mic { font-size:24px; line-height:1; padding:14px 18px; border-radius:50px; border:2px solid rgba(0,212,255,.4); background:#121224; color:#fff; cursor:pointer; }
.mic.active { border-color: var(--ok); }
.idle { color:var(--muted); }
.waveform { width:120px; height:6px; background:#1b1b2d; border-radius:4px; opacity:.3; transition:.2s; }
.waveform.active { opacity:1; }
.transcript { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); background:#151526; border:1px solid rgba(0,212,255,.3); padding:8px 12px; border-radius:10px; display:none; }
.transcript.active { display:block; }
.loading { position:fixed; top:16px; left:50%; transform:translateX(-50%); background:#151526; border:1px solid rgba(0,212,255,.3); padding:8px 12px; border-radius:10px; display:none; }
.loading.active { display:block; }
.hidden { display:none !important; }
.modal { position:fixed; inset:0; display:none; }
.modal.active { display:block; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.modal-content { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#141426; border:1px solid rgba(0,212,255,.2); border-radius:16px; width:min(92vw,460px); padding:18px; }
.modal-content img { width:100%; height:auto; background:#10101b; border-radius:10px; }
.modal-content .price { color:var(--ok); font-weight:700; font-size:20px; }
.modal-content .cta { margin-top:8px; width:100%; padding:12px; border-radius:10px; border:1px solid rgba(0,212,255,.4); background:#101423; color:#fff; cursor:pointer; }
.close { position:absolute; right:10px; top:10px; background:transparent; color:#bbb; border:none; font-size:24px; cursor:pointer; }