/**
 * iPhone 14 Pro Frame - 可复用的iPhone手机框样式
 * 来源：Devices.css (https://github.com/picturepan2/devices.css)
 * 颜色：暗紫色 (默认)
 * 
 * 使用方式：
 *   1. 引入此CSS：<link rel="stylesheet" href="iphone-frame.css">
 *   2. HTML结构：
 *      <div class="device device-iphone-14-pro">
 *        <div class="device-frame">
 *          <div class="device-screen">
 *            <!-- 你的内容放这里 -->
 *          </div>
 *        </div>
 *        <div class="device-stripe"></div>
 *        <div class="device-header"></div>
 *        <div class="device-sensors"></div>
 *        <div class="device-btns"></div>
 *        <div class="device-power"></div>
 *        <div class="device-home"></div>
 *      </div>
 */

/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设备基础样式 */
.device,
.device *,
.device *::after,
.device *::before,
.device::after,
.device::before {
  box-sizing: border-box;
  display: block;
}

.device {
  position: relative;
  transform: scale(1);
  z-index: 1;
}

.device .device-frame {
  z-index: 1;
  position: relative;  /* 为弹窗提供定位上下文 */
}

.device .device-screen {
  background-color: var(--phone-bg-color, #fff);
  background-position: center center;
  background-size: cover;
  object-fit: cover;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* iPhone 14 Pro - 暗紫色 */
.device-iphone-14-pro {
  height: 868px;
  width: 428px;
}

.device-iphone-14-pro .device-frame {
  background: #010101;
  border: 1px solid #1b1721;
  border-radius: 68px;
  box-shadow: 
    inset 0 0 4px 2px #c0b7cd,
    inset 0 0 0 6px #342c3f,
    0 25px 80px rgba(0, 0, 0, 0.4);
  height: 868px;
  padding: 19px;
  width: 428px;
}

.device-iphone-14-pro .device-screen {
  border-radius: 49px;
  height: 830px;
  width: 390px;
}

/* 侧边条纹 */
.device-iphone-14-pro .device-stripe::after,
.device-iphone-14-pro .device-stripe::before {
  border: solid rgba(1, 1, 1, .25);
  border-width: 0 7px;
  content: "";
  height: 7px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 9;
}

.device-iphone-14-pro .device-stripe::after {
  top: 85px;
}

.device-iphone-14-pro .device-stripe::before {
  bottom: 85px;
}

/* 刘海 - 灵动岛，最高层级 */
.device-iphone-14-pro .device-header {
  background: #010101;
  border-radius: 20px;
  height: 35px;
  left: 50%;
  margin-left: -60px;
  position: absolute;
  top: 29px;
  width: 120px;
  z-index: 1000;
}

/* 传感器 */
.device-iphone-14-pro .device-sensors::after,
.device-iphone-14-pro .device-sensors::before {
  content: "";
  position: absolute;
}

.device-iphone-14-pro .device-sensors::after {
  background: #010101;
  border-radius: 17px;
  height: 33px;
  left: 50%;
  margin-left: -60px;
  top: 30px;
  width: 74px;
}

.device-iphone-14-pro .device-sensors::before {
  background: radial-gradient(farthest-corner at 20% 20%, #6074bf 0, transparent 40%),
              radial-gradient(farthest-corner at 80% 80%, #513785 0, #24555e 20%, transparent 50%);
  border-radius: 50%;
  box-shadow: 0 0 1px 1px rgba(255, 255, 255, .05);
  height: 9px;
  left: 50%;
  margin-left: 36px;
  top: 42px;
  width: 9px;
}

/* 左侧按键 */
.device-iphone-14-pro .device-btns {
  background: #1b1721;
  border-radius: 2px;
  height: 32px;
  left: -2px;
  position: absolute;
  top: 115px;
  width: 3px;
}

.device-iphone-14-pro .device-btns::after,
.device-iphone-14-pro .device-btns::before {
  background: #1b1721;
  border-radius: 2px;
  content: "";
  height: 62px;
  left: 0;
  position: absolute;
  width: 3px;
}

.device-iphone-14-pro .device-btns::after {
  top: 60px;
}

.device-iphone-14-pro .device-btns::before {
  top: 140px;
}

/* 右侧电源键 */
.device-iphone-14-pro .device-power {
  background: #1b1721;
  border-radius: 2px;
  height: 100px;
  right: -2px;
  position: absolute;
  top: 200px;
  width: 3px;
}

/* 底部指示器 */
.device-iphone-14-pro .device-home::after,
.device-iphone-14-pro .device-home::before {
  border: solid rgba(1, 1, 1, .25);
  border-width: 6px 0;
  content: "";
  height: 6px;
  position: absolute;
  width: 6px;
  z-index: 9;
}

.device-iphone-14-pro .device-home::after {
  right: 86px;
  top: 0;
}

.device-iphone-14-pro .device-home::before {
  bottom: 0;
  left: 86px;
}

/* 缩小版本 (可选) - 添加 class="device-iphone-14-pro scaled" */
.device-iphone-14-pro.scaled {
  transform: scale(0.85);
  transform-origin: center center;
}

/* 适配容器 */
.phone-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  /* 缩放由 ResponsiveAdapter 动态控制，保持内部布局完全不变 */
  transform-origin: center center;
  /* 过渡动画，让缩放变化更平滑 */
  transition: transform 0.3s ease;
}

/* ====================
   iPhone 状态栏样式 - 固定区域
   ==================== */

/* 状态栏容器 - 固定在顶部，内容在灵动岛两侧 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px 0;
  height: 54px; /* 44px + 底部间距10px，与灵动岛下方间距对齐 */
  flex-shrink: 0; /* 不收缩 */
  background: transparent; /* 透明背景，让灵动岛显示 */
  position: relative;
  z-index: 100; /* 低于灵动岛但高于内容 */
}

/* 时间 - 恢复原始样式 */
.status-bar .time {
  font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--status-text-color, #000);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

/* 图标容器 */
.status-bar .icons {
  display: flex;
  align-items: center;
}

/* 状态栏图标 */
.status-bar .status-icon {
  color: var(--status-text-color, #000);
  display: block;
}

/* ====================
   底部导航样式 - 固定区域
   ==================== */

.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 12px 0 30px;
  background: var(--nav-bg-color, #fff);
  border-top: 1px solid var(--nav-border-color, #f0f0f0);
  flex-shrink: 0; /* 不收缩 */
}

.bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 1;
  min-height: var(--touch-target, 60px);
  padding: 8px 0 4px;
  color: var(--nav-text-color, #999);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav .nav-item.active {
  color: var(--nav-text-active-color, #4caf50);
}

.bottom-nav .nav-icon {
  width: 26px;
  height: 26px;
}

.bottom-nav .nav-text {
  font-size: 11px;
}

/* ====================
   可滚动内容区 - 在状态栏和底部导航之间滚动
   ==================== */

/* 
   页面使用指南：
   1. 基础结构：<div class="main-content"> - 仅提供flex布局和背景色
   2. 需要滚动：添加 scroll-container 类
   3. 隐藏滚动条：添加 scroll-hide-scrollbar 类
   4. 拖拽滚动：添加 scroll-draggable 类（配合JS）
   5. 完整组合：class="main-content scroll-container scroll-hide-scrollbar scroll-draggable"
*/

.main-content {
  flex: 1;
  /* 内容区背景色 */
  background: var(--content-bg-color, #fff);
}

/* ----- 滚动工具类（按需使用） ----- */

/* 基础滚动容器 - 启用y轴滚动，禁用x轴滚动 */
.scroll-container {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 隐藏滚动条 - Chrome/Safari/Firefox/IE */
.scroll-hide-scrollbar {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE 10+ */
}

.scroll-hide-scrollbar::-webkit-scrollbar {
  display: none;                /* Chrome/Safari */
}

/* 拖拽滚动支持 - 改变光标样式 */
.scroll-draggable {
  cursor: grab;
}

.scroll-draggable:active {
  cursor: grabbing;
}

/* ====================
   全局颜色变量 - 可在每个页面的 HTML 中覆盖
   ====================
   
   使用方式：
   1. 在 HTML 的 <style> 标签中重新定义 :root 变量
   2. 只覆盖需要修改的变量，其他保持默认值
   
   示例：
   <style>
     :root {
       --content-bg-color: #f5f5f5;  /* 内容区改为灰色 */
       --card-bg-color: #fff;         /* 卡片保持白色 */
     }
   </style>
*/

/* ====================
   适老化设计变量系统（默认启用）
   基于工信部《移动互联网应用适老化通用设计规范》
   ==================== */

:root {
  /* ===== 屏幕整体背景 ===== */
  --phone-bg-color: #f5f5f5;
  
  /* ===== 内容区背景 ===== */
  --content-bg-color: #f5f5f5;
  
  /* ===== 底部导航背景 ===== */
  --nav-bg-color: #fff;
  --nav-border-color: #f0f0f0;
  --nav-text-color: #999;
  --nav-text-active-color: #4caf50;
  
  /* ===== 状态栏文字颜色 ===== */
  --status-text-color: #000;
  
  /* ===== 适老化字体系统（默认启用适老模式） ===== */
  /* 
    标准版 vs 适老版字体对照：
    - 标准版正文：14pt+ | 适老版正文：18pt+（正文≥20pt）
    - 适老版最大字体：≥30pt
    - 字体放大倍率：标准版×1.4倍
  */
  --font-xs: 16px;        /* 小标签：标准12px × 1.4 */
  --font-sm: 18px;        /* 辅助文字：标准14px × 1.4 */
  --font-base: 20px;      /* 正文：标准16px × 1.4（≥20pt要求） */
  --font-lg: 22px;        /* 大文字：标准18px × 1.4 */
  --font-xl: 24px;        /* 标题：标准20px × 1.4 */
  --font-2xl: 28px;       /* 大标题：标准24px × 1.4 */
  --font-3xl: 36px;       /* 最大字体：标准30px × 1.2（首页主要功能） */
  --font-4xl: 44px;       /* 超大字体 */
  
  /* ===== 适老化间距系统 ===== */
  --space-xs: 6px;        /* 紧凑间距 */
  --space-sm: 12px;       /* 小间距 */
  --space-md: 18px;       /* 中间距 */
  --space-lg: 24px;       /* 大间距 */
  --space-xl: 30px;       /* 超大间距 */
  
  /* ===== 点击区域（适老化≥60×60pt） ===== */
  --touch-target: 60px;   /* 首页/主要功能按钮 */
  --touch-target-sm: 44px; /* 其他页面按钮 */
  
  /* ===== 行间距（适老化≥1.3倍） ===== */
  --line-height: 1.5;     /* 适老版1.5倍行高 */
  --line-height-tight: 1.3;
  
  /* ===== 颜色对比度（WCAG 2.0标准） ===== */
  /* 适老版要求对比度≥4.5:1（大字≥3:1） */
  --color-primary: #0d9488;       /* 主色调：高对比度青绿 */
  --color-text: #000000;          /* 主文字：纯黑 */
  --color-text-secondary: #333333; /* 次要文字：深灰 */
  --color-text-muted: #555555;    /* 辅助文字：中灰 */
  --color-bg: #f5f5f5;            /* 背景灰 */
  --color-border: #e0e0e0;        /* 边框色 */
  
  /* ===== 状态色（高对比度） ===== */
  --color-success: #16a34a;       /* 成功/已服 */
  --color-warning: #d97706;       /* 警告/跳过 */
  --color-danger: #dc2626;        /* 危险/漏服 */
  --color-info: #2563eb;          /* 信息 */
}



/* ====================
   适老化通用组件样式
   使用CSS变量，自动适配适老标准
   ==================== */

/* ----- 按钮组件 ----- */
.btn-primary {
  background: var(--color-primary);
  color: white;
  border-radius: 28px;
  min-height: var(--touch-target);
  font-size: var(--font-lg);
  font-weight: 600;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: #f0f0f0;
  color: var(--color-text);
  border-radius: 28px;
  min-height: var(--touch-target);
  font-size: var(--font-lg);
  font-weight: 600;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

/* ----- 卡片组件 ----- */
.card {
  background: white;
  border-radius: 20px;
  padding: var(--space-lg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.card-title {
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

/* ----- 标签组件 ----- */
.tag {
  font-size: var(--font-sm);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
}

.tag-success { color: var(--color-success); background: #dcfce7; }
.tag-warning { color: var(--color-warning); background: #fef3c7; }
.tag-danger { color: var(--color-danger); background: #fee2e2; }
.tag-primary { color: var(--color-primary); background: #e0f2f1; }

/* ----- 表单组件 ----- */
.input-field {
  width: 100%;
  min-height: var(--touch-target);
  padding: 0 var(--space-md);
  font-size: var(--font-base);
  border: 2px solid var(--color-border);
  border-radius: 12px;
  background: white;
  color: var(--color-text);
}

.input-field:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* ----- 列表项组件 ----- */
.list-item {
  display: flex;
  align-items: center;
  padding: var(--space-md) 0;
  border-bottom: 1px solid #f0f0f0;
  min-height: var(--touch-target);
}

.list-item:last-child {
  border-bottom: none;
}

/* ----- 图标+文字标签 ----- */
.icon-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.icon-label svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* ----- 底部导航适老化增强 ----- */
.bottom-nav .nav-item {
  min-height: var(--touch-target);
  padding: var(--space-xs) var(--space-sm);
}

.bottom-nav .nav-text {
  font-size: var(--font-sm);
  font-weight: 600;
}

/* ----- Toast提示 ----- */
.toast {
  position: absolute;
  top: 86px;
  left: 50%;
  transform: translate(-50%, -18px);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
  pointer-events: none;
  width: calc(100% - 36px);
  max-width: 320px;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.toast-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 14px 16px;
  border-radius: 20px;
  color: #1f2340;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(124, 102, 255, 0.10);
  box-shadow: 0 18px 42px rgba(74, 56, 154, 0.15);
  backdrop-filter: blur(18px);
}

.toast-badge {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #7c66ff, #a18dff);
}

.toast-text {
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.toast[data-tone="success"] .toast-badge {
  background: linear-gradient(135deg, #16a34a, #34d399);
}

.toast[data-tone="warning"] .toast-badge {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.toast[data-tone="danger"] .toast-badge {
  background: linear-gradient(135deg, #ef4444, #fb7185);
}

/* ====================
   返回按钮组件 (BackButton)
   独立模块，按需加载，不影响其他内容
   
   使用方式：
   1. JS动态创建：BackButton.create(options)
   2. 手动添加：给元素加 class="back-button"，SVG会自动插入
   
   定位方式（可选，按需使用）：
   - 默认：inline-flex，跟随文档流
   - .back-button-absolute：绝对定位，需配合left/top等使用
   - .back-button-fixed：固定定位
   - 或通过JS的customStyle传入任意定位
   ==================== */

/* 返回按钮基础样式 - 仅对有.back-button类的元素生效 */
/* 不强制任何定位，由调用方决定 */
.back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-sm, 44px);
  height: var(--touch-target-sm, 44px);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  border: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.back-button:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}

.back-button:active {
  transform: scale(0.95);
}

/* 返回按钮SVG图标 - 统一使用04-4样式（stroke-width="2.5"） */
.back-button .back-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.back-button .back-icon path {
  stroke: var(--back-button-color, #333);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* 可选定位辅助类 - 按需使用，不强制 */

/* 绝对定位 - 需配合具体left/right/top/bottom使用 */
.back-button-absolute {
  position: absolute;
}

/* 固定定位 */
.back-button-fixed {
  position: fixed;
}

/* 导航栏左侧常用位置 */
.back-button-nav-left {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.back-button-nav-left:hover {
  transform: translateY(-50%) scale(1.05);
}

.back-button-nav-left:active {
  transform: translateY(-50%) scale(0.95);
}

/* 变体：主色调 */
.back-button.primary .back-icon path {
  stroke: var(--color-primary, #0d9488);
}

/* 变体：浅色（用于深色背景） */
.back-button.light .back-icon path {
  stroke: #fff;
}

.back-button.light:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* 变体：圆形背景 */
.back-button.circle-bg {
  background: var(--back-button-bg, #f0f0f0);
}

.back-button.circle-bg:hover {
  background: var(--back-button-bg-hover, #e0e0e0);
}

.back-button.circle-bg.primary {
  --back-button-bg: var(--color-primary, #0d9488);
  --back-button-bg-hover: #0b7c71;
}

.back-button.circle-bg.primary .back-icon path {
  stroke: #fff;
}

/* 变体：大尺寸（适老化） */
.back-button.large {
  width: var(--touch-target, 60px);
  height: var(--touch-target, 60px);
}

.back-button.large .back-icon {
  width: 28px;
  height: 28px;
}

.back-button.large .back-icon path {
  stroke-width: 3.5;
}

/* 导航栏专用返回按钮容器 */
.back-button-nav {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin-left: -12px;
}

/* 返回按钮 + 文字组合 */
.back-button-with-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  margin-left: -12px;
  font-size: var(--font-base, 17px);
  color: var(--back-button-color, #333);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.back-button-with-text:hover {
  opacity: 0.7;
}

.back-button-with-text .back-icon {
  width: 20px;
  height: 20px;
}

.back-button-with-text .back-icon path {
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .back-button:not(.light):not(.primary) .back-icon path {
    stroke: #fff;
  }
  
  .back-button:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .back-button.circle-bg:not(.primary) {
    --back-button-bg: rgba(255, 255, 255, 0.1);
    --back-button-bg-hover: rgba(255, 255, 255, 0.15);
  }
}

/* ====================
   统一弹窗系统 (Modal)
   基于参考文件 02_1_med_detail.html 沉淀
   
   使用方式：
   1. HTML 在 .device-screen 下添加容器：
      <div class="modal-overlay" id="global-modal"></div>
   
   2. JS 调用：Modal.confirm({ title, message, onConfirm })
   
   特点：
   - 固定在 iPhone 屏幕内（利用 .device 的 transform 包含块）
   - 适老化设计：大字体、大按钮、高对比度
   - 支持 6 种类型：confirm / alert / input / select / actionSheet / toast
   ==================== */

/* ----- 弹窗容器 ----- */
.modal-overlay {
  position: absolute;  /* 相对于 .device-frame 定位 */
  inset: 0;  /* 填满整个 .device-frame */
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 20px;
  /* 防止点击穿透 */
  pointer-events: none;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ----- 弹窗内容区 ----- */
.modal-content {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 320px;
  text-align: center;
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-overlay.active .modal-content {
  transform: scale(1);
}

/* ----- 弹窗消息区 ----- */
.modal-message {
  padding: 24px 20px;
}

.modal-title {
  font-size: var(--font-xl);        /* 24px 适老化 */
  font-weight: 700;
  color: var(--color-text);         /* #000 高对比度 */
  margin-bottom: 12px;
  line-height: var(--line-height);
}

.modal-text {
  font-size: var(--font-base);      /* 20px 适老化 */
  color: var(--color-text-secondary); /* #333 */
  line-height: var(--line-height);
  word-break: break-word;
}

/* ----- 警告图标区（可选） ----- */
.modal-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.modal-warning-icon {
  width: 56px;                      /* 适老化放大 */
  height: 56px;
  background: #ffebee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

/* ----- 输入框（input 类型用） ----- */
.modal-input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font-size: var(--font-base);      /* 20px */
  border: 2px solid var(--color-border);
  border-radius: 12px;
  background: white;
  color: var(--color-text);
  margin-top: 16px;
  text-align: left;
  outline: none;
  transition: border-color 0.2s;
}

.modal-input:focus {
  border-color: var(--color-primary);
}

.modal-input::placeholder {
  color: #aaa;
  font-size: var(--font-base);
}

/* ----- 弹窗图标（项目配色） ----- */
.modal-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
}

/* 成功图标 - 绿色 */
.modal-icon-wrap.success {
  background: #e8f5e9;
  color: #4caf50;
}

/* 警告图标 - 橙色 */
.modal-icon-wrap.warning {
  background: #fff8e1;
  color: #ff9800;
}

/* 错误/危险图标 - 红色 */
.modal-icon-wrap.danger {
  background: #ffebee;
  color: #f44336;
}

/* 信息图标 - 蓝色 */
.modal-icon-wrap.info {
  background: #e3f2fd;
  color: #2196f3;
}

/* ----- 选项列表（select 类型用） ----- */
.modal-options {
  margin-top: 8px;
  text-align: left;
}

.modal-option {
  display: flex;
  align-items: center;
  padding: 16px;
  min-height: 56px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: var(--font-lg);
  color: var(--color-text);
  border: 2px solid transparent;
  background: #f8f9fa;
  margin-bottom: 8px;
}

.modal-option:hover {
  background: #e8f5e9;
  border-color: #c8e6c9;
}

.modal-option.selected {
  background: #e8f5e9;
  border-color: #4caf50;
}

.modal-option-radio {
  width: 22px;
  height: 22px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.modal-option.selected .modal-option-radio {
  border-color: #4caf50;
  background: #4caf50;
}

.modal-option.selected .modal-option-radio::after {
  content: '';
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
}

/* ----- 按钮区 ----- */
.modal-buttons {
  display: flex;
  gap: 12px;
  padding: 0 20px 20px;
}

.modal-btn {
  flex: 1;
  min-height: 50px;
  border: none;
  border-radius: 12px;
  font-size: var(--font-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.modal-btn:active {
  transform: scale(0.96);
}

/* 取消按钮 */
.modal-btn-cancel {
  background: #f5f5f5;
  color: #666;
}

.modal-btn-cancel:hover {
  background: #eeeeee;
}

/* 确认按钮 - 项目主绿色 */
.modal-btn-confirm {
  background: linear-gradient(135deg, #4caf50 0%, #43a047 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.modal-btn-confirm:hover {
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}

/* 危险操作按钮 - 红色 */
.modal-btn-danger {
  background: linear-gradient(135deg, #f44336 0%, #e53935 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

.modal-btn-danger:hover {
  box-shadow: 0 6px 16px rgba(244, 67, 54, 0.4);
}

/* 禁用状态 */
.modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ----- Action Sheet（底部弹出） ----- */
.modal-overlay[data-type="actionSheet"] {
  align-items: flex-end;
  padding: 0;
  background: rgba(0, 0, 0, 0.4);
}

.modal-overlay[data-type="actionSheet"] .modal-content {
  max-width: 100%;
  width: 100%;
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: 0 8px 0;
}

.modal-overlay[data-type="actionSheet"].active .modal-content {
  transform: translateY(0);
}

.modal-actionsheet-options {
  padding: 8px 0;
}

.modal-actionsheet-option {
  padding: 18px 20px;
  font-size: var(--font-lg);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid #f0f0f0;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-actionsheet-option:last-child {
  border-bottom: none;
}

.modal-actionsheet-option:hover {
  background: #f5f5f5;
}

.modal-actionsheet-option.destructive {
  color: var(--color-danger);
}

.modal-actionsheet-cancel {
  margin-top: 8px;
  padding: 18px 20px;
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--color-text);
  background: white;
  cursor: pointer;
  transition: background 0.2s;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #f0f0f0;
}

.modal-actionsheet-cancel:hover {
  background: #f5f5f5;
}

/* ----- 单按钮居中（alert 用） ----- */
.modal-buttons.single {
  justify-content: center;
}

.modal-buttons.single .modal-btn {
  max-width: 200px;
}

/* ----- 防止 body 滚动（JS 会自动添加） ----- */
body.modal-open {
  overflow: hidden;
}

/* ====================
   弹窗使用示例（供复制参考）
   ====================
   
   <!-- 在 .device-screen 内添加（与 .main-content 同级） -->
   <div class="modal-overlay" id="global-modal"></div>
   
   <!-- JS 调用 -->
   <script src="modal.js"></script>
   <script>
     // 确认弹窗
     Modal.confirm({
       title: '确认删除',
       message: '确定要删除吗？',
       confirmText: '删除',
       confirmColor: 'danger',
       onConfirm: () => console.log('确认')
     });
     
     // 输入弹窗
     Modal.input({
       title: '修改昵称',
       placeholder: '请输入',
       onConfirm: (value) => console.log(value)
     });
     
     // Action Sheet
     Modal.actionSheet({
       options: ['拍照', '从相册选择'],
       onSelect: (index) => console.log(index)
     });
   </script>
   ==================== */