/* Material-like responsive styles for CodeSite */
:root{
	--primary:#1976d2;
	--surface:#fff;
	--muted:#666;
}
body{font-family:Roboto, Arial, sans-serif;margin:0;background:#f5f7fa;color:#111}
.codesite-root{max-width:1100px;margin:24px auto;padding:16px}
.cs-header{background:linear-gradient(90deg,var(--primary),#42a5f5);color:#fff;padding:18px;border-radius:8px}
.cs-header h1{margin:0;font-weight:500}
.sale-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.sale-card{background:var(--surface);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.08);overflow:hidden;display:flex;flex-direction:column}
.sale-img{width:100%;height:140px;object-fit:cover;background:#eee}
.sale-body{padding:12px;flex:1;display:flex;flex-direction:column}
.sale-body h3{margin:0 0 8px 0}
.webbuy{margin-top:auto;display:flex;gap:8px;align-items:center}
.webbuy input{flex:1;padding:8px;border:1px solid #ddd;border-radius:4px}
.webbuy button{background:var(--primary);color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer}
.buy-result{margin-top:8px;background:#fafafa;padding:8px;border-radius:6px;border:1px solid #eee}
.cs-footer{margin-top:18px;text-align:center;color:var(--muted)}
.empty{text-align:center;padding:12px;color:var(--muted)}

/* Mobile */
@media (max-width:499px){
	.sale-list{grid-template-columns:1fr}
	.sale-img{height:200px}
}
/* Tablet */
@media (min-width:500px) and (max-width:899px){
	.sale-list{grid-template-columns:repeat(2,1fr)}
}

/* small utilities */
.login-ct{padding:12px;background:#fff;border-radius:6px;border:1px solid #eee}
.pay-ct{padding:12px;background:#fff;border-radius:6px;border:1px solid #eee;margin-top:12px}