:root{
    --orange:#ff7a00;
    --orange-dark:#eb6c00;
    --peach:#fff1e7;
    --bg:#fffaf7;
    --text:#252525;
    --muted:#777;
    --line:#eadfd7;
    --card:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--bg)}
body{padding-bottom:76px}
button,input{font:inherit}
button{cursor:pointer}
a{color:var(--orange);text-decoration:none}

.topbar{
    height:70px;background:#fff;border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 18px;position:sticky;top:0;z-index:20
}
.brand img{width:50px;height:50px;display:block}
.top-title{font-weight:700}
.profile-button{
    width:44px;height:44px;border:1px solid var(--line);
    border-radius:50%;background:#fff;display:grid;place-items:center;font-size:20px
}

main{max-width:900px;margin:auto;padding:22px 18px}
.welcome{max-width:540px;margin:28px auto;text-align:center}
.hero-logo{width:115px;height:115px;margin:4px auto 18px}
.welcome h1{font-size:29px;line-height:1.2;margin:0 0 24px}
.card,.detail-card{
    background:var(--card);border:1px solid var(--line);
    border-radius:18px;padding:22px;box-shadow:0 8px 30px rgba(70,40,20,.06)
}
.login-card{text-align:left}
.login-card form,.public-card form{display:grid;gap:14px}
.public-card{max-width:620px;margin:20px auto}
.small-logo{width:70px;height:70px}
label{display:grid;gap:6px;font-size:14px;font-weight:600}
input{
    border:1px solid #d9d1cb;border-radius:10px;padding:12px;
    min-height:44px;background:#fff
}
.primary{
    border:0;background:var(--orange);color:#fff;border-radius:10px;
    padding:13px 18px;min-height:46px;font-weight:700
}
.primary:hover{background:var(--orange-dark)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;align-items:center;font-weight:400}
.check input{width:18px;min-height:18px}
.center-link{text-align:center}
.price-text{margin:20px 4px;color:#555;line-height:1.5}

.page-head{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:16px
}
.page-head h1{margin:0}
.section{margin:25px 0}
.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.section-title h2{margin:0;font-size:20px}
.carousel{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:7px;-webkit-overflow-scrolling:touch
}
.zone-card{
    flex:0 0 265px;scroll-snap-align:start;background:#fff;
    border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer
}
.zone-card>img,.image-placeholder{
    width:100%;height:135px;object-fit:cover;display:block;background:#f5eee9
}
.zone-info{padding:13px}
.zone-info h3{margin:0;font-size:17px}
.title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.muted{color:var(--muted);font-size:14px}
.count{margin-top:8px;font-weight:700}
.heart{
    border:0;background:transparent;color:var(--orange);
    font-size:23px;padding:5px
}
.list{display:grid;gap:12px}
.member-card{
    display:flex;gap:14px;align-items:center;background:#fff;
    border:1px solid var(--line);border-radius:15px;padding:12px;cursor:pointer
}
.member-card img,.member-avatar{
    width:66px;height:66px;border-radius:50%;object-fit:cover;
    background:#f5eee9;display:grid;place-items:center;font-size:28px;flex:none
}
.member-info{min-width:0}
.member-info h3{margin:0 0 4px}
.member-card .heart{margin-left:auto}
.empty{text-align:center;color:var(--muted);padding:28px}

.search-panel{
    display:grid;grid-template-columns:1fr 200px;gap:10px;margin-bottom:18px
}
.detail{max-width:720px;margin:auto}
.back{border:0;background:transparent;color:var(--orange);font-weight:700;padding:7px 0}
.detail-image{
    width:100%;height:270px;object-fit:cover;border-radius:18px;
    display:block;background:#f5eee9
}
.detail-card{margin-top:14px}
.detail-card h1{margin:0 0 5px}
.fav-btn{
    border:1px solid var(--line);background:#fff;color:var(--orange);
    border-radius:10px;padding:9px 13px;white-space:nowrap
}
.gift{background:var(--peach);border-color:#ffd0aa}
#zoneMap{height:300px;border-radius:12px;overflow:hidden}
.profile{max-width:650px;margin:auto}
.profile-center{text-align:center}
.profile-image{
    width:120px;height:120px;border-radius:50%;
    object-fit:cover;background:#f5eee9;margin:auto;display:grid;place-items:center
}
.member-avatar-large{font-size:50px}
.subscription{
    display:flex;justify-content:space-between;align-items:center;gap:15px
}

.bottom-tabs{
    position:fixed;left:0;right:0;bottom:0;height:70px;background:#fff;
    border-top:1px solid var(--line);display:grid;
    grid-template-columns:repeat(5,1fr);z-index:30
}
.bottom-tabs a{
    display:grid;place-items:center;align-content:center;gap:3px;
    color:#666;font-size:21px
}
.bottom-tabs a span{font-size:11px}
.bottom-tabs a.active{color:var(--orange);font-weight:700}

#toast{
    position:fixed;right:18px;bottom:88px;background:#222;color:#fff;
    padding:12px 16px;border-radius:10px;opacity:0;
    transform:translateY(8px);transition:.2s;z-index:100;pointer-events:none
}
#toast.show{opacity:1;transform:none}

@media(max-width:600px){
    .two,.search-panel{grid-template-columns:1fr}
    .welcome h1{font-size:25px}
    main{padding:18px 14px}
    .topbar{padding:0 14px}
    .detail-image{height:210px}
}
[hidden]{display:none!important}