/* 寺庙 H5 SPA - 全局样式 */

:root{
  --bg:#f7f5f0;
  --surface:#fff;
  --primary:#a03e1f;      /* 寺庙红木色 */
  --primary-dark:#7a2c14;
  --accent:#d4a857;        /* 金色 */
  --text:#1f2937;
  --text2:#6b7280;
  --text3:#9ca3af;
  --border:#e5e7eb;
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --radius:12px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Microsoft YaHei,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
body{position:fixed;width:100%;top:0;left:0;overscroll-behavior:none}

#app{height:100%;display:flex;flex-direction:column;max-width:480px;margin:0 auto;background:var(--bg);position:relative}

/* 顶部导航 */
.topbar{height:48px;flex-shrink:0;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:15px;font-weight:500}
.topbar .back{cursor:pointer;font-size:20px;width:24px}
.topbar .title{flex:1;text-align:center}

/* 主内容区 */
.main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:60px}
.main.no-tabbar{padding-bottom:0}

/* 底栏 */
.tabbar{height:60px;flex-shrink:0;background:var(--surface);border-top:1px solid var(--border);display:flex;position:absolute;bottom:0;left:0;right:0;z-index:100}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text3);font-size:11px;cursor:pointer}
.tabbar .tab .icon{font-size:22px}
.tabbar .tab.active{color:var(--primary)}

/* Banner 轮播 */
.banner{height:180px;position:relative;overflow:hidden;background:#000}
.banner .slide{position:absolute;inset:0;opacity:0;transition:opacity .5s;background-size:cover;background-position:center}
.banner .slide.active{opacity:1}
.banner .dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.banner .dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5)}
.banner .dots span.active{background:#fff}
.banner .label{position:absolute;bottom:24px;left:12px;color:#fff;font-size:14px;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* 卡片 */
.card{background:var(--surface);border-radius:var(--radius);padding:14px;margin:10px 12px;box-shadow:var(--shadow)}
.card h3{font-size:15px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.card h3 .icon{color:var(--primary)}
.card .meta{color:var(--text2);font-size:12px;margin-top:4px}
.card .desc{font-size:13px;color:var(--text2);line-height:1.6}

/* 列表 */
.list{background:var(--surface);border-radius:var(--radius);margin:10px 12px;overflow:hidden;box-shadow:var(--shadow)}
.list .item{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;cursor:pointer}
.list .item:last-child{border-bottom:0}
.list .item:active{background:#f3f4f6}
.list .item .ico{font-size:22px;color:var(--primary);width:24px;text-align:center}
.list .item .txt{flex:1}
.list .item .txt .t{font-size:14px}
.list .item .txt .s{font-size:12px;color:var(--text2);margin-top:2px}
.list .item .arr{color:var(--text3)}

/* 按钮 */
.btn{display:block;width:100%;padding:12px;background:var(--primary);color:#fff;text-align:center;border-radius:8px;border:none;font-size:15px;font-weight:500;cursor:pointer}
.btn:active{background:var(--primary-dark)}
.btn.ghost{background:transparent;color:var(--primary);border:1px solid var(--primary)}
.btn.small{padding:6px 12px;font-size:13px;width:auto}
.btn.danger{background:#dc2626}

/* 徽章 */
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}
.badge.gold{background:var(--accent);color:#fff}
.badge.gray{background:#e5e7eb;color:#374151}
.badge.green{background:#d1fae5;color:#065f46}

/* 输入框 */
.input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;font-size:14px;background:#fff}
.input:focus{outline:none;border-color:var(--primary)}

/* 头部介绍 */
.hero{padding:56px 20px 64px;text-align:center;background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.45)),url(/uploads/temple/hero.jpg) center/cover no-repeat;color:#fff;position:relative;min-height:200px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hero .logo{font-size:48px;margin-bottom:12px}
.hero .name{font-size:26px;font-weight:700;margin-bottom:6px;letter-spacing:1px}
.hero .subtitle{font-size:14px;opacity:.95;letter-spacing:.5px}

/* 章节标题 */
.section{margin:16px 12px 8px;font-size:13px;color:var(--text2);display:flex;align-items:center;justify-content:space-between}
.section .more{color:var(--text3);font-size:12px}

/* 加载/空 */
.empty{padding:60px 20px;text-align:center;color:var(--text3)}
.empty .icon{font-size:48px;margin-bottom:12px;opacity:.5}
.loading{padding:40px;text-align:center;color:var(--text3);font-size:14px}

/* 弹层 */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;z-index:200}
.modal .sheet{background:var(--surface);width:100%;max-width:480px;border-radius:16px 16px 0 0;padding:16px;max-height:80vh;overflow-y:auto}
.modal .sheet h3{font-size:16px;font-weight:600;margin-bottom:12px;text-align:center}

/* 头像 */
.avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}

/* 牌位详情 */
.casket-banner{height:160px;background:linear-gradient(135deg,#7a2c14,#a03e1f);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.casket-banner .name{font-size:24px;font-weight:600;letter-spacing:2px;margin-bottom:8px}
.casket-banner .yong{font-size:13px;opacity:.85}
.casket-info{padding:16px;background:var(--surface);margin:10px 12px;border-radius:var(--radius);box-shadow:var(--shadow)}
.casket-info .row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--border);font-size:13px}
.casket-info .row:last-child{border-bottom:0}
.casket-info .k{color:var(--text2)}
.casket-info .v{color:var(--text);font-weight:500}

/* 表格 */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th,.table td{padding:8px;text-align:left;border-bottom:1px solid var(--border)}
.table th{background:#f9fafb;color:var(--text2);font-weight:500}

/* Toast */
.toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;padding:8px 16px;border-radius:6px;font-size:13px;z-index:999;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.show{opacity:1}

/* login */
.login-wrap{padding:60px 24px}
.login-wrap .logo{font-size:48px;text-align:center;color:var(--primary);margin-bottom:24px}
.login-wrap .field{margin-bottom:16px}
.login-wrap .field label{display:block;font-size:13px;color:var(--text2);margin-bottom:6px}
.login-wrap .hint{font-size:12px;color:var(--text3);text-align:center;margin-top:16px}
/* AI Chat */
.ai-chat{padding:12px 12px 100px;overflow-y:auto;background:#faf6f0;min-height:calc(100vh - 130px)}
.ai-msg{display:flex;gap:8px;margin-bottom:14px;align-items:flex-start}
.ai-msg .avatar{width:32px;height:32px;border-radius:50%;background:#a03e1f;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;margin-top:4px}
.ai-msg.ai-user{flex-direction:row-reverse}
.ai-msg.ai-user .avatar{background:var(--accent)}
.ai-msg .bubble{max-width:75%;padding:10px 14px;border-radius:14px;background:#fff;font-size:14px;line-height:1.55;color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.06);word-break:break-word;white-space:pre-wrap}
.ai-msg.ai-user .bubble{background:var(--accent);color:#fff}
.ai-msg.ai-bot .bubble{border-top-left-radius:4px}
.ai-msg.ai-user .bubble{border-top-right-radius:4px}
.ai-msg.typing .bubble{opacity:.7;font-style:italic}
.ai-suggested{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;margin:0 6px 8px 0;background:#fff;border:1px solid var(--border);border-radius:16px;font-size:13px;color:var(--text2);cursor:pointer}
.ai-suggested:hover{border-color:var(--primary);color:var(--primary)}
.ai-suggested .material-icons{font-size:14px}
.ai-input-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);padding:8px 12px;display:flex;align-items:flex-end;gap:8px;z-index:100;max-width:480px;margin:0 auto}
.ai-input-bar textarea{flex:1;border:1px solid var(--border);border-radius:18px;padding:8px 12px;font-size:14px;font-family:inherit;resize:none;min-height:36px;max-height:96px;line-height:1.4}
.ai-input-bar textarea:focus{outline:none;border-color:var(--primary)}
.ai-input-bar textarea:disabled{background:#f5f5f5;color:#999}
.ai-input-bar button{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;border:0;font-size:20px;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ai-input-bar button:disabled{background:#ccc;cursor:not-allowed}
.ai-input-bar button:hover:not(:disabled){background:var(--primary-dark)}

/* 登录弹窗 */
.login-modal{position:relative;background:#fff;border-radius:16px;width:100%;max-width:380px;margin:auto;padding:0 24px 24px}
.login-modal .close{position:absolute;top:12px;right:12px;color:#999;cursor:pointer}
.login-modal .logo{font-size:48px;text-align:center;color:var(--primary)}
.login-modal .field{margin-bottom:16px}
.login-modal .field label{display:block;font-size:13px;color:var(--text2);margin-bottom:6px}
.login-modal .hint{font-size:12px;color:var(--text3);text-align:center;margin-top:12px}
#login-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}