/* ========== TECH UI CORE ========== */
:root{
  --bg-deep:#F2F3F5; --bg-panel:#FFFFFF; --bg-card:#FFFFFF; --bg-input:#F5F6F7;
  --cyan:#1677FF; --cyan2:#3B9CFF; --magenta:#FF3B30; --neon:#FF9500;
  --orange:#FF6A00; --white:#1a1a1a; --text:#444444; --text-dim:#999999;
  --border:#e8e8ec; --border-accent:#c8d8f8;
  --glow-cyan:0 0 12px rgba(22,119,255,0.15); --glow-magenta:0 0 12px rgba(255,59,48,0.12);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;background:var(--bg-deep);color:var(--text);overflow:hidden;height:100vh;width:100vw;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font-size:clamp(13px,3.2vw,16px)}
@media(max-width:380px){body{font-size:13px}}

/* P1: Disable heavy GPU effects on low-end devices */
@media(prefers-reduced-motion:reduce),(max-width:480px){
  #topBar,#mapControls button,#trafficToggle,#mapSearchBar input,#mapSearchResults,#addTypeBar .type-chip,#legend,#teamLiveBar,#toast,#announceOverlay,.modal-overlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}

/* ========== AUTH PAGE (V3 清爽风格) ========== */
#authPage{position:fixed;inset:0;z-index:99;background:#f5f5f7;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;overflow-y:auto}
#authPage .auth-box{width:100%;max-width:380px}
#authPage .logo{text-align:center;margin-bottom:12px}
#authPage .logo .icon{font-size:56px;display:block;margin-bottom:10px;filter:none}
#authPage h2{font-size:28px;font-weight:800;text-align:center;background:linear-gradient(135deg,#1677FF,#3B9CFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:0;letter-spacing:2px;text-shadow:none}
#authPage .subtitle{font-size:12px;color:#999;text-align:center;margin-bottom:28px;letter-spacing:1px}
#authPage .auth-input{width:100%;padding:13px 16px;background:#fff;border:1px solid #e0e0e0;border-radius:10px;color:#333;font-size:14px;margin-bottom:12px;outline:none;transition:all 0.2s;font-family:inherit}
#authPage .auth-input:focus{border-color:#1677FF;box-shadow:0 0 0 3px rgba(22,119,255,0.1)}
#authPage .auth-input::placeholder{color:#bbb}
#authPage .auth-btn{width:100%;padding:14px;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;margin-top:4px;transition:all 0.15s;font-family:inherit;letter-spacing:1px}
#authPage .auth-btn:active{transform:scale(0.97)}
#authPage .auth-btn.primary{background:linear-gradient(135deg,#1677FF,#3B9CFF);color:#fff;box-shadow:0 4px 16px rgba(22,119,255,0.25)}
#authPage .auth-btn.primary:hover,#authPage .auth-btn.primary:active{box-shadow:0 6px 24px rgba(22,119,255,0.35)}
#authPage .auth-btn.secondary{background:transparent;color:#888;border:1px solid #e0e0e0;margin-top:10px}
#authPage .auth-btn.secondary:hover,#authPage .auth-btn.secondary:active{border-color:#1677FF;color:#1677FF}
#authPage .auth-btn.guest{background:transparent;color:#aaa;border:1px dashed #ddd;margin-top:8px;font-size:13px}
#authPage .auth-btn.guest:hover,#authPage .auth-btn.guest:active{border-color:#1677FF;color:#1677FF}
#authPage .auth-tabs{display:flex;gap:4px;margin-bottom:22px;background:#e8e8ec;border-radius:10px;padding:4px}
#authPage .auth-tab{flex:1;padding:10px;border:none;background:transparent;color:#999;font-size:14px;border-radius:8px;cursor:pointer;font-weight:600;transition:all 0.2s;font-family:inherit}
#authPage .auth-tab.active{background:#1677FF;color:#fff;box-shadow:0 2px 8px rgba(22,119,255,0.3)}
#authPage .auth-msg{font-size:13px;color:#E24B4A;text-align:center;margin-top:10px;min-height:20px}
/* feedback card (light) */
#authPage #feedbackBox{margin-top:20px;padding:16px;background:#fff;border:1px solid #e8e8ec;border-radius:12px;text-align:center}
#authPage #feedbackBox .fb-title{font-size:13px;color:#999;margin-bottom:12px;letter-spacing:1px}
#authPage #feedbackBox .fb-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f5f5f7;border-radius:8px;margin-bottom:6px;font-size:12px;color:#555;cursor:pointer;transition:all 0.2s}
#authPage #feedbackBox .fb-item:hover,#authPage #feedbackBox .fb-item:active{background:#eef3ff;border:1px solid #c8d8f8}
#authPage #feedbackBox .fb-item .fb-icon{font-size:16px;flex-shrink:0}
#authPage #feedbackBox .fb-item .fb-val{color:#1677FF;font-family:inherit;font-size:12px;word-break:break-all;text-shadow:none}

/* ========== APP SHELL ========== */
#appShell{display:none;position:fixed;inset:0;flex-direction:column}
#appShell.show{display:flex}

/* ========== TOP BAR ========== */
#topBar{position:relative;z-index:20;background:rgba(255,255,255,0.18);padding:8px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(0,0,0,0.06);min-height:48px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#topBar h1{font-size:15px;font-weight:700;color:var(--white);letter-spacing:1px}
#topBar .user-quick{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-dim)}
#topBar .user-quick .avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--cyan2));display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;font-weight:700}
#weatherTag{font-size:11px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
@media(max-width:480px){#weatherTag{font-size:10px;max-width:80px}}
.tier-badge{padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;display:inline-block;letter-spacing:1px}
.tier-badge.premium{background:rgba(255,149,0,0.12);color:var(--neon);border:1px solid rgba(255,149,0,0.25)}
.tier-badge.满级{background:linear-gradient(135deg,rgba(255,209,0,0.18),rgba(255,149,0,0.12));color:#FF8C00;border:1px solid rgba(255,149,0,0.35);letter-spacing:2px}
.tier-badge.3级{background:rgba(22,119,255,0.08);color:var(--cyan);border:1px solid rgba(22,119,255,0.2)}
.tier-badge.free{background:rgba(0,0,0,0.04);color:var(--text-dim);border:1px solid var(--border)}
.level-badge{font-size:10px;padding:1px 5px;border-radius:4px;font-weight:600;display:inline-block}
.level-badge.lv-0,.level-badge.lv-1{background:rgba(150,150,150,0.12);color:#888;border:1px solid rgba(150,150,150,0.25)}
.level-badge.lv-2{background:rgba(22,119,255,0.1);color:#1677FF;border:1px solid rgba(22,119,255,0.25)}
.level-badge.lv-3,.level-badge.lv-4,.level-badge.lv-5{background:rgba(29,158,117,0.12);color:#1D9E75;border:1px solid rgba(29,158,117,0.3)}
/* notification bell */
#notifBtn{position:relative;background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;padding:8px;transition:all 0.2s;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
#notifBtn:hover,#notifBtn:active{color:var(--cyan)}
#notifBtn .notif-badge{position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--magenta);color:#fff;font-size:9px;line-height:16px;text-align:center;padding:0 4px;font-weight:700;display:none}
#notifBtn .notif-badge.show{display:block}
/* notification dropdown */
#notifDropdown{position:fixed;top:50px;right:10px;z-index:35;width:300px;max-height:400px;overflow-y:auto;background:var(--bg-panel);border:1px solid var(--border-accent);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.5);display:none;padding:8px}
#notifDropdown.show{display:block}
#notifDropdown .nd-item{padding:10px 12px;border-radius:8px;font-size:12px;color:var(--text);margin-bottom:4px;cursor:pointer;transition:all 0.2s;border:1px solid transparent}
#notifDropdown .nd-item:hover,#notifDropdown .nd-item:active{background:rgba(22,119,255,0.06);border-color:var(--border)}
#notifDropdown .nd-item .nd-icon{font-size:14px;margin-right:6px}
#notifDropdown .nd-item .nd-time{font-size:10px;color:var(--text-dim);margin-top:2px}
#notifDropdown .nd-empty{text-align:center;padding:20px;color:var(--text-dim);font-size:12px}

/* ========== PAGE CONTAINER ========== */
.page{position:absolute;top:48px;left:0;right:0;bottom:56px;overflow-y:auto;overflow-x:hidden;display:none;-webkit-overflow-scrolling:touch}
.page.active{display:block}
.page.map-page{overflow:hidden}
.page.map-page:not(.active),.page.map-page:not(.active) *{visibility:hidden!important;pointer-events:none!important}
/* Side panels (chat/team/profile) - slide from right */
.page.slide-panel{position:fixed;top:0;right:0;bottom:56px;left:auto;width:min(88vw,420px);max-width:100vw;transform:translateX(100%);transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);z-index:30;display:block!important;padding-top:48px;box-shadow:-4px 0 24px rgba(0,0,0,0.35);overflow-y:auto;overflow-x:hidden}
.page.slide-panel.active{transform:translateX(0)}
#panelBackdrop{position:fixed;inset:0;z-index:29;background:rgba(0,0,0,0.35);display:none;transition:opacity 0.25s}
#panelBackdrop.show{display:block}

/* ========== MAP PAGE ========== */
#mapContainer{position:absolute;top:0;left:0;width:100%;height:100%;touch-action:manipulation;-webkit-user-select:none;user-select:none}
#mapContainer .amap-maps{width:100%!important;height:100%!important}
#mapContainer canvas.touch-action-auto{touch-action:manipulation!important;image-rendering:auto;image-rendering:crisp-edges}
.amap-logo,.amap-copyright{opacity:0.2;bottom:10px!important}

#mapControls{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:6px}
#mapControls button{width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,0.88);border:1px solid var(--border);color:var(--cyan);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all 0.2s;box-shadow:0 2px 8px rgba(0,0,0,0.06);min-width:44px;min-height:44px}
#mapControls button:hover,#mapControls button:active{background:rgba(255,255,255,0.95);border-color:var(--cyan);box-shadow:0 2px 12px rgba(22,119,255,0.12)}
@media(hover:none){#mapControls button:hover{background:rgba(255,255,255,0.88);border-color:var(--border);box-shadow:0 2px 8px rgba(0,0,0,0.06)}#mapControls button:active{background:rgba(255,255,255,0.95);border-color:var(--cyan);box-shadow:0 2px 12px rgba(22,119,255,0.12)}}

#trafficToggle{position:absolute;left:10px;top:64px;z-index:10;background:rgba(255,255,255,0.88);border:1px solid var(--border);border-radius:10px;padding:8px 14px;font-size:12px;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;gap:6px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all 0.2s;font-family:inherit;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
#trafficToggle.active{background:rgba(22,119,255,0.08);border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 0 3px rgba(22,119,255,0.08)}

/* map search bar */
#mapSearchBar{position:absolute;top:56px;left:50%;transform:translateX(-50%);z-index:100;width:calc(100% - 32px);max-width:400px}
#mapSearchBar input{width:100%;padding:10px 14px 10px 38px;background:rgba(255,255,255,0.95);border:1px solid var(--border);border-radius:12px;color:#333;font-size:14px;outline:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-family:inherit;transition:all 0.2s;box-shadow:0 2px 12px rgba(0,0,0,0.08)}
#mapSearchBar input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(22,119,255,0.1);background:#fff}
#mapSearchBar input::placeholder{color:var(--text-dim)}
#mapSearchBar::before{content:'⌕';position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--cyan);font-size:17px;pointer-events:none;z-index:1}
#mapSearchResults{position:absolute;top:102px;left:50%;transform:translateX(-50%);z-index:101;width:calc(100% - 32px);max-width:400px;max-height:280px;overflow-y:auto;background:rgba(255,255,255,0.98);border:1px solid var(--border);border-radius:12px;display:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 6px 24px rgba(0,0,0,0.12)}
#mapSearchResults.show{display:block}
.map-search-item{padding:10px 14px;font-size:12px;color:var(--text);cursor:pointer;border-bottom:1px solid var(--border);transition:all 0.15s;display:flex;align-items:center;gap:8px}
.map-search-item:hover,.map-search-item:active{background:rgba(22,119,255,0.04)}
.map-search-item .ms-icon{font-size:16px;flex-shrink:0}
.map-search-item .ms-text{flex:1;line-height:1.4}
.map-search-item .ms-type{font-size:10px;color:var(--text-dim);flex-shrink:0}

#addBtn{position:absolute;right:12px;bottom:80px;z-index:10;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#1677FF,#3B9CFF);border:none;color:#fff;font-size:26px;cursor:pointer;box-shadow:0 4px 20px rgba(22,119,255,0.3);display:flex;align-items:center;justify-content:center;transition:all 0.15s;font-weight:700}
#addBtn:active{transform:scale(0.9)}
#addBtn.adding{background:linear-gradient(135deg,#FF3B30,#FF6B6B);transform:rotate(45deg);box-shadow:0 4px 20px rgba(255,59,48,0.3)}

#addTypeBar{position:absolute;bottom:100px;left:10px;right:10px;z-index:10;display:none;gap:8px;padding:4px 0;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}
#addTypeBar::-webkit-scrollbar{display:none}
#addTypeBar.show{display:flex}
.type-chip{display:inline-flex;flex-direction:column;align-items:center;gap:3px;background:rgba(255,255,255,0.96);border:2px solid var(--border);border-radius:14px;padding:10px 12px;min-width:64px;cursor:pointer;transition:all 0.15s;backdrop-filter:blur(12px);font-family:inherit;box-shadow:0 2px 8px rgba(0,0,0,0.04);flex-shrink:0}
.type-chip:active,.type-chip.selected{border-color:var(--cyan);background:rgba(22,119,255,0.06);transform:scale(0.96)}
.type-chip .tc-icon{font-size:20px;line-height:1}
.type-chip .tc-label{font-size:10px;color:var(--text);white-space:nowrap;font-weight:500}
.type-chip .tc-dot{width:8px;height:8px;border-radius:50%;margin-bottom:2px}

#legend{position:absolute;left:10px;bottom:80px;z-index:8;background:rgba(255,255,255,0.88);border:1px solid var(--border);border-radius:10px;padding:6px 10px;font-size:10px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 8px rgba(0,0,0,0.04)}
#legend .li{display:flex;align-items:center;gap:5px;margin:2px 0;font-size:10px;color:var(--text-dim)}
#legend .li .d{width:7px;height:7px;border-radius:50%;flex-shrink:0}
#legend .li .dn{width:7px;height:2px;border-radius:1px;flex-shrink:0}

#teamLiveBar{position:absolute;top:50px;left:0;right:0;z-index:9;display:none;padding:6px 12px;background:rgba(255,255,255,0.92);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#teamLiveBar.show{display:flex;align-items:center;gap:8px;overflow-x:auto}
#teamLiveBar .member-dot{display:flex;align-items:center;gap:4px;background:rgba(22,119,255,0.06);border-radius:8px;padding:3px 8px;font-size:11px;color:var(--cyan);cursor:pointer;white-space:nowrap;flex-shrink:0;border:1px solid rgba(22,119,255,0.15)}
#teamLiveBar .member-dot .pulse{width:6px;height:6px;border-radius:50%;background:var(--neon);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}

/* ========== BOTTOM SHEET ========== */
#bottomSheet{position:absolute;bottom:0;left:0;right:0;z-index:14;background:#fff;border-radius:18px 18px 0 0;max-height:75vh;overflow-y:auto;transform:translateY(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);padding:16px 16px 24px;border-top:1px solid var(--border);box-shadow:0 -4px 24px rgba(0,0,0,0.08)}
#bottomSheet.open{transform:translateY(0)}
#bottomSheet .handle{width:36px;height:4px;background:var(--text-dim);border-radius:2px;margin:0 auto 14px;opacity:0.4}
#bottomSheet .stitle{font-size:17px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;color:var(--white)}
#bottomSheet input,#bottomSheet textarea{width:100%;padding:12px;background:var(--bg-input);border:1px solid var(--border);border-radius:10px;color:var(--white);font-size:14px;outline:none;font-family:inherit;transition:border .2s}
#bottomSheet input:focus,#bottomSheet textarea:focus{border-color:var(--cyan)}
#bottomSheet textarea{resize:none;min-height:70px}
.scontent{font-size:13px;line-height:1.7;color:var(--text)}
.scontent label{font-size:11px;color:var(--text-dim);display:block;margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.addr-tag{display:inline-flex;align-items:center;gap:4px;background:rgba(22,119,255,0.08);color:var(--cyan);padding:5px 10px;border-radius:6px;font-size:12px;margin-bottom:8px;font-weight:600}
.sactions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.sactions button{padding:10px 20px;border-radius:10px;border:none;font-size:13px;cursor:pointer;font-weight:600;transition:all 0.15s;font-family:inherit;min-height:44px}
.sactions button:active{opacity:0.75}
.btn-primary{background:var(--cyan);color:#fff}
.btn-approve{background:var(--neon);color:#1a0808}
.btn-reject{background:var(--text-dim);color:var(--bg-deep)}
.btn-delete{background:var(--magenta);color:#fff}
.btn-edit{background:var(--cyan);color:#fff}
.btn-neutral{background:var(--bg-input);color:var(--text);border:1px solid var(--border)}

#markerComments{background:var(--bg-card);border-radius:10px;padding:12px;margin-top:10px;border:1px solid var(--border)}
#markerComments h4{font-size:12px;color:var(--text-dim);margin-bottom:8px;display:flex;align-items:center;gap:5px}
.comment-item{background:var(--bg-input);border-radius:8px;padding:8px 10px;margin-bottom:6px;font-size:12px;border:1px solid var(--border)}
.comment-item .c-author{font-size:10px;color:var(--text-dim);margin-top:2px}
.comment-input-row{display:flex;gap:8px;margin-top:8px}
.comment-input-row input{flex:1;padding:8px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;color:var(--white);font-size:12px;outline:none;font-family:inherit}
.comment-input-row button{padding:6px 14px;background:var(--cyan);border:none;border-radius:8px;color:#fff;font-size:12px;cursor:pointer;font-weight:600;font-family:inherit}

/* ========== NOTES TAB ========== */
#notesTab{padding:12px;background:var(--bg-deep)}
#notesTab h2{font-size:18px;font-weight:700;margin-bottom:4px;color:var(--cyan)}
#notesTab .subh{font-size:12px;color:var(--text-dim);margin-bottom:16px}
.note-search{width:100%;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:14px;outline:none;margin-bottom:14px;font-family:inherit}
.note-list-item{background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--cyan);border-radius:8px;padding:12px;margin-bottom:8px;cursor:pointer;transition:all 0.15s;box-shadow:0 1px 4px rgba(0,0,0,0.03)}
.note-list-item:active{background:rgba(22,119,255,0.04)}
.note-list-item .n-text{font-size:14px;color:var(--text);line-height:1.5;margin-bottom:4px}
.note-list-item .n-meta{font-size:11px;color:var(--text-dim);display:flex;align-items:center;gap:12px}
.nearby-badge{font-size:10px;background:rgba(22,119,255,0.08);color:var(--cyan);padding:2px 8px;border-radius:6px}

/* ========== CHAT / MESSAGE TAB ========== */
#chatTab{padding:12px 12px 0;height:100%;background:var(--bg-deep);display:flex!important;flex-direction:column;overflow:hidden}
#chatTab.active{overflow:hidden}
.panel-close{position:sticky;top:0;float:right;width:30px;height:30px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);font-size:16px;line-height:28px;text-align:center;cursor:pointer;z-index:5;margin:-4px -4px 0 0;transition:all 0.15s}
.panel-close:hover{background:var(--bg-input);color:var(--white)}
#chatTab h2{font-size:18px;font-weight:700;margin-bottom:4px;color:var(--cyan)}
#chatTab .subh{font-size:11px;color:var(--text-dim);margin-bottom:10px}
.forum-search{margin-bottom:10px;position:relative}
.forum-search input{width:100%;padding:9px 14px 9px 34px;background:var(--bg-input);border:1px solid var(--border);border-radius:10px;color:var(--white);font-size:13px;outline:none;font-family:inherit}
.forum-search input::placeholder{color:var(--text-dim)}
.forum-search::before{content:'⌕';position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--cyan);z-index:1}
.chat-tabs,.post-cats{display:flex;gap:4px;margin-bottom:10px;background:var(--bg-card);border-radius:10px;padding:3px;border:1px solid var(--border);flex-wrap:wrap}
.chat-tab-btn{flex:1;padding:7px;border:none;background:transparent;color:var(--text-dim);font-size:11px;border-radius:8px;cursor:pointer;font-family:inherit}
.chat-tab-btn.active{background:rgba(22,119,255,0.15);color:var(--cyan)}
#chatList{flex:1;overflow-y:auto;padding-bottom:4px}
.post-cat{font-size:10px;padding:3px 8px;border-radius:6px;background:transparent;color:var(--text-dim);cursor:pointer;border:none;font-family:inherit}
.post-cat.selected{background:rgba(22,119,255,0.15);color:var(--cyan)}
.chat-msg{background:var(--bg-card);border-radius:12px;padding:14px;margin-bottom:10px;border:1px solid var(--border);transition:all 0.15s;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.chat-msg:active{background:var(--bg-input)}
.chat-msg:hover .cm-actions,.chat-msg:active .cm-actions{opacity:1}
.chat-msg .cm-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.chat-msg .cm-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex-shrink:0;font-weight:700}
.chat-msg .cm-author{font-size:14px;font-weight:700;color:var(--white)}
.chat-msg .cm-time{font-size:11px;color:var(--text-dim);margin-left:auto}
.chat-msg .cm-text{font-size:14px;color:var(--text);line-height:1.6;margin-bottom:8px;word-break:break-word}
.chat-msg .cm-cat{display:inline-block;font-size:10px;padding:2px 7px;border-radius:5px;margin-bottom:8px;font-weight:600}
.chat-msg .cm-cat.\6c42\52a9{background:rgba(255,59,48,0.1);color:var(--magenta)}
.chat-msg .cm-cat.\5206\4eab{background:rgba(22,119,255,0.1);color:var(--cyan)}
.chat-msg .cm-cat.\8def\51b5{background:rgba(255,149,0,0.1);color:var(--neon)}
.chat-msg .cm-cat.\8ba8\8bba{background:rgba(0,0,0,0.04);color:var(--text-dim)}
.chat-msg .cm-loc{font-size:11px;color:var(--cyan);cursor:pointer;margin-bottom:8px;padding:4px 6px;background:rgba(22,119,255,0.08);border-radius:6px;display:inline-block;min-height:36px}
.chat-msg .cm-stats{display:flex;gap:14px;font-size:11px;color:var(--text-dim);margin-bottom:8px}
.chat-msg .cm-stats span{cursor:pointer;padding:3px 0;min-height:28px;display:inline-flex;align-items:center}
.chat-msg .cm-stats span:hover,.chat-msg .cm-stats span:active{color:var(--cyan)}
/* chat images */
.chat-images{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.chat-images img{max-width:120px;max-height:120px;border-radius:8px;cursor:pointer;border:1px solid var(--border);transition:all 0.2s;object-fit:cover}
.chat-images img:hover,.chat-images img:active{border-color:var(--cyan);transform:scale(1.02)}
.img-upload-btn{padding:4px 10px;background:var(--bg-input);border:1px dashed var(--border);border-radius:6px;color:var(--text-dim);font-size:11px;cursor:pointer;font-family:inherit;transition:all 0.2s;min-height:36px}
.img-upload-btn:hover,.img-upload-btn:active{border-color:var(--cyan);color:var(--cyan)}
/* replies */
.chat-replies{margin-left:16px;margin-top:8px;padding-left:12px;border-left:1.5px solid rgba(22,119,255,0.1)}
.chat-reply{padding:7px 0;font-size:12px;color:var(--text);display:flex;gap:6px;align-items:flex-start}
.chat-reply .cr-avatar{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;flex-shrink:0;font-weight:600}
.chat-reply .cr-body{flex:1}
.chat-reply .cr-author{font-weight:600;color:var(--white);margin-right:6px}
.chat-reply .cr-time{font-size:10px;color:var(--text-dim);margin-left:6px}
.chat-reply .cr-del{font-size:9px;color:var(--text-dim);cursor:pointer;margin-left:4px;opacity:0;transition:opacity 0.15s}
.chat-reply:hover .cr-del,.chat-reply:active .cr-del{opacity:1}
.cm-actions{display:flex;gap:6px;opacity:0.6;transition:opacity 0.15s}
.cm-actions button{padding:4px 10px;border-radius:6px;border:none;font-size:11px;cursor:pointer;background:var(--bg-input);color:var(--text-dim);font-family:inherit;min-height:32px}
.cm-actions button:hover,.cm-actions button:active{background:rgba(22,119,255,0.1);color:var(--cyan)}
.cm-actions .act-del{color:var(--magenta)}
.chat-input-bar{padding:8px 12px;padding-bottom:12px;background:var(--bg-panel);border-top:1px solid var(--border);display:flex;gap:8px;z-index:5;flex-shrink:0;align-items:flex-start;position:relative}
.chat-input-bar textarea{flex:1;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:10px;color:var(--white);font-size:14px;outline:none;resize:none;height:40px;line-height:1.4;font-family:inherit}
.chat-input-bar textarea::placeholder{color:var(--text-dim)}
.chat-input-bar button{padding:12px 16px;background:var(--cyan);border:none;border-radius:10px;color:#fff;font-size:13px;cursor:pointer;font-weight:700;white-space:nowrap;flex-shrink:0;font-family:inherit;min-height:44px}
.chat-input-bar.login-tip{justify-content:center;align-items:center;color:var(--text-dim);font-size:13px}
.reply-inline{display:flex;gap:6px;margin-top:8px}
.reply-inline input{flex:1;padding:7px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;color:var(--white);font-size:12px;outline:none;font-family:inherit}
.reply-inline button{padding:5px 12px;border-radius:8px;border:none;font-size:11px;cursor:pointer;background:var(--cyan);color:#fff;flex-shrink:0;font-family:inherit}
.publish-panel{background:var(--bg-card);border-radius:12px;padding:12px;margin-bottom:10px;border:1px solid var(--border)}
.publish-panel .pp-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.publish-panel .pp-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;font-weight:700;flex-shrink:0;background:var(--cyan)}
.publish-panel .pp-user{font-size:13px;color:var(--white);font-weight:600}
.publish-panel textarea{width:100%;min-height:60px;padding:10px;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;color:var(--white);font-size:13px;outline:none;resize:vertical;font-family:inherit;line-height:1.5}
.publish-panel textarea:focus{border-color:var(--cyan)}
.publish-panel .pp-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.publish-panel .pp-cats{display:flex;gap:4px}
.publish-panel .pp-cat{font-size:10px;padding:3px 8px;border-radius:6px;background:var(--bg-input);color:var(--text-dim);cursor:pointer;border:none;font-family:inherit}
.publish-panel .pp-cat.selected{background:rgba(22,119,255,0.15);color:var(--cyan)}
.publish-panel .pp-btn{padding:7px 20px;background:var(--cyan);border:none;border-radius:8px;color:#fff;font-size:13px;cursor:pointer;font-weight:700;font-family:inherit}

/* ========== TEAM TAB ========== */
#teamTab{padding:12px;background:var(--bg-deep);height:100%;overflow-y:auto}
#teamTab h2{font-size:18px;font-weight:700;margin-bottom:4px;color:var(--cyan)}
#teamTab .subh{font-size:12px;color:var(--text-dim);margin-bottom:16px}
.team-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.team-card h3{font-size:16px;color:var(--cyan);margin-bottom:8px}
.team-card .t-meta{font-size:12px;color:var(--text-dim);margin-bottom:4px}
.team-card .t-members{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap}
.team-card .t-member{display:flex;align-items:center;gap:4px;background:var(--bg-input);border-radius:8px;padding:4px 10px;font-size:12px;color:var(--text);border:1px solid var(--border)}
.team-card .t-member .status-dot{width:6px;height:6px;border-radius:50%;background:var(--text-dim)}
.team-card .t-member .status-dot.online{background:var(--neon);box-shadow:0 0 6px rgba(255,209,0,0.5)}
.team-card .t-actions{display:flex;gap:8px;margin-top:12px}
.team-card .t-actions button{padding:8px 14px;border-radius:8px;border:none;font-size:12px;cursor:pointer;font-weight:600;font-family:inherit}
.team-card .t-invite{background:var(--bg-input);border-radius:8px;padding:10px;margin-top:10px;font-size:12px;color:var(--text-dim);display:flex;align-items:center;gap:8px}
.team-card .t-invite code{font-size:14px;color:var(--cyan);font-weight:700;letter-spacing:3px}
.no-team-card{background:var(--bg-card);border:1px dashed var(--border);border-radius:14px;padding:24px;text-align:center;margin-bottom:14px}
.no-team-card .big-icon{font-size:40px;margin-bottom:10px;opacity:0.3}
.no-team-card h3{font-size:15px;color:var(--text-dim);margin-bottom:8px}
.no-team-card .btns{display:flex;gap:8px;justify-content:center}
.no-team-card .btns button{padding:10px 20px;border-radius:10px;border:none;font-size:13px;cursor:pointer;font-weight:600;font-family:inherit}
.btn-create{background:linear-gradient(135deg,var(--cyan),var(--cyan2));color:#fff}
.btn-join{background:var(--bg-input);color:var(--text);border:1px solid var(--border)}
.modal-overlay{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,0.8);display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.modal-overlay.show{display:flex}
.modal-box{background:var(--bg-panel);border-radius:16px;padding:20px;width:100%;max-width:340px;border:1px solid var(--border-accent);box-shadow:0 8px 32px rgba(0,0,0,0.6)}
.modal-box h3{font-size:16px;margin-bottom:16px;color:var(--white)}
.modal-box input{width:100%;padding:12px;background:var(--bg-input);border:1px solid var(--border);border-radius:10px;color:var(--white);font-size:14px;margin-bottom:10px;outline:none;font-family:inherit}
.modal-box input:focus{border-color:var(--cyan)}
.modal-box .modal-btns{display:flex;gap:8px}
.modal-box .modal-btns button{flex:1;padding:10px;border-radius:8px;border:none;font-size:13px;cursor:pointer;font-weight:600;font-family:inherit}

/* ========== PROFILE TAB ========== */
#profileTab{padding:16px;background:var(--bg-deep);height:100%;overflow-y:auto}
#profileTab .profile-header{text-align:center;margin-bottom:24px}
#profileTab .p-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--magenta));display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 12px;color:#fff;box-shadow:0 0 20px rgba(22,119,255,0.2)}
#profileTab h2{font-size:20px;font-weight:700;color:var(--white);margin-bottom:2px}
#profileTab .p-role{font-size:12px;color:var(--text-dim);margin-bottom:2px}
#profileTab .p-tier{display:inline-block;padding:4px 14px;border-radius:10px;margin-top:8px;font-size:12px;font-weight:700}
.p-tier.premium{background:rgba(255,149,0,0.12);color:var(--neon);border:1px solid rgba(255,149,0,0.3)}
.p-tier.满级{background:linear-gradient(135deg,rgba(255,209,0,0.2),rgba(255,149,0,0.15));color:#FF8C00;border:1px solid rgba(255,149,0,0.4)}
.p-tier.3级{background:rgba(22,119,255,0.08);color:var(--cyan);border:1px solid rgba(22,119,255,0.2)}
.p-tier.free{background:rgba(0,0,0,0.04);color:var(--text-dim);border:1px solid var(--border)}
.profile-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:20px}
.profile-stat{background:var(--bg-card);border-radius:12px;padding:12px;text-align:center;border:1px solid var(--border)}
.profile-stat .ps-num{font-size:22px;font-weight:700;color:var(--cyan)}
.profile-stat .ps-label{font-size:11px;color:var(--text-dim);margin-top:2px}
.profile-menu{margin-bottom:16px}
.profile-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 16px;background:var(--bg-card);border:none;border-bottom:1px solid var(--border);color:var(--text);font-size:14px;cursor:pointer;text-align:left;font-family:inherit;transition:all 0.2s}
.profile-menu button:first-child{border-radius:12px 12px 0 0}
.profile-menu button:last-child{border-radius:0 0 12px 12px;border-bottom:none}
.profile-menu button:only-child{border-radius:12px}
.profile-menu button:hover,.profile-menu button:active{background:rgba(22,119,255,0.06)}
.profile-menu button .arrow{color:var(--text-dim)}

/* ========== BOTTOM TAB BAR ========== */
#bottomTabBar{position:absolute;bottom:0;left:0;right:0;z-index:20;background:var(--bg-panel);border-top:1px solid var(--border);display:flex;height:56px;padding-bottom:env(safe-area-inset-bottom,0)}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:none;background:transparent;color:var(--text-dim);font-size:clamp(9px,2.2vw,10px);cursor:pointer;transition:all 0.2s;font-family:inherit;min-height:44px;padding:4px 0;-webkit-tap-highlight-color:transparent}
.tab-item.active{color:var(--cyan)}
.tab-item .t-icon{font-size:20px;line-height:1}
.tab-item .t-badge{position:absolute;top:2px;right:calc(50% - 24px);min-width:16px;height:16px;border-radius:8px;background:var(--magenta);color:#fff;font-size:10px;line-height:16px;text-align:center;padding:0 4px}

.tab-bar{display:flex;gap:4px;margin-bottom:14px;background:var(--bg-card);border-radius:10px;padding:3px;border:1px solid var(--border)}
.tab-btn{flex:1;padding:8px 4px;border:none;background:transparent;color:var(--text-dim);font-size:11px;border-radius:8px;cursor:pointer;font-weight:600;font-family:inherit}
.tab-btn.active{background:rgba(22,119,255,0.15);color:var(--cyan)}
.review-item{background:var(--bg-card);border-radius:12px;padding:14px;margin-bottom:10px;border:1px solid var(--border)}
.review-item .ri-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.review-item .ri-type{font-size:11px;padding:3px 10px;border-radius:8px;color:#fff;font-weight:600}
.review-item .ri-title{font-size:14px;font-weight:600;margin-bottom:4px;color:var(--white)}
.review-item .ri-desc{font-size:12px;color:var(--text);margin-bottom:4px}
.review-item .ri-meta{font-size:11px;color:var(--text-dim)}
.review-item .ri-actions{display:flex;gap:8px;margin-top:10px}
.review-item .ri-actions button{padding:6px 14px;border-radius:6px;border:none;font-size:12px;cursor:pointer;font-weight:600;font-family:inherit}
#userList .user-item{background:var(--bg-card);border-radius:10px;padding:12px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border)}
.user-item .uname{font-size:14px;font-weight:600;color:var(--white)}
.user-item .uinfo{font-size:11px;color:var(--text-dim);margin-top:2px}
.user-item .uactions{display:flex;gap:6px}
.user-item .uactions button{padding:4px 10px;border-radius:6px;border:none;font-size:11px;cursor:pointer;font-weight:600;font-family:inherit}

/* ========== TOAST & LOADING ========== */
#toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:31;background:rgba(255,255,255,0.97);color:var(--cyan);padding:10px 22px;border-radius:10px;font-size:13px;pointer-events:none;opacity:0;transition:opacity 0.3s;border:1px solid var(--border-accent);box-shadow:0 4px 20px rgba(0,0,0,0.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#loadingOverlay{position:fixed;inset:0;z-index:50;background:#f5f5f7;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.4s}
#loadingOverlay.show{opacity:1;pointer-events:auto;animation:forceHideLoading 8s forwards}@keyframes forceHideLoading{0%,70%{opacity:1;pointer-events:auto}100%{opacity:0;pointer-events:none;visibility:hidden}}
.spinner{width:42px;height:42px;border:2px solid #e0e0e0;border-top-color:#1677FF;border-radius:50%;animation:spin 0.7s linear infinite;box-shadow:0 0 12px rgba(22,119,255,0.15)}
@keyframes spin{to{transform:rotate(360deg)}}
#loadingOverlay .load-text{font-size:13px;color:#999;margin-top:14px}
#toast.show{opacity:1}

/* image viewer overlay */
#imgViewer{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,0.9);display:none;align-items:center;justify-content:center;cursor:pointer}
#imgViewer.show{display:flex}
#imgViewer img{max-width:95vw;max-height:95vh;border-radius:8px;border:1px solid var(--border-accent)}

@media (max-width:380px){
  .tab-item .t-icon{font-size:18px}
  .tab-item{font-size:9px}
}
/* ========== RESPONSIVE: Mobile First (V20.0) ========== */
/* Small phones: 320px-479px */
@media(max-width:479px){
  #mapSearchBar{width:auto;max-width:none;left:110px;right:16px;transform:none}
  #mapSearchResults{width:auto;max-width:none;left:110px;right:16px;transform:none}
  #notifDropdown{width:calc(100vw - 20px);max-width:300px;right:10px}

  #addTypeBar{left:8px;right:8px}
  .modal-box{max-width:calc(100vw - 40px)}
  .chat-input-bar{padding:8px 10px;gap:6px}
  .chat-input-bar textarea{font-size:13px}
  .chat-input-bar button{font-size:12px;padding:10px 12px}
  .announce-card{max-width:calc(100vw - 24px);border-radius:14px}
  .profile-stats{gap:6px}
  .profile-stat .ps-num{font-size:18px}
  .note-list-item .n-text{font-size:13px}
  .chat-msg .cm-text{font-size:13px}
  .publish-panel textarea{font-size:12px}
}
/* Tablet: 480px-767px */
@media(min-width:480px) and (max-width:767px){
  #mapSearchBar{max-width:320px}
  #mapSearchResults{max-width:320px}
  #notifDropdown{width:320px}

  .auth-box{max-width:380px}
  .modal-box{max-width:360px}
}
/* Tablet landscape / Small desktop */
@media(min-width:768px){
  body{font-size:clamp(14px,1.6vw,16px)}
  #mapSearchBar{max-width:420px}
  #mapSearchResults{max-width:420px}
  #notifDropdown{width:340px}
  .auth-box{max-width:400px}
  .modal-box{max-width:380px}
  .page:not(.slide-panel){max-width:768px;left:50%;transform:translateX(-50%)}
  #bottomTabBar{justify-content:center}
  .tab-item{max-width:140px}
}
/* Desktop: 1024px+ */
@media(min-width:1024px){
  .page.slide-panel{width:min(40vw,480px)}
  #topBar{padding:8px 24px}
  #mapSearchBar{max-width:480px}
  #mapSearchResults{max-width:480px}
  .chat-images img{max-width:160px;max-height:160px}
}
.sim-avatar-marker{text-align:center}
.sim-avatar-marker .sim-circle{width:24px;height:24px;border-radius:50%;border:2px solid var(--cyan);background:rgba(22,119,255,0.15);margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--cyan)}
.sim-avatar-marker .sim-label{font-size:9px;color:var(--cyan);background:rgba(0,0,0,0.9);padding:1px 5px;border-radius:4px;margin-top:2px;white-space:nowrap}

/* guest warning bar */
#guestWarning{position:absolute;top:0;left:0;right:0;z-index:9;background:linear-gradient(90deg,rgba(22,119,255,0.12),rgba(255,80,0,0.08));padding:6px 12px;font-size:11px;color:var(--orange);text-align:center;display:none;border-bottom:1px solid rgba(22,119,255,0.2)}
#guestWarning.show{display:block}
/* announcement modal (light) */
#announceOverlay{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,0.45);display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px)}
#announceOverlay.show{display:flex}
.announce-card{background:#fff;border-radius:16px;padding:0;width:100%;max-width:380px;max-height:80vh;overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,0.12)}
.announce-header{padding:20px 20px 14px;text-align:center;border-bottom:1px solid #f0f0f0}
.announce-header .announce-icon{font-size:40px;display:block;margin-bottom:8px;animation:bounce 2s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.announce-header h3{font-size:20px;font-weight:800;background:linear-gradient(135deg,#1677FF,#3B9CFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:2px;letter-spacing:1px;text-shadow:none}
.announce-body{padding:16px 20px;max-height:45vh;overflow-y:auto;font-size:13px;line-height:1.8;color:#555}
.announce-body .a-section{margin-bottom:14px}
.announce-body .a-section-title{font-size:14px;font-weight:700;color:#1677FF;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.announce-body .a-features{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.announce-body .a-feat{padding:10px;background:#f5f5f7;border-radius:10px;border:1px solid #e8e8ec;text-align:center}
.announce-body .a-feat .af-icon{font-size:22px;margin-bottom:4px}
.announce-body .a-feat .af-label{font-size:11px;color:#333;font-weight:600}
.announce-body .a-feat .af-desc{font-size:10px;color:#999;margin-top:2px}
.announce-body .a-rules{list-style:none;padding:0}
.announce-body .a-rules li{padding:6px 0;font-size:12px;display:flex;align-items:flex-start;gap:8px;color:#555;border-bottom:1px solid #f0f0f0}
.announce-body .a-rules li:last-child{border-bottom:none}
.announce-body .a-rules li .ar-icon{color:#FFD100;flex-shrink:0;font-size:14px}
.announce-footer{padding:14px 20px;border-top:1px solid #f0f0f0}
.announce-footer button{flex:1;padding:12px;border-radius:10px;border:none;font-size:14px;cursor:pointer;font-weight:700;font-family:inherit;transition:all 0.15s}
.announce-footer .announce-agree{background:linear-gradient(135deg,#1677FF,#3B9CFF);color:#fff}
.announce-footer .announce-close{background:#f5f5f7;color:#999;border:1px solid #e8e8ec}
.announce-footer .announce-check{display:flex;align-items:center;gap:6px;font-size:11px;color:#999;margin-bottom:8px;cursor:pointer}
.announce-footer .announce-check input{accent-color:#1677FF}

/* ========== ACCESSIBILITY: Focus & Selection (V20.0) ========== */
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* Allow text selection in content areas */
.page .scontent,.chat-msg .cm-text,.note-list-item .n-text,#markerComments,.announce-body{user-select:text;-webkit-user-select:text}
/* Reduce motion for accessibility */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}

/* ========== MUSIC PLAYER ========== */
#musicBtn{position:fixed;bottom:84px;right:8px;z-index:20;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,0.45);color:#fff;border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,0.25);transition:transform .15s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#musicBtn:active{transform:scale(0.9)}
#musicBtn.playing{animation:mpulse 2s infinite;background:rgba(236,65,65,0.55)}
@keyframes mpulse{0%,100%{box-shadow:0 0 0 0 rgba(236,65,65,0.4)}50%{box-shadow:0 0 0 10px rgba(236,65,65,0)}}
#musicOverlay{display:none;position:fixed;inset:0;z-index:18;background:rgba(0,0,0,0.1)}
#musicOverlay.show{display:block}
#musicPanel{position:fixed;bottom:0;right:8px;z-index:19;width:calc(100vw - 16px);max-width:360px;border-radius:16px 16px 0 0;transform:translateY(100%);transition:transform .3s ease;display:flex;flex-direction:column}
#musicPanel.open{transform:translateY(0)}
#musicPanel .mh{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(0,0,0,0.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:16px 16px 0 0;flex-shrink:0}
#musicPanel .mh .mt{font-size:13px;font-weight:600;color:#fff}
#musicPanel .mh button{background:none;border:none;color:rgba(255,255,255,0.5);font-size:18px;cursor:pointer;padding:0 4px}
#musicPanel .mh button:active{color:#fff}
#musicPanel .mw{display:flex;gap:6px;padding:8px 14px;background:rgba(0,0,0,0.3);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);flex-shrink:0}
#musicPanel .mw input{flex:1;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:7px 10px;color:#fff;font-size:12px;outline:none;font-family:inherit;min-width:0}
#musicPanel .mw input::placeholder{color:rgba(255,255,255,0.3)}
#musicPanel .mw input:focus{border-color:#ec4141}
#musicPanel .mw button{background:rgba(236,65,65,0.65);color:#fff;border:none;border-radius:8px;padding:7px 14px;font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap;font-weight:600}
#musicPanel .mw button:active{opacity:.8}
#musicPanel .ma{display:flex;gap:8px;padding:6px 14px 10px;background:rgba(0,0,0,0.3);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);flex-shrink:0}
#musicPanel .ma button{flex:1;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.6);border:none;border-radius:8px;padding:7px 0;font-size:12px;cursor:pointer;font-family:inherit}
#musicPanel .ma button:active{background:rgba(255,255,255,0.12);color:#fff}
#musicPanel iframe{width:100%;height:140px;border:none;flex-shrink:0;background:rgba(0,0,0,0.2)}
#musicPanel .mb{padding:8px 14px 12px;background:rgba(0,0,0,0.3);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:0 0 16px 16px;flex-shrink:0;font-size:10px;color:rgba(255,255,255,0.2);text-align:center}
@media(max-width:380px){
  #musicPanel{right:4px;left:4px;width:auto;max-width:none}
  #musicBtn{right:4px}
}

/* ========== WEATHER & YIYAN FLOATING ========== */
#weatherFloat{position:fixed;top:56px;left:8px;z-index:15;padding:7px 14px;border-radius:12px;background:rgba(0,0,0,0.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:14px;color:#fff;pointer-events:none;max-width:calc(100vw - 80px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
#yiyanFloat{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:15;padding:6px 16px;border-radius:10px;background:rgba(0,0,0,0.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:13px;color:rgba(255,255,255,0.75);text-align:center;max-width:calc(100vw - 40px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
@media(max-width:480px){
  #weatherFloat{font-size:12px;padding:6px 12px}
  #yiyanFloat{font-size:12px;padding:5px 14px}
}


/* ========== COMMUNITY POPUP (小区备注弹窗 - 横向) ========== */
.community-popup{position:absolute;bottom:184px;left:8px;right:8px;z-index:50;background:rgba(0,0,0,0.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:12px;padding:0;display:none;box-shadow:0 6px 28px rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.08);overflow:hidden;cursor:pointer;transition:opacity 0.2s}
.community-popup.show{display:block;animation:cpSlideUp 0.25s ease}
@keyframes cpSlideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.community-popup .cp-hd{font-size:12px;font-weight:700;color:#fff;padding:8px 12px 6px;border-bottom:1px solid rgba(255,255,255,0.06);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.community-popup .cp-bd{padding:6px 10px;max-height:132px;overflow-y:auto;overflow-x:hidden;font-size:11px;color:rgba(255,255,255,0.75);line-height:1.5}
.community-popup .cp-empty{color:rgba(255,255,255,0.3);font-size:11px;text-align:center;padding:6px 0}
.community-popup .cp-note{display:flex;align-items:center;gap:6px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,0.03);flex-wrap:nowrap}
.community-popup .cp-note:last-child{border-bottom:none}
.community-popup .cp-icon{flex-shrink:0;font-size:13px}
.community-popup .cp-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.community-popup .cp-pos{flex-shrink:0;font-size:10px;color:rgba(255,255,255,0.35);white-space:nowrap}
@media(max-width:380px){
  .community-popup{bottom:170px}
  .community-popup .cp-pos{font-size:9px}
}