*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system}
body{background:#f6f6f6;overflow-x:hidden;}
.container{max-width:100%;min-height:100vh;padding-bottom:75px;}

.header-top{
    background:#ffd250;
    display:flex;justify-content:space-between;align-items:center;
    padding:16px 20px;
}
.close-btn{font-size:18px;}
.header-top h1{font-size:22px;text-align:center}
.sub-title{font-size:14px;font-weight:normal;display:block}
.menu-icon{font-size:24px;border:1px solid #000;border-radius:50%;width:32px;height:32px;text-align:center;line-height:32px}

.banner-box{background:#ffd250;padding:0 20px 20px;}
.banner-row{display:flex;gap:12px;align-items:center;margin-bottom:16px;}
.logo-box{width:46px;height:46px;background:#ff7822;border-radius:12px;color:#fff;font-size:22px;text-align:center;line-height:46px;font-weight:bold}
.title-text h2{font-size:22px}
.title-text p{opacity:0.7;font-size:14px}
.location-select{border:1px solid rgba(0,0,0,0.15);border-radius:20px;padding:6px 10px;font-size:14px;white-space:nowrap}

.search-bar{display:flex;background:#fff;border-radius:30px;padding:8px 16px;margin:16px 0;gap:8px}
.search-bar input{flex:1;border:none;outline:none;font-size:16px}
.search-btn{background:#ff7822;color:#fff;border:none;border-radius:24px;padding:8px 18px;font-size:15px}

.city-tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{background:#fff;padding:6px 14px;border-radius:18px;font-size:14px}
.tag.active{background:#222;color:#fff}

.cate-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:20px}
.cate-item{text-align:center;padding:6px 0;color:#333;font-size:13px}
.cate-icon{width:54px;height:54px;background:#fff;border-radius:14px;margin:0 auto 6px;display:grid;place-items:center;font-size:26px;box-shadow:0 3px 10px rgba(0,0,0,0.08)}

.ad-banner{margin:0 20px;height:160px;border-radius:14px;position:relative;background:url("https://picsum.photos/id/180/800/320") center/cover no-repeat;overflow:hidden}
.ad-label{position:absolute;top:10px;left:10px;background:rgba(0,0,0,0.4);color:#fff;padding:3px 8px;border-radius:6px;font-size:12px}
.ad-text{position:absolute;bottom:12px;left:16px;color:#fff;font-size:18px}

.filter-area{margin:20px;background:#fff;border-radius:14px;padding:16px}
.filter-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.reset-btn{color:#999;font-size:14px;padding:4px 10px;background:#f1f1f1;border-radius:12px}
.price-tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.price-tag{padding:8px 16px;border-radius:22px;background:#f5f5f5;font-size:15px}
.price-tag.active{background:#ffd250;color:#000;font-weight:500}
.price-input-row{display:flex;gap:10px;align-items:center}
.price-input-row input{flex:1;padding:12px 14px;border:1px solid #eee;border-radius:12px;font-size:15px;outline:none}

.float-service{
    position:fixed;right:20px;bottom:90px;width:56px;height:56px;background:#ff7822;color:#fff;border-radius:50%;
    display:grid;place-items:center;box-shadow:0 3px 10px rgba(255,120,34,0.35);z-index:99;cursor:pointer
}

.tab-bar{
    position:fixed;bottom:0;left:0;width:100%;background:#fff;display:flex;padding:8px 0;box-shadow:0 -1px 4px rgba(0,0,0,0.06)
}
.tab{flex:1;text-align:center;padding:6px 0;color:#777;font-size:13px}
.tab.active{color:#ff7822}