.brandbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 12px 13px}.brandbar button{height:38px;padding:0 15px;border:0;border-radius:999px;background:#f2f2f7;color:#1c1c1e;font-size:10px;font-weight:700;box-shadow:inset 0 0 0 1px #d1d1d6}.brandbar span{color:#888;font-size:9px}.brand-filter{position:fixed;inset:0;z-index:65;display:none;background:#0008;color:#111}.brand-filter.on{display:block}.brand-panel{position:absolute;left:0;right:0;bottom:0;max-height:84vh;overflow:hidden;padding:18px 16px 24px;border-radius:24px 24px 0 0;background:#f2f2f7;display:flex;flex-direction:column}.brand-head,.brand-panel>input,.brand-apply,.brand-clear{flex:0 0 auto}.brand-head{display:flex;align-items:start;justify-content:space-between}.brand-head small{font-size:8px;color:#777;letter-spacing:.1em}.brand-head h2{margin:5px 0 14px;font-size:22px}.brand-head button{width:36px;height:36px;border:0;border-radius:50%;background:#ddd;font-size:20px}.brand-list{flex:1 1 auto;min-height:0;overflow:auto;margin:12px 0;overscroll-behavior:contain}.brand-list>button{width:100%;min-height:54px;padding:10px 14px;border:0;border-bottom:1px solid #ddd;background:#fff;display:grid;grid-template-columns:1fr auto 24px;align-items:center;text-align:left}.brand-list>button:first-child{border-radius:14px 14px 0 0}.brand-list>button:last-child{border-radius:0 0 14px 14px;border-bottom:0}.brand-list>button.on{background:#eaf3ff}.brand-list span{font-weight:700}.brand-list small{color:#777}.brand-list i{font-style:normal;color:#007aff;font-weight:900;text-align:right}.brand-apply,.brand-clear{width:100%;height:48px;border:0;border-radius:13px;font-size:10px;font-weight:900}.brand-apply{background:#007aff;color:#fff}.brand-clear{margin-top:8px;background:#e5e5ea;color:#007aff}@media(max-width:759px){.brand-filter{padding:8px;background:#f2f2f7}.brand-panel{position:relative;inset:auto;height:calc(100dvh - 16px);max-height:none;margin:0 auto;padding:12px 12px max(12px,env(safe-area-inset-bottom));border-radius:28px;background:#fff}.brand-head{padding:2px 2px 0}.brand-head h2{margin-bottom:9px;font-size:18px}.brand-head button{width:38px;height:38px;background:#e9e9ed;color:#3a3a3c}.brand-panel>input{height:42px}.brand-list{margin:8px 0;border-top:1px solid #e5e5ea;border-bottom:1px solid #e5e5ea}.brand-list>button{min-height:48px;padding:8px 12px}.brand-apply,.brand-clear{height:44px}.brand-apply{margin-top:7px}.brand-clear{margin-top:6px}}@media(min-width:760px){.brand-panel{left:50%;right:auto;width:500px;transform:translateX(-50%)}}