/* ============================================================
 *  haowai-page.css — 号外页 V8.5 盒马清新风格
 * ============================================================ */
.hw-tabs-bar { display:flex; align-items:center; gap:0.375rem; padding:0.625rem 0.75rem; background:var(--bg-card,#FFF); overflow-x:auto; scrollbar-width:none; position:sticky; top:3.5rem; z-index:var(--z-sticky,200); }
.hw-tabs-bar::-webkit-scrollbar { display:none; }
.hw-tab-chip { flex-shrink:0; display:inline-flex; align-items:center; gap:0.25rem; padding:0.375rem 0.875rem; border-radius:var(--radius-pill,9999px); font-size:var(--fs-sm,13px); font-weight:500; color:var(--v85-text-secondary,#64748B); background:var(--bg-soft,#F3F4F6); border:1px solid transparent; cursor:pointer; transition:all 0.15s ease; text-decoration:none; white-space:nowrap; }
.hw-tab-chip i { font-size:1rem; }
.hw-tab-chip.active { color:var(--v85-primary,#0EA5E9); background:var(--v85-primary-50,#F0F9FF); border-color:var(--v85-primary,#0EA5E9); font-weight:600; }
.hw-tab-chip:focus-visible { outline:2px solid var(--v85-primary,#0EA5E9); outline-offset:2px; }
.hw-tab-chip:active { transform:scale(0.96); }
.hw-kingkong { padding:0.75rem 0.75rem 0.5rem; background:var(--bg-card,#FFF); margin-bottom:0.5rem; }
.hw-kk-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:0.5rem; }
.hw-kk-item { display:flex; flex-direction:column; align-items:center; gap:0.25rem; text-decoration:none; color:var(--v85-text-primary,#111827); padding:0.375rem 0.125rem; border-radius:var(--radius-md,8px); transition:transform 0.15s; }
.hw-kk-item:active { transform:scale(0.94); }
/* [P1-A] 金刚图标改圆形（FIX-CHECK:2026-09-28） */
.hw-kk-icon-wrap { width:clamp(2.25rem,10vw,2.75rem); height:clamp(2.25rem,10vw,2.75rem); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.25rem; }
.hw-kk-icon-blue { background:linear-gradient(135deg,#0D47A1,#1976D2); color:#fff; }
.hw-kk-icon-amber { background:linear-gradient(135deg,#E65100,#FF9800); color:#fff; }
.hw-kk-icon-green { background:linear-gradient(135deg,#1B5E20,#43A047); color:#fff; }
.hw-kk-icon-rose { background:linear-gradient(135deg,#880E4F,#E91E63); color:#fff; }
.hw-kk-label { font-size:var(--fs-xs,11px); color:var(--v85-text-secondary,#64748B); text-align:center; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.hw-loop-zone { margin:0 0.75rem 0.75rem; background:var(--bg-card,#FFF); border-radius:var(--radius-lg,16px); padding:1rem; box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,0.08)); }
.hw-loop-head { margin-bottom:0.875rem; }
.hw-loop-title { font-size:0.9375rem; font-weight:700; color:var(--v85-text-primary,#111827); display:flex; align-items:center; gap:0.375rem; }
.hw-loop-title i { color:var(--v85-primary,#0EA5E9); }
.hw-loop-sub { font-size:0.75rem; color:var(--v85-text-tertiary,#9CA3AF); margin-top:0.125rem; }
.hw-loop-cards { display:flex; gap:0.625rem; align-items:stretch; }
.hw-loop-card { flex:1; background:var(--bg-soft,#F9FAFB); border-radius:var(--radius-md,12px); padding:0.75rem; display:flex; flex-direction:column; gap:0.375rem; }
.hw-loop-card--biz { border-left:3px solid var(--v85-primary,#0EA5E9); }
.hw-loop-card--charity { border-left:3px solid var(--v85-charity,#E65100); }
.hw-loop-card-icon { width:2rem; height:2rem; border-radius:var(--radius-full,50%); background:var(--v85-primary-50,#F0F9FF); display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--v85-primary,#0EA5E9); flex-shrink:0; }
.hw-loop-card--charity .hw-loop-card-icon { background:#FFF3E0; color:var(--v85-charity,#E65100); }
.hw-loop-card-body h4 { font-size:0.8125rem; font-weight:600; color:var(--v85-text-primary,#111827); margin:0; line-height:1.4; }
.hw-loop-card-body p { font-size:0.6875rem; color:var(--v85-text-secondary,#64748B); line-height:1.5; margin:0; }
.hw-loop-tag { font-size:0.625rem; font-weight:600; padding:0.125rem 0.375rem; border-radius:var(--radius-pill,9999px); background:var(--v85-primary-50,#F0F9FF); color:var(--v85-primary,#0EA5E9); width:fit-content; }
.hw-loop-card--charity .hw-loop-tag { background:#FFF3E0; color:var(--v85-charity,#E65100); }
.hw-loop-arrow { display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:var(--v85-text-muted,#9CA3AF); flex-shrink:0; }
.hw-loop-links { display:flex; gap:0.75rem; margin-top:0.75rem; padding-top:0.75rem; border-top:1px solid var(--border-line,#E5E7EB); }
.hw-loop-link { font-size:0.75rem; color:var(--v85-primary,#0EA5E9); text-decoration:none; display:flex; align-items:center; gap:0.25rem; }
.hw-loop-link:hover { text-decoration:underline; }
.hw-pinned-section { padding:0 0.75rem; margin-bottom:0.75rem; }
.hw-news-list { padding:0 0.75rem; display:flex; flex-direction:column; gap:0.625rem; }
.hw-news-card { display:flex; gap:0.75rem; background:var(--bg-card,#FFF); border-radius:var(--radius-lg,16px); padding:0.75rem; box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,0.06)); cursor:pointer; transition:transform 0.15s,box-shadow 0.15s; -webkit-tap-highlight-color:transparent; text-decoration:none; color:inherit; }
.hw-news-card:active { transform:scale(0.98); box-shadow:var(--shadow-md,0 2px 8px rgba(0,0,0,0.1)); }
.hw-news-thumb { flex-shrink:0; width:5.5rem; height:4rem; border-radius:var(--radius-md,10px); overflow:hidden; background:var(--bg-subtle,#F3F4F6); position:relative; }
.hw-news-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.hw-news-thumb .hw-play-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.3); color:#fff; font-size:1.5rem; }
.hw-news-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:0.25rem; }
.hw-news-tag-row { display:flex; gap:0.25rem; }
.hw-news-type-tag { font-size:0.625rem; font-weight:600; padding:0.125rem 0.375rem; border-radius:var(--radius-pill,9999px); color:#fff; }
.tag-video { background:var(--v85-primary,#0EA5E9); }
.tag-official { background:var(--blue-600,#2563EB); }
.tag-hotnews { background:var(--red-600,#DC2626); }
.tag-community { background:var(--green-600,#16A34A); }
.tag-topic { background:var(--purple-600,#7C3AED); }
.hw-news-title { font-size:0.875rem; font-weight:700; color:var(--v85-text-primary,#111827); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hw-news-summary { font-size:0.75rem; color:var(--v85-text-secondary,#64748B); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.hw-news-meta { display:flex; gap:0.625rem; font-size:0.6875rem; color:var(--v85-text-muted,#9CA3AF); margin-top:auto; }
.hw-news-meta span { display:flex; align-items:center; gap:0.1875rem; }
.hw-loadmore-wrap { padding:1rem 0.75rem; text-align:center; }
.hw-loadmore-btn { display:inline-flex; align-items:center; gap:0.375rem; padding:0.625rem 1.5rem; border-radius:var(--radius-pill,9999px); background:var(--v85-primary,#0EA5E9); color:#fff; font-size:0.875rem; font-weight:600; border:none; cursor:pointer; transition:opacity 0.15s,transform 0.15s; }
.hw-loadmore-btn:active { transform:scale(0.96); opacity:0.85; }
.hw-loadmore-btn:disabled { opacity:0.6; cursor:not-allowed; }
.hw-skeleton-card, .hw-skeleton-pinned { background:var(--bg-card,#FFF); border-radius:var(--radius-lg,16px); padding:0.75rem; margin-bottom:0.625rem; box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,0.06)); }
.hw-skeleton-pinned { padding:0; overflow:hidden; }
.hw-sk { background:linear-gradient(90deg,#F3F4F6 25%,#E5E7EB 50%,#F3F4F6 75%); background-size:200% 100%; animation:hwShimmer 1.5s infinite; border-radius:var(--radius-sm,4px); }
@keyframes hwShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.hw-sk-thumb { width:5.5rem; height:4rem; border-radius:var(--radius-md,10px); flex-shrink:0; }
.hw-sk-cover { width:100%; height:8rem; border-radius:0; }
.hw-sk-body { padding:0.75rem; display:flex; flex-direction:column; gap:0.5rem; }
.hw-skeleton-pinned .hw-sk-body { padding:0.75rem; }
.hw-sk-line { height:0.75rem; width:100%; }
.hw-sk-line--short { width:60%; }
.hw-sk-line--tiny { width:40%; height:0.5rem; }
.hw-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2.5rem 1rem; text-align:center; gap:0.5rem; }
.hw-state i { font-size:2.5rem; color:var(--v85-text-muted,#9CA3AF); margin-bottom:0.5rem; }
.hw-state--empty i { color:var(--v85-text-muted,#9CA3AF); }
.hw-state--error i { color:var(--color-danger,#DC2626); }
.hw-state-title { font-size:0.9375rem; font-weight:600; color:var(--v85-text-primary,#111827); margin:0; }
.hw-state-desc { font-size:0.8125rem; color:var(--v85-text-secondary,#64748B); margin:0; }
.hw-state-retry { margin-top:0.75rem; padding:0.5rem 1.25rem; border-radius:var(--radius-pill,9999px); background:var(--v85-primary,#0EA5E9); color:#fff; font-size:0.875rem; font-weight:600; border:none; cursor:pointer; }
.hw-hj-fab-wrap { position:fixed; bottom:calc(env(safe-area-inset-bottom,0px)+5.5rem); right:1rem; z-index:var(--z-fab,500); }
.hw-hj-fab-btn { width:2.75rem; height:2.75rem; border-radius:var(--radius-full,50%); background:linear-gradient(135deg,var(--v85-primary,#0EA5E9),var(--blue-600,#1D4ED8)); color:#fff; font-size:1.125rem; font-weight:700; border:none; cursor:pointer; box-shadow:var(--shadow-lg,0 4px 12px rgba(14,165,233,0.35)); display:flex; align-items:center; justify-content:center; transition:transform 0.15s,box-shadow 0.15s; -webkit-tap-highlight-color:transparent; }
.hw-hj-fab-btn:active { transform:scale(0.92); }
.ai-chat-win { position:fixed; bottom:calc(env(safe-area-inset-bottom,0px)+7rem); right:1rem; width:calc(100vw-2rem); max-width:22rem; max-height:70vh; background:var(--bg-card,#FFF); border-radius:var(--radius-xl,20px); box-shadow:var(--shadow-xl,0 8px 32px rgba(0,0,0,0.18)); z-index:var(--z-modal,600); display:none; flex-direction:column; overflow:hidden; }
.ai-chat-win.show { display:flex; animation:hwChatIn 0.2s ease; }
@keyframes hwChatIn { from{opacity:0;transform:translateY(1rem) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
.ai-c-head { display:flex; align-items:center; gap:0.625rem; padding:0.875rem 1rem; background:linear-gradient(135deg,var(--v85-primary,#0EA5E9),var(--blue-600,#1D4ED8)); color:#fff; }
.ai-c-avatar { width:2.25rem; height:2.25rem; border-radius:var(--radius-full,50%); background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:700; flex-shrink:0; }
.ai-c-title h3 { font-size:0.9375rem; font-weight:700; margin:0; color:#fff; }
.ai-c-title p { font-size:0.6875rem; color:rgba(255,255,255,0.8); margin:0; }
.ai-c-close { margin-left:auto; width:1.75rem; height:1.75rem; border-radius:var(--radius-full,50%); background:rgba(255,255,255,0.15); color:#fff; border:none; font-size:1.125rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
.ai-c-close:hover { background:rgba(255,255,255,0.25); }
.ai-c-msgs { flex:1; overflow-y:auto; padding:0.75rem; display:flex; flex-direction:column; gap:0.625rem; max-height:22rem; }
.ai-c-msg { display:flex; gap:0.5rem; align-items:flex-start; }
.ai-c-msg.user { flex-direction:row-reverse; }
.ai-c-av { width:1.75rem; height:1.75rem; border-radius:var(--radius-full,50%); background:var(--v85-primary,#0EA5E9); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; flex-shrink:0; }
.ai-c-msg.user .ai-c-av { background:var(--gray-400,#9CA3AF); }
.ai-c-bubble { max-width:80%; padding:0.625rem 0.875rem; border-radius:var(--radius-lg,12px); font-size:0.875rem; line-height:1.5; word-break:break-word; }
.ai-c-msg:not(.user) .ai-c-bubble { background:var(--bg-soft,#F3F4F6); color:var(--v85-text-primary,#111827); border-bottom-left-radius:0.25rem; }
.ai-c-msg.user .ai-c-bubble { background:var(--v85-primary,#0EA5E9); color:#fff; border-bottom-right-radius:0.25rem; }
.ai-c-quick { display:flex; gap:0.375rem; padding:0.5rem 0.75rem; border-top:1px solid var(--border-line,#E5E7EB); flex-wrap:wrap; }
.ai-c-q { font-size:0.75rem; padding:0.25rem 0.625rem; border-radius:var(--radius-pill,9999px); background:var(--v85-primary-50,#F0F9FF); color:var(--v85-primary-dark,#0E7490); border:1px solid var(--v85-primary,#0EA5E9); cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.ai-c-q:hover { background:var(--v85-primary,#0EA5E9); color:#fff; }
.ai-c-input { display:flex; align-items:center; gap:0.5rem; padding:0.625rem 0.75rem; border-top:1px solid var(--border-line,#E5E7EB); }
.ai-c-input input { flex:1; border:1px solid var(--border-line,#E5E7EB); border-radius:var(--radius-pill,9999px); padding:0.5rem 0.875rem; font-size:0.875rem; background:var(--bg-page,#F9FAFB); color:var(--v85-text-primary,#111827); outline:none; transition:border-color 0.15s; }
.ai-c-input input:focus { border-color:var(--v85-primary,#0EA5E9); }
.ai-c-send { width:2.25rem; height:2.25rem; border-radius:var(--radius-full,50%); background:var(--v85-primary,#0EA5E9); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.125rem; transition:opacity 0.15s; }
.ai-c-send:hover { opacity:0.85; }
.hw-video-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:var(--z-overlay,700); display:none; flex-direction:column; align-items:center; justify-content:center; }
.hw-video-overlay.show { display:flex; }
.hw-video-container { position:relative; width:100%; max-width:100vw; aspect-ratio:16/9; background:#000; }
.hw-video-container video { width:100%; height:100%; object-fit:contain; }
.hw-video-controls { position:absolute; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:0.75rem; background:linear-gradient(transparent,rgba(0,0,0,0.6)); }
.hw-video-controls button { width:2.25rem; height:2.25rem; border-radius:var(--radius-full,50%); background:rgba(255,255,255,0.15); color:#fff; border:none; cursor:pointer; font-size:1.25rem; display:flex; align-items:center; justify-content:center; }
.hw-video-title-bar { position:absolute; top:0; left:0; right:0; padding:0.75rem 1rem; background:linear-gradient(rgba(0,0,0,0.6),transparent); color:#fff; font-size:0.9375rem; font-weight:600; }
.hw-toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.75); color:#fff; padding:0.625rem 1.25rem; border-radius:var(--radius-md,12px); font-size:0.875rem; z-index:var(--z-toast,800); opacity:0; pointer-events:none; transition:opacity 0.2s; }
.hw-toast.show { opacity:1; }
.hw-hicon { display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:var(--radius-full,50%); color:var(--v85-text-secondary,#64748B); font-size:1.25rem; text-decoration:none; transition:background 0.15s,color 0.15s; }
.hw-hicon:hover { background:var(--v85-primary-50,#F0F9FF); color:var(--v85-primary,#0EA5E9); }
.hw-msg-link { position:relative; }
.hw-msg-dot { position:absolute; top:0.1875rem; right:0.1875rem; min-width:0.75rem; height:0.75rem; padding:0 0.25rem; border-radius:var(--radius-full,50%); background:var(--color-danger,#DC2626); color:#fff; font-size:0.625rem; display:flex; align-items:center; justify-content:center; line-height:1; }
@media (max-width:374px) { .hw-kk-grid { grid-template-columns:repeat(4,1fr); } .hw-loop-cards { flex-direction:column; } .hw-loop-arrow { display:none; } .ai-chat-win { right:0.5rem; left:0.5rem; width:auto; bottom:calc(env(safe-area-inset-bottom,0px)+6rem); } }

/* FIX-CHECK:2026-09-24 金刚区图标配色扩展（red/orange/teal） */
.hw-kk-icon-red { background:linear-gradient(135deg,#B71C1C,#F44336); color:#fff; }
.hw-kk-icon-orange { background:linear-gradient(135deg,#E65100,#FB8C00); color:#fff; }
.hw-kk-icon-teal { background:linear-gradient(135deg,#00695C,#26A69A); color:#fff; }

/* FIX-CHECK:2026-09-24 号外页邻里广场入口样式 */
/* ===== 邻里广场入口（四大板块） ===== */
.hw-plaza { margin:12px 16px 0; background:#fff; border-radius:14px; padding:12px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.hw-plaza-head { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:#1F2937; margin-bottom:10px; }
.hw-plaza-head i { color:var(--v85-primary,#0EA5E9); font-size:15px; }
.hw-plaza-head a { margin-left:auto; font-size:12px; color:var(--v85-primary,#0EA5E9); text-decoration:none; font-weight:500; display:flex; align-items:center; gap:2px; }
.hw-plaza-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.hw-plaza-item { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px; border-radius:12px; text-decoration:none; }
.hw-plaza-item i { font-size:20px; }
.hw-plaza-item b { font-size:13px; color:#1F2937; }
.hw-plaza-item small { font-size:10px; color:#9CA3AF; }
.hp-1 { background:linear-gradient(135deg,#E8F5E9,#C8E6C9); } .hp-1 i{color:#2E7D32;}
.hp-2 { background:linear-gradient(135deg,#E3F2FD,#BBDEFB); } .hp-2 i{color:#1565C0;}
.hp-3 { background:linear-gradient(135deg,#FFF8E1,#FFECB3); } .hp-3 i{color:#F57C00;}
.hp-4 { background:linear-gradient(135deg,#FCE4EC,#F8BBD0); } .hp-4 i{color:#C2185B;}

/* FIX-CHECK:2026-09-24 号外页顶部功能导航 */
/* ===== 顶部功能导航（广场/发布/活动/课堂） ===== */
.hw-fnav { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:10px 16px 0; }
.hw-fnav-item { display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 4px; border-radius:12px; text-decoration:none; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.05); -webkit-tap-highlight-color:transparent; }
.hw-fnav-item i { font-size:18px; color:var(--v85-primary,#0EA5E9); }
.hw-fnav-item b { font-size:13px; color:#1F2937; }
.hw-fnav-item small { font-size:10px; color:#9CA3AF; }
.hw-fnav-item:active { transform:scale(.96); }

/* FIX-CHECK:2026-09-24 号外页搜索 */
/* ===== 号外搜索条 ===== */
/* [P0-C] 号外搜索栏改橙色 CTA（FIX-CHECK:2026-09-28，与 haowai.html 内联样式保持一致） */
.hw-search-bar { display:flex; align-items:center; gap:8px; margin:10px 16px 0; padding:9px 14px; border-radius:18px; background:#F1F5F9; border:1px solid var(--v85-cta,#F97316); }
.hw-search-bar i { font-size:15px; color:var(--v85-cta,#F97316); flex-shrink:0; }
.hw-search-bar input { flex:1; border:none; outline:none; background:transparent; font-size:13px; color:#1F2937; min-width:0; }
.hw-search-bar input::placeholder { color:#94A3B8; }
.hw-search-clear { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border:none; border-radius:50%; background:#CBD5E1; color:#fff; font-size:12px; cursor:pointer; flex-shrink:0; }
.hw-search-result { display:flex; align-items:center; gap:6px; margin:8px 16px 0; padding:8px 12px; border-radius:10px; background:var(--v85-primary-50,#E0F7FA); color:#0F766E; font-size:12px; }
.hw-search-result b { color:var(--v85-primary-dark,#0D47A1); }
.hw-search-result a { margin-left:auto; color:var(--v85-primary,#0EA5E9); text-decoration:none; display:inline-flex; align-items:center; font-weight:600; }