:root{--max-width:1200px;--accent:#0b74de;--muted:#6b7280}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;max-width:var(--max-width);margin:0 auto;padding:0;background:#f6f7fb;color:#111}
header.app-header{display:flex;align-items:center;gap:16px;padding:18px 28px;background:#fff;border-bottom:1px solid #eef;position:sticky;top:0;z-index:20}
.logo{font-weight:700;color:var(--accent);font-size:20px}
.search-bar{flex:1;display:flex;gap:8px;align-items:center}
.search-bar input{flex:1;padding:10px;border:1px solid #e5e7eb;border-radius:6px}
.search-bar button{padding:10px 14px;border-radius:6px;background:var(--accent);color:#fff;border:0}
.container{max-width:var(--max-width);margin:0 auto;padding:24px}
.main{width:100%}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.card{background:#fff;border:1px solid #e9eef4;border-radius:10px;padding:12px;box-shadow:0 4px 12px rgba(12,24,40,0.04)}
.card h3{margin:6px 0;font-size:15px}
.badge{display:inline-block;padding:6px 10px;border-radius:18px;background:#fff4f4;border:1px solid #ffdede;color:#7a2b2b;font-size:13px}
.price{font-weight:700;color:#0b74de;margin-top:6px}
.card .meta{font-size:13px;color:var(--muted)}
.card a{color:var(--accent);text-decoration:none}
.actions{margin-top:10px}
.actions button{padding:8px 12px;border-radius:6px;border:1px solid #d0d7e0;background:#fff}
footer{padding:18px 28px;color:var(--muted);font-size:13px}
.small{font-size:12px;color:var(--muted)}