:root {
  /* 现代医疗科技主题配色 - 蓝色系 */
  --primary: #2563EB;
  --primary-light: #EFF6FF;
  --primary-dark: #1D4ED8;
  --primary-gradient: linear-gradient(135deg, #1E3A8A 0%, #2563EB 50%, #3B82F6 100%);
  --secondary-gradient: linear-gradient(135deg, #0D9488 0%, #14B8A6 100%);
  
  --success: #10B981;
  --success-light: #D1FAE5;
  --warning: #F59E0B;
  --warning-light: #FEF3C7;
  --danger: #EF4444;
  --danger-light: #FEE2E2;
  
  --bg: #F4F7FB;
  --card: #FFFFFF;
  --text: #1E293B;
  --text-secondary: #64748B;
  --text-light: #94A3B8;
  --text-disabled: #CBD5E1;
  --border: #E2E8F0;

  /* ===== 统一排版系统 ===== */
  /* 字号层级（适老化：正文及以下加大） */
  --fs-h1: 22px;       /* 页面大标题、Hero区标题 */
  --fs-h2: 16px;       /* 模块/卡片标题 */
  --fs-body: 15px;     /* 正文、列表项、按钮 */
  --fs-caption: 14px;  /* 辅助说明、时间戳、label */
  --fs-tiny: 13px;     /* 极小提示、图例、底部导航 */
  --fs-data: 24px;     /* 统计大数字 */

  /* 字重 */
  --fw-black: 900;     /* 仅H1大标题 */
  --fw-xbold: 800;     /* H2模块标题、统计数字 */
  --fw-bold: 700;      /* 按钮、强调数据、badge */
  --fw-semi: 600;      /* 正文强调、label */
  --fw-medium: 500;    /* 普通正文 */

  /* 间距系统（4px倍数） */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-2xl: 24px;
  --sp-3xl: 32px;
  --sp-4xl: 40px;

  /* 深色背景文字 */
  --text-on-dark: #FFFFFF;
  --text-on-dark-secondary: rgba(255,255,255,0.75);
  --text-on-dark-light: rgba(255,255,255,0.5);

  /* 超大圆角规范 */
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius: 20px;
  --radius-sm: 14px;
  
  /* 柔和弥散阴影 */
  --shadow-sm: 0 2px 8px rgba(37, 99, 235, 0.04);
  --shadow: 0 8px 24px rgba(37, 99, 235, 0.06);
  --shadow-md: 0 12px 36px rgba(37, 99, 235, 0.08);
  --shadow-lg: 0 20px 48px rgba(37, 99, 235, 0.12);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Helvetica Neue',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;font-size:var(--fs-body)}
a{text-decoration:none;color:inherit}
button{border:none;cursor:pointer;font-family:inherit;background:transparent}
input,textarea,select{font-family:inherit;outline:none;border:none}
#app{max-width:430px;margin:0 auto;min-height:100vh;position:relative;background:var(--bg);overflow-x:hidden}

.page{min-height:100vh;padding-bottom:100px}
.container{padding:0 var(--sp-xl)}

/* ===== 排版公共 class ===== */
.text-h1{font-size:var(--fs-h1);font-weight:var(--fw-black);color:var(--text);letter-spacing:-0.5px;line-height:1.3}
.text-h2{font-size:var(--fs-h2);font-weight:var(--fw-xbold);color:var(--text);line-height:1.4}
.text-body{font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--text);line-height:1.6}
.text-body-bold{font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--text);line-height:1.6}
.text-caption{font-size:var(--fs-caption);font-weight:var(--fw-semi);color:var(--text-secondary);line-height:1.5}
.text-tiny{font-size:var(--fs-tiny);font-weight:var(--fw-semi);color:var(--text-light);line-height:1.5}
.text-data{font-size:var(--fs-data);font-weight:var(--fw-black);line-height:1}
.text-on-dark{color:var(--text-on-dark)}
.text-on-dark-secondary{color:var(--text-on-dark-secondary)}
.text-on-dark-light{color:var(--text-on-dark-light)}

/* 现代感卡片 */
.card{background:var(--card);border-radius:var(--radius-lg);padding:var(--sp-2xl);box-shadow:var(--shadow);margin-bottom:var(--sp-lg);transition:all .3s cubic-bezier(0.4,0,0.2,1)}
.section-title{font-size:var(--fs-h2);font-weight:var(--fw-xbold);margin-bottom:var(--sp-lg);color:var(--text);letter-spacing:-0.4px;display:flex;align-items:center;justify-content:space-between}
.section-title span{font-size:var(--fs-caption);font-weight:var(--fw-semi);color:var(--primary);cursor:pointer}

/* Hero 区域统一 */
.hero-section{position:relative;border-radius:0 0 40px 40px;padding:var(--sp-3xl) var(--sp-xl) 64px;overflow:hidden}
.hero-overlap{margin-top:-40px;position:relative;z-index:5}

/* 圆润全包裹按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 var(--sp-3xl);border-radius:27px;font-size:var(--fs-body);font-weight:var(--fw-bold);transition:all .3s cubic-bezier(0.4,0,0.2,1);letter-spacing:0.3px}
.btn:active{transform:scale(0.95)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 24px rgba(37,99,235,0.25)}
.btn-primary:hover{background:var(--primary-dark);box-shadow:0 12px 32px rgba(37,99,235,0.35);transform:translateY(-2px)}
.btn-block{display:flex;width:100%}
.btn-outline{background:#fff;border:2px solid var(--border);color:var(--text);box-shadow:var(--shadow-sm)}
.btn-sm{height:40px;padding:0 var(--sp-xl);font-size:var(--fs-caption);border-radius:20px}
.btn-success{background:var(--success);color:#fff;box-shadow:0 8px 24px rgba(16,185,129,0.25)}
.btn-warning{background:var(--warning);color:#fff}
.btn[disabled]{opacity:0.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* 大号柔和输入框 */
.input-field{width:100%;height:54px;border:none;border-radius:var(--radius-sm);padding:0 var(--sp-xl);font-size:var(--fs-body);background:#F8FAFC;color:var(--text);transition:all .3s;box-shadow:inset 0 2px 4px rgba(0,0,0,0.02)}
.input-field:focus{background:#fff;box-shadow:0 0 0 4px var(--primary-light), 0 4px 12px rgba(37,99,235,0.08)}
.textarea{height:auto;padding:var(--sp-lg) var(--sp-xl);resize:none}

/* 标签组 */
.tag-btn{padding:10px 20px;border-radius:20px;font-size:var(--fs-body);font-weight:var(--fw-semi);background:var(--card);color:var(--text-secondary);transition:all .3s;box-shadow:var(--shadow-sm);border:1px solid transparent;min-height:42px;display:inline-flex;align-items:center;justify-content:center}
.tag-btn.active{background:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,0.25);transform:translateY(-1px)}

/* 规则1：选项按钮/标签组统一布局 */
.tag-group{display:flex;flex-wrap:wrap;gap:var(--sp-sm);align-items:stretch}
.tag-group .tag-btn{min-width:72px;text-align:center}
.tag-group .tag-btn-medication{min-width:136px;max-width:calc(50% - var(--sp-sm));padding:12px 14px;border-radius:16px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;white-space:normal;gap:4px;line-height:1.35}
.tag-group .tag-btn-medication:not(.active){color:#000}
.tag-btn-medication-title{font-size:var(--fs-body);font-weight:var(--fw-bold);color:inherit}
.tag-group .tag-btn-medication:not(.active) .tag-btn-medication-hint{color:#000}
.tag-btn-medication-hint{font-size:var(--fs-tiny);font-weight:var(--fw-medium);color:var(--text-light)}
.tag-btn-medication.active .tag-btn-medication-hint{color:rgba(255,255,255,0.88)}
.tag-group-equal{display:flex;gap:var(--sp-sm);align-items:stretch}
.tag-group-equal .tag-btn{flex:1;min-width:0;text-align:center;padding:10px 8px;white-space:nowrap}

/* 规则2：icon/emoji + 文字对齐 */
.icon-text{display:flex;align-items:center;gap:var(--sp-sm)}

/* 规则3：带圆点/色块的选项列表 */
.dot-list{display:flex;align-items:center;gap:var(--sp-xs)}
.dot-list .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* 规则4：卡片内部间距统一 */
.card-section{margin-bottom:var(--sp-xl)}
.card-section:last-child{margin-bottom:0}

/* 规则5：左右并排垂直居中 */
.row-between{display:flex;align-items:center;justify-content:space-between}
.row-center{display:flex;align-items:center}

/* 悬浮质感底部导航 */
.tab-bar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:calc(100% - 40px);max-width:390px;height:72px;background:rgba(255,255,255,0.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:space-around;box-shadow:0 12px 36px rgba(37,99,235,0.12);z-index:100;border-radius:36px;padding:0 10px;border:1px solid rgba(255,255,255,0.5)}
.tab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-xs);color:var(--text-light);transition:all .3s cubic-bezier(0.4,0,0.2,1);width:52px;height:56px;border-radius:20px;position:relative}
.tab-item.active{color:var(--primary)}
.tab-item.active .tab-icon{transform:translateY(-2px) scale(1.1)}
.tab-icon{font-size:24px;line-height:1;transition:all .3s;display:flex;align-items:center;justify-content:center;width:22px;height:22px;}
.tab-label{font-size:var(--fs-tiny);font-weight:var(--fw-bold);letter-spacing:0.3px;opacity:0;position:absolute;bottom:6px;transform:translateY(10px);transition:all .3s}
.tab-item.active .tab-label{opacity:1;transform:translateY(0)}
.tab-item.active .tab-icon{transform:translateY(-8px) scale(1.05)}

/* 弹窗设计 */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.4);z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--sp-2xl);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal-card{background:#fff;border-radius:var(--radius-xl);padding:var(--sp-4xl) 28px;max-width:340px;width:100%;text-align:center;animation:popIn .4s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 24px 60px rgba(0,0,0,0.2)}
@keyframes popIn{0%{transform:scale(0.85) translateY(30px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}

/* 游戏头部 */
.game-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-lg) var(--sp-xl);background:rgba(255,255,255,0.9);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(0,0,0,0.03)}
.back-btn{font-size:var(--fs-body);color:var(--text);font-weight:var(--fw-bold);display:flex;align-items:center;gap:6px;width:60px;height:40px;border-radius:20px;background:var(--bg);justify-content:center;transition:all .2s}
.back-btn:active{background:var(--border)}

/* 穿插式顶部背景通用类 */
.hero-bg{position:absolute;top:0;left:0;width:100%;height:320px;background:var(--primary-gradient);border-radius:0 0 40px 40px;z-index:1}
.hero-content{position:relative;z-index:2}

@keyframes fadeIn{from{opacity:0;transform:translate(-50%,-50%) scale(0.88)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes modalFadeIn{from{opacity:0;transform:scale(0.88)}to{opacity:1;transform:scale(1)}}

.cursor-pointer{cursor:pointer;}
.avatar-hover{display:flex!important;}
div:hover > .avatar-hover{opacity:1!important;}

/* AI 问答页面样式 */
.ai-dot{width:7px;height:7px;border-radius:50%;background:#A78BFA;display:inline-block;animation:aiPulse 1.2s infinite ease-in-out;}
@keyframes aiPulse{0%,80%,100%{transform:scale(0.6);opacity:0.5}40%{transform:scale(1);opacity:1}}
.ai-quick-scroll{-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.ai-quick-scroll::-webkit-scrollbar{display:none;}
.consult-message-list{width:100%;max-width:100%;min-width:0;overflow-y:auto;overflow-x:hidden;}
.consult-message-item{width:100%;max-width:100%;min-width:0;overflow:hidden;}
.consult-message-wrap{max-width:80%;min-width:0;overflow:hidden;}
.consult-message-bubble{display:block;min-width:0;max-width:100%;overflow:hidden;overflow-wrap:anywhere;word-break:break-all;}
.consult-message-text{display:block;min-width:0;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all;}

/* 游戏动画 */
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.shake{animation:shake .4s ease}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(124,58,237,0.4)}70%{box-shadow:0 0 0 12px rgba(124,58,237,0)}100%{box-shadow:0 0 0 0 rgba(124,58,237,0)}}
.pulse-ring{animation:pulseRing 1.5s infinite}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.slide-up{animation:slideUp .3s ease-out}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fade-in-up{animation:fadeInUp .4s ease-out both}
.scroll-strip{display:flex;gap:8px;overflow-x:auto;padding:12px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scroll-strip::-webkit-scrollbar{display:none}
.expand-content{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease}
.expand-content.open{max-height:800px}
.progress-ring-circle{transition:stroke-dashoffset .5s ease;transform:rotate(-90deg);transform-origin:50% 50%}