/* ========================================
   双鸭山乐邻信息网 H5 - 全局设计系统
   100% 对齐小程序 app.wxss 变量体系
   ======================================== */
:root {
  /* 主题色（清新青绿） */
  --primary: #1DB9A6;
  --primary-dark: #17A08D;
  --primary-darker: #149A85;
  --primary-light: #EBF8F6;
  --primary-border: #A8DDD2;
  --primary-bg: #F0FAF8;

  /* 辅助色 */
  --success: #5BAE7A;
  --warning: #F39C12;
  --danger: #E04A46;
  --info: #8A9BAF;

  /* 文字色阶 */
  --text-primary: #2D3A3A;
  --text-secondary: #5A6B6B;
  --text-muted: #98A8A8;
  --text-disabled: #C8D4D4;
  --text-white: #FFFFFF;

  /* 背景色阶 */
  --bg-page: #F0FAF8;
  --bg-card: #FFFFFF;
  --bg-grey: #F5F7F8;
  --bg-overlay: rgba(45,58,58,0.5);

  /* 分割线/边框 */
  --divider: #EEEEEE;
  --border: #E5E5E5;

  /* 阴影（对齐小程序） */
  --shadow-sm: 0 1px 4px rgba(29,185,166,0.08);
  --shadow-md: 0 2px 8px rgba(29,185,166,0.12);
  --shadow-lg: 0 4px 16px rgba(29,185,166,0.16);

  /* 圆角规范 */
  --radius-primary: 8px;
  --radius-card: 12px;
  --radius-input: 8px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* 间距系统（rpx/2 = px） */
  --sp-page: 16px;
  --sp-module: 24px;
  --sp-list: 12px;
  --sp-card-y: 12px;
  --sp-card-x: 16px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 20px;

  /* 字体 */
  --font: -apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue','Microsoft YaHei',sans-serif;
  --font-size-sm: 12px;
  --font-size: 14px;
  --font-size-lg: 16px;

  /* 安全区 */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --mp-guide-height: 52px;
}

/* 重置 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{font-family:var(--font);background:var(--bg-page);color:var(--text-primary);
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  max-width:750px;margin:0 auto;padding-bottom:0}
body.in-webview{padding-bottom:var(--safe-bottom)}
body.in-webview .mp-guide{display:none}
body.in-webview .page{padding-bottom:20px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
input,button,textarea{font-family:inherit;font-size:inherit;border:none;outline:none;background:none}
button{cursor:pointer}
ul,ol{list-style:none}

/* 页面容器 */
.page{min-height:100vh;display:none;padding-bottom:70px}
.page.active{display:block}

/* 通用卡片 */
.card{background:var(--bg-card);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);overflow:hidden}

/* 骨架屏 */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:6px}
.skeleton-card{display:flex;gap:12px;padding:14px;background:var(--bg-card);border-radius:var(--radius-card);margin-bottom:10px}
.skeleton-thumb{width:80px;height:80px;border-radius:8px;flex-shrink:0}
.skeleton-body{flex:1;display:flex;flex-direction:column;gap:8px}
.skeleton-title{height:18px;width:70%}
.skeleton-text{height:14px;width:50%}
.skeleton-text-sm{height:12px;width:35%}

/* 加载动画 */
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.loading-spinner{width:36px;height:36px;border:3px solid var(--primary-light);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}

/* 全局加载遮罩 */
.global-loading{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;z-index:9999}

/* 全局Toast */
.global-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.75);color:#fff;padding:10px 24px;border-radius:8px;font-size:14px;z-index:10000;max-width:80%;text-align:center;transition:opacity .3s}

/* ====== 底部Tab导航栏（胶囊毛玻璃风格，1:1还原小程序 custom-tab-bar）====== */
.bottom-tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 999; display: flex; justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 4px);
}
.bottom-tab-bar.hidden { display: none; }

/* 胶囊主体 — 毛玻璃效果 */
.btab-inner {
  display: flex; flex-direction: row; align-items: center; justify-content: space-around;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 25px;
  box-shadow: 0 4px 16px rgba(29, 185, 166, 0.15), 0 1px 4px rgba(0, 0, 0, 0.06);
  height: 53px; width: calc(100% - 24px); max-width: 726px;
  margin: 0 12px 10px; pointer-events: auto;
  border: 0.5px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}

/* 每个Tab项 */
.btab-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; height: 100%; padding: 7px 0 5px;
  cursor: pointer; transition: all 0.15s ease; position: relative;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btab-item:active { opacity: 0.55; transform: scale(0.96); }

/* 图标 */
.btab-icon { font-size: 21px; line-height: 1; margin-bottom: 2px; }

/* 文字 */
.btab-text { font-size: 10px; line-height: 1.3; color: #98A8A8; font-weight: 400; transition: all 0.15s ease; }
.btab-item.active .btab-text { color: #1DB9A6; font-weight: 600; }

/*
========== 底部小程序引导栏样式（暂时隐藏） ==========
H5已有底部Tab导航栏，引导条多余，暂时注释掉
恢复方法：删掉这段注释（/* 和 */）就行
================================================
.mp-guide{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:750px;height:var(--mp-guide-height);background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:var(--text-white);display:flex;align-items:center;justify-content:space-between;padding:0 16px calc(var(--safe-bottom) + 4px);z-index:100;box-shadow:0 -2px 12px rgba(29,185,166,.15)}
.mp-guide-text{font-size:13px;opacity:.9}
.mp-guide-btn{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.5);padding:5px 14px;border-radius:20px;font-size:13px;font-weight:500;white-space:nowrap}
========== 引导栏样式结束 ==========
*/

/* 空状态 */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}
.empty-state-icon{font-size:48px;margin-bottom:16px;opacity:.6}
.empty-state-text{font-size:15px;color:var(--text-muted);margin-bottom:20px}
.empty-state-btn{background:var(--primary);color:var(--text-white);padding:10px 28px;border-radius:24px;font-size:14px;font-weight:500}

/* 网络异常 */
.error-state{display:flex;flex-direction:column;align-items:center;padding:60px 20px;text-align:center}
.error-state-icon{font-size:48px;margin-bottom:16px}
.error-state-text{font-size:15px;color:var(--text-secondary);margin-bottom:20px}
.error-state-btn{background:var(--primary);color:var(--text-white);padding:10px 28px;border-radius:24px;font-size:14px;font-weight:500}

/* 标签 */
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500;white-space:nowrap}
.tag-top{background:#FFF3E0;color:#F39C12}
.tag-super{background:#FDE8E8;color:#E04A46}

/* 回到顶部 */
.back-top{position:fixed;right:16px;bottom:85px;width:40px;height:40px;background:var(--bg-card);border-radius:50%;box-shadow:0 2px 12px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;z-index:90;cursor:pointer;transition:opacity .3s,transform .3s}
.back-top:active{transform:scale(.9)}

/* 回到顶部按钮（小程序风格） */
.back-to-top{position:fixed;right:12px;bottom:95px;z-index:50;display:none;transition:opacity .3s}
.back-to-top.show{display:block}
.back-top-btn{width:36px;height:36px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,.1)}
.back-top-arrow{font-size:18px;color:var(--primary);font-weight:700;line-height:1}

/* ICP备案 */
.icp-footer{text-align:center;padding:20px 16px 10px;font-size:11px;color:var(--text-muted)}
.icp-footer a{color:var(--text-muted)}

/* 底部操作栏 */
.home-action-bar{display:flex;justify-content:center;gap:20px;padding:12px 0 24px}
.home-action-bar .abtn{font-size:14px;color:var(--primary);font-weight:600;cursor:pointer;padding:8px 20px;border-radius:20px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06)}

/* 置顶高亮动画 */
@keyframes super-shimmer{0%{left:-100%}100%{left:200%}}

/* 隐藏滚动条 */
.no-scrollbar::-webkit-scrollbar{display:none;width:0;height:0}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}