/* ===== 营业记账 — 统一设计令牌系统 ===== */

:root {
  /* === 品牌色 === */
  --color-primary: #2d6cdf;
  --color-primary-light: #e8f0fe;
  --color-primary-gradient: linear-gradient(135deg, #2d6cdf, #4f8df5);
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  /* === 中性色 === */
  --color-bg: #f5f6fa;
  --color-surface: #ffffff;
  --color-text: #1a1a2e;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;
  --color-border: #e5e7eb;
  --color-divider: #f3f4f6;

  /* === Element Plus 主题变量（替代 !important） === */
  --el-color-primary: #2d6cdf;
  --el-color-primary-light-3: #4f8df5;
  --el-color-primary-light-5: #88b4f7;
  --el-color-primary-light-9: #e8f0fe;
  --el-border-radius-base: 8px;
  --el-border-radius-round: 20px;
  --el-font-size-base: 14px;

  /* === 字号（Major Third 1.25） === */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 32px;

  /* === 字重 === */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* === 阴影（3级） === */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.10);

  /* === 间距（4px 基准） === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;

  /* === 圆角 === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* === 兼容旧令牌 === */
  --mobile-bg: var(--color-bg);
  --mobile-card-bg: var(--color-surface);
  --mobile-primary: var(--color-primary);
  --mobile-primary-light: var(--color-primary-light);
  --mobile-text: var(--color-text);
  --mobile-text-secondary: var(--color-text-secondary);
  --mobile-border: var(--color-border);
  --mobile-divider: var(--color-divider);
  --mobile-radius: var(--radius-md);
  --mobile-radius-sm: var(--radius-sm);
  --mobile-shadow: var(--shadow-sm);
  --mobile-shadow-md: var(--shadow-md);
}

/* === 可访问性 === */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* === 全局基础 === */
html, body {
  overscroll-behavior-y: none;
}

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: var(--color-bg);
}

/* === 弹出层滚动优化 === */
.el-drawer__body,
.el-dialog__body {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.el-drawer__wrapper,
.el-dialog__wrapper,
.el-overlay {
  touch-action: none;
}

.el-popup-parent--hidden {
  overflow: hidden !important;
  position: fixed !important;
  width: 100%;
}

/* === Element Plus 覆盖 === */
.el-card {
  border-radius: var(--radius-md) !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
}
.el-card__body { padding: var(--space-lg) !important; }
.el-card__header {
  padding: 14px var(--space-lg) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--font-semibold) !important;
  border-bottom: 1px solid var(--color-divider) !important;
}

.el-button {
  border-radius: var(--radius-sm) !important;
  font-weight: var(--font-medium) !important;
}
.el-button--primary:not(.is-text):not(.is-link) {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}
.el-button--primary:not(.is-text):not(.is-link) .el-icon {
  color: #fff !important;
}
.el-button--large {
  height: 48px !important;
  font-size: var(--text-base) !important;
}

.el-input__wrapper {
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 0 0 1px var(--color-border) inset !important;
}
.el-input__wrapper:hover { box-shadow: 0 0 0 1px #c0c4cc inset !important; }
.el-input__wrapper.is-focus { box-shadow: 0 0 0 1px var(--color-primary) inset !important; }

.el-select .el-input__wrapper { border-radius: var(--radius-sm) !important; }

.el-tag {
  border-radius: var(--space-xs) !important;
  font-size: var(--text-sm) !important;
  padding: 2px var(--space-sm) !important;
}

.el-tabs__nav-wrap::after { background-color: var(--color-border) !important; }
.el-tabs__item {
  font-size: var(--text-sm) !important;
  font-weight: var(--font-medium) !important;
  color: var(--color-text-secondary) !important;
}
.el-tabs__item.is-active { color: var(--color-primary) !important; }
.el-tabs__active-bar { background-color: var(--color-primary) !important; }

.el-dialog { border-radius: var(--radius-lg) !important; }

.el-form-item__label {
  color: var(--color-text-secondary) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-medium) !important;
}

.el-pagination .btn-prev, .el-pagination .btn-next { border-radius: var(--radius-sm) !important; }
.el-pager li { border-radius: var(--radius-sm) !important; }
.el-pager li.is-active { background-color: var(--color-primary) !important; }

.table-scroll-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* === 触摸优化 === */
@media (hover: none) {
  .touch-active:active { opacity: 0.7; background: #f0f0f0; }
}

/* === 弹性表单 === */
.flex-wrap-form { display: flex; flex-wrap: wrap; gap: 10px; }
.flex-wrap-form .el-form-item { margin-bottom: 0; }

/* === 通用页面 === */
.page-container { padding: var(--space-lg); min-height: 100%; }
.page-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}

/* === 加载骨架（光泽扫过动画） === */
.loading-state { padding: var(--space-lg); }
.loading-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.loading-line {
  height: 12px;
  border-radius: var(--space-xs);
  margin-bottom: var(--space-sm);
  background: linear-gradient(90deg, var(--color-divider) 25%, #e5e7eb 50%, var(--color-divider) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
.loading-line:last-child { margin-bottom: 0; }
.loading-line.w20 { width: 20%; } .loading-line.w30 { width: 30%; }
.loading-line.w40 { width: 40%; } .loading-line.w50 { width: 50%; }
.loading-line.w60 { width: 60%; } .loading-line.w80 { width: 80%; }
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === 空状态 === */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px var(--space-2xl); text-align: center; color: var(--color-text-muted);
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: var(--space-md); opacity: 0.6; }
.empty-state .empty-title {
  font-size: var(--text-base); font-weight: var(--font-semibold);
  color: var(--color-text-secondary); margin-bottom: var(--space-xs);
}
.empty-state .empty-desc {
  font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-lg);
}

/* === 错误状态 === */
.error-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px var(--space-2xl); text-align: center; color: var(--color-text-muted);
}
.error-state .error-icon { font-size: 48px; margin-bottom: var(--space-md); color: var(--color-warning); }
.error-state .error-title {
  font-size: var(--text-base); font-weight: var(--font-semibold);
  color: var(--color-text-secondary); margin-bottom: var(--space-xs);
}
.error-state .error-desc {
  font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-lg);
}

/* === 通用卡片 === */
.mobile-card {
  background: var(--color-surface); border-radius: var(--radius-lg);
  padding: var(--space-lg); margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
}

/* === Chip 标签组 === */
.chip-group { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 6px var(--space-md); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--font-medium);
  color: var(--color-text-secondary); background: var(--color-surface);
  cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.chip.active {
  border-color: var(--color-primary); background: var(--color-primary-light);
  color: var(--color-primary);
}

/* === 搜索图标按钮 === */
.search-icon-btn {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity 0.15s; flex-shrink: 0;
}
.search-icon-btn:active { opacity: 0.7; }
.search-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* === 页面动画 === */
.fade-page-enter-active { transition: opacity 0.2s ease, transform 0.2s ease; }
.fade-page-leave-active { transition: opacity 0.15s ease, transform 0.15s ease; }
.fade-page-enter-from { opacity: 0; transform: translateY(6px); }
.fade-page-leave-to { opacity: 0; transform: translateY(-6px); }

/* === 运营商品牌色 === */
.carrier-yd { color: #00A650; } .carrier-lt { color: #E60012; }
.carrier-dx { color: #005DAA; } .carrier-gd { color: #D7000F; }

/* === 移动端响应式 === */
@media (max-width: 767px) {
  .el-dialog { width: 100% !important; max-width: 100% !important; border-radius: 16px 16px 0 0 !important; }
  .el-dialog__body { padding: var(--space-lg) !important; max-height: 50vh; overflow-y: auto; }
  .el-form-item__label { float: none !important; display: block !important; text-align: left !important; width: 100% !important; padding-bottom: var(--space-xs) !important; }
  .el-form-item__content { margin-left: 0 !important; width: 100% !important; }
  .el-table { font-size: var(--text-sm); }
  .el-table .el-table__cell { padding: 10px var(--space-sm); }
  .el-pagination { justify-content: center !important; flex-wrap: wrap; font-size: var(--text-sm); }
  .el-card__body { padding: 14px !important; }
  .el-card__header { padding: 14px var(--space-lg) !important; font-size: var(--text-base) !important; }
  .el-input, .el-select, .el-date-picker, .el-input-number { width: 100% !important; }
  .el-steps { flex-wrap: wrap; justify-content: center; }
  .el-step__title { font-size: var(--text-sm); }
  .el-table .el-button--small { padding: 6px 10px; font-size: var(--text-sm); }
  .hide-on-mobile { display: none !important; }
}
/* 深色模式全局覆盖
 * 仅覆盖项目中硬编码的浅色背景/文字，Element Plus 组件由 html.dark 自动切换。
 */

html.dark body,
html.dark #app {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* 页面级容器 */
html.dark .profile-page,
html.dark .login-page,
html.dark .business-page,
html.dark .reports-page,
html.dark .dashboard-page,
html.dark .customers-page,
html.dark .inventory-page,
html.dark .contracts-page,
html.dark .operators-page,
html.dark .sales-page,
html.dark .cash-page,
html.dark .privacy-page,
html.dark .agreement-page {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* 卡片 / 列表 */
html.dark .profile-header,
html.dark .menu-list,
html.dark .login-card,
html.dark .theme-btn,
html.dark .carrier-toggle-item,
html.dark .stat-card,
html.dark .chart-card,
html.dark .data-item,
html.dark .filter-bar,
html.dark .sheet-content .el-form,
html.dark .el-drawer__body,
html.dark .el-dialog__body,
html.dark .el-message-box {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* 输入框、选择器背景 */
html.dark .el-input__wrapper,
html.dark .el-textarea__inner,
html.dark .el-input-number .el-input__wrapper,
html.dark .el-select .el-input__wrapper {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
}

/* 文字颜色硬编码覆盖 */
html.dark .profile-name,
html.dark .menu-label,
html.dark .section-label,
html.dark .card-title,
html.dark .page-header h2,
html.dark .page-header .header-sub,
html.dark .stat-label,
html.dark .stat-value,
html.dark .stat-num,
html.dark .di-date,
html.dark .di-profit,
html.dark .theme-label,
html.dark .data-section-title,
html.dark .cs-title,
html.dark .cti-name,
html.dark .perm-group-title span,
html.dark .perm-child-label,
html.dark .user-tabs .el-tabs__item {
  color: var(--text-primary) !important;
}

html.dark .menu-value,
html.dark .profile-role,
html.dark .version-text,
html.dark .di-sub,
html.dark .di-phone,
html.dark .avatar-tip,
html.dark .sheet-desc,
html.dark .cs-desc,
html.dark .cti-full,
html.dark .perm-child-desc,
html.dark .data-label {
  color: var(--text-secondary) !important;
}

/* 边框 */
html.dark .menu-item,
html.dark .theme-btn,
html.dark .carrier-toggle-item,
html.dark .data-item,
html.dark .card-links,
html.dark .reg-tip,
html.dark .perm-group,
html.dark .perm-group-children,
html.dark .perm-child {
  border-color: var(--border-color) !important;
}

/* 按钮式标签默认态 */
html.dark .theme-btn {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
}

html.dark .theme-btn.active {
  background: var(--accent-primary) !important;
  color: #fff !important;
  border-color: var(--accent-primary) !important;
}

/* 标签页 */
html.dark .tab-bar,
html.dark .tab-btn {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

html.dark .tab-btn.active {
  background: var(--accent-primary) !important;
  color: #fff !important;
}

/* 骨架屏 */
html.dark .sk-line,
html.dark .skeleton-card .sk-line {
  background: var(--border-color) !important;
}

/* 空状态 */
html.dark .empty-state {
  color: var(--text-muted) !important;
}

/* 保持原有品牌色按钮不变，仅确保文字可读 */
html.dark .logout-btn {
  background: var(--bg-card) !important;
  border-color: var(--color-danger) !important;
  color: var(--color-danger) !important;
}

/* ===== Settings.vue 深色补充 ===== */
html.dark .profile-page,
html.dark .profile-header,
html.dark .menu-list,
html.dark .theme-switch-row,
html.dark .version-section,
html.dark .logout-section,
html.dark .sheet-content,
html.dark .perm-group,
html.dark .perm-group-children,
html.dark .perm-group-bar,
html.dark .perm-child,
html.dark .carrier-toggle-item,
html.dark .danger-zone,
html.dark .delete-account-warning {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

html.dark .profile-name,
html.dark .drawer-head h3,
html.dark .cpi-name,
html.dark .data-section-title,
html.dark .cs-title,
html.dark .perm-group-title,
html.dark .perm-child-label,
html.dark .cti-name,
html.dark .theme-label,
html.dark .menu-label,
html.dark .biometric-setting-left,
html.dark .delete-account-warning strong,
html.dark .danger-zone-title {
  color: var(--text-primary) !important;
}

html.dark .profile-role,
html.dark .profile-arrow,
html.dark .section-label,
html.dark .menu-value,
html.dark .version-text,
html.dark .cpi-full,
html.dark .sheet-desc,
html.dark .cs-desc,
html.dark .data-label,
html.dark .perm-group-badge,
html.dark .perm-child-desc,
html.dark .cti-full,
html.dark .biometric-status,
html.dark .danger-zone-desc,
html.dark .delete-account-warning,
html.dark .delete-account-warning li,
html.dark .avatar-tip {
  color: var(--text-secondary) !important;
}

html.dark .menu-item,
html.dark .theme-btn,
html.dark .perm-group,
html.dark .perm-group-children,
html.dark .perm-child,
html.dark .carrier-toggle-item,
html.dark .danger-zone {
  border-color: var(--border-color) !important;
}

html.dark .theme-btn {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
}

html.dark .theme-btn.active {
  background: var(--accent-primary) !important;
  color: #fff !important;
  border-color: var(--accent-primary) !important;
}

html.dark .update-badge {
  background: var(--bg-badge) !important;
  color: var(--text-badge) !important;
}

html.dark .carrier-toggle-item.enabled {
  background: color-mix(in srgb, var(--cc) 12%, var(--bg-card)) !important;
  border-color: color-mix(in srgb, var(--cc) 50%, var(--bg-card)) !important;
}

html.dark .perm-group-bar {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

html.dark .danger-zone {
  background: rgba(239, 68, 68, 0.08) !important;
}

/* ===== Layout.vue 深色补充 ===== */
html.dark .layout-desktop,
html.dark .layout-mobile,
html.dark .mobile-main,
html.dark .main-content {
  background: var(--bg-secondary) !important;
}

html.dark .sidebar,
html.dark .mobile-header,
html.dark .bottom-tabs,
html.dark .drawer-head {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

html.dark .logo {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html.dark .mobile-title,
html.dark .hamburger-btn,
html.dark .user-avatar-btn {
  color: var(--text-primary) !important;
}

html.dark .header-carrier:hover {
  background: var(--bg-hover) !important;
}

html.dark .shop-badge {
  background: var(--bg-badge) !important;
  color: var(--text-badge) !important;
}

/* ===== PullToRefresh 深色补充 ===== */
html.dark .pull-refresh-text {
  color: var(--text-muted) !important;
}

html.dark .pull-refresh-spinner .el-icon {
  color: var(--accent-primary) !important;
}

/* ===== 方角修复：行内/子块容器不应有独立背景 =====
 * 这些容器在浅色下是透明行或父卡片内子块（只做布局/由父卡片圆角裁剪），
 * 深色下被强加 -bg-card 背景后会渲染成“无圆角的直角色块”。
 * 改为透明，让其融入父级卡片背景，彻底消除直角。
 */
html.dark .filter-bar,
html.dark .theme-switch-row,
html.dark .version-section,
html.dark .sheet-content,
html.dark .logout-section,
html.dark .perm-group-children,
html.dark .perm-child,
html.dark .perm-group-bar,
html.dark .delete-account-warning {
  background: transparent !important;
}

/* 真卡片确保有圆角（防止个别遗漏露出直角）；父卡片 overflow:hidden 可裁剪子块 */
html.dark .menu-list,
html.dark .profile-header,
html.dark .login-card,
html.dark .data-item,
html.dark .stat-card,
html.dark .chart-card,
html.dark .perm-group,
html.dark .danger-zone,
html.dark .carrier-toggle-item,
html.dark .theme-btn,
html.dark .tab-bar {
  border-radius: var(--radius-lg, 14px) !important;
}
html.dark .menu-list,
html.dark .perm-group {
  overflow: hidden !important;
}

/* ===== 汉堡抽屉菜单（el-drawer）深色圆角+主题背景 =====
 * 说明：el-drawer 通过 teleport 挂到 body，scoped 样式管不到，需全局覆盖。
 * 默认 .el-drawer 无圆角，且 EP 深色变量把它渲染成纯黑面板(#1d1e1f)，
 * 与主题的深蓝灰(--bg-card)不协调。统一成主题色 + 按滑出方向补圆角。
 */
html.dark .el-drawer {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}
/* 左侧滑出：右侧两角圆角（汉堡菜单） */
html.dark .el-drawer.ltr {
  border-top-right-radius: var(--radius-lg, 14px) !important;
  border-bottom-right-radius: var(--radius-lg, 14px) !important;
  overflow: hidden !important;
}
/* 底部滑出：顶部两角圆角 */
html.dark .el-drawer.btt {
  border-top-left-radius: var(--radius-lg, 14px) !important;
  border-top-right-radius: var(--radius-lg, 14px) !important;
  overflow: hidden !important;
}
/* 抽屉 body 背景与文字 */
html.dark .el-drawer__body {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  padding: 0 !important;
}

/* 抽屉内菜单：深色背景/文字/高亮统一成主题色 */
html.dark .el-drawer .el-menu,
html.dark .el-menu {
  background-color: transparent !important;
  border-right: none !important;
}
html.dark .el-drawer .el-menu-item {
  color: var(--text-primary) !important;
  background-color: transparent !important;
}
html.dark .el-drawer .el-menu-item:hover {
  background: var(--bg-hover) !important;
}
html.dark .el-drawer .el-menu-item.is-active {
  color: var(--accent-primary) !important;
  background: var(--bg-hover) !important;
}

/* ===== 业务办理步骤条（steps-bar）深色圆角+背景 =====
 * .steps-bar 是卡片顶部的自定义条（浅色基样式背景 #fafbfc、无圆角），
 * 深色下需给主题背景并补顶部两角圆角，避免露出直角块。
 */
html.dark .steps-bar {
  background: var(--bg-secondary) !important;
  border-top-left-radius: var(--radius-lg, 14px) !important;
  border-top-right-radius: var(--radius-lg, 14px) !important;
}
/* 步骤数字圆点/连接线/文字颜色适配深色 */
html.dark .step-num {
  background: var(--bg-hover) !important;
  color: var(--text-secondary) !important;
}
html.dark .step-item.active .step-num {
  background: var(--accent-primary) !important;
  color: #fff !important;
}
html.dark .step-item.done .step-num {
  background: var(--accent-success) !important;
  color: #fff !important;
}
html.dark .step-label {
  color: var(--text-muted) !important;
}
html.dark .step-item.active .step-label,
html.dark .step-item.done .step-label {
  color: var(--text-primary) !important;
}
html.dark .step-line {
  background: var(--border-color) !important;
}
html.dark .step-line.filled {
  background: var(--accent-success) !important;
}
html.dark .steps-bar {
  border-bottom-color: var(--border-color) !important;
}

.permission-guide[data-v-80691678] {
  padding: 0 4px;
}
.intro-text[data-v-80691678] {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: justify;
}
.permission-list[data-v-80691678] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}
.permission-item[data-v-80691678] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: #f7f8fa;
  border-radius: 10px;
}
.permission-icon[data-v-80691678] {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #e8f0fe;
  color: #2d6cdf;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.permission-content[data-v-80691678] {
  flex: 1;
  min-width: 0;
}
.permission-name[data-v-80691678] {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 4px;
}
.permission-desc[data-v-80691678] {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}
.privacy-notice[data-v-80691678] {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background: #fef9e7;
  border-radius: 8px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}
.privacy-notice a[data-v-80691678] {
  color: #2d6cdf;
  text-decoration: none;
}
.dialog-footer[data-v-80691678] {
  display: flex;
  justify-content: center;
}
.agree-btn[data-v-80691678] {
  width: 80%;
  border-radius: 24px;
  height: 44px;
  font-size: 16px;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
.permission-item[data-v-80691678] {
    background: #1e293b;
}
.permission-icon[data-v-80691678] {
    background: #1e3a5f;
    color: #60a5fa;
}
.permission-name[data-v-80691678] {
    color: #f1f5f9;
}
.permission-desc[data-v-80691678] {
    color: #94a3b8;
}
.privacy-notice[data-v-80691678] {
    background: #422006;
    color: #cbd5e1;
}
}

.agreement-content[data-v-8e49113b] {
  padding: 0 4px;
}
.welcome-section[data-v-8e49113b] {
  text-align: center;
  padding: 12px 0 20px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}
.welcome-logo[data-v-8e49113b] {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  margin-bottom: 12px;
}
.welcome-section h2[data-v-8e49113b] {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 4px;
}
.version-text[data-v-8e49113b] {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
}
.agreement-summary p[data-v-8e49113b] {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0 0 16px;
}
.agreement-links[data-v-8e49113b] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.link-item[data-v-8e49113b] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #f7f8fa;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.link-item[data-v-8e49113b]:active {
  background: #eef2f7;
}
.link-item span[data-v-8e49113b] {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: #2d6cdf;
}
.link-item .arrow[data-v-8e49113b] {
  color: #c0c4cc;
}
.key-points[data-v-8e49113b] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #f0f9eb;
  border-radius: 10px;
  margin-bottom: 20px;
}
.point[data-v-8e49113b] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
}
.agree-checkbox[data-v-8e49113b] {
  padding: 12px 0;
  font-size: 14px;
}
.agree-checkbox a[data-v-8e49113b] {
  color: #2d6cdf;
  text-decoration: none;
}
.dialog-footer[data-v-8e49113b] {
  display: flex;
  gap: 12px;
}
.disagree-btn[data-v-8e49113b] {
  flex: 1;
  border-radius: 24px;
  height: 44px;
}
.agree-btn[data-v-8e49113b] {
  flex: 2;
  border-radius: 24px;
  height: 44px;
  font-size: 16px;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
.welcome-section h2[data-v-8e49113b] {
    color: #f1f5f9;
}
.welcome-section[data-v-8e49113b] {
    border-bottom-color: #334155;
}
.agreement-summary p[data-v-8e49113b] {
    color: #cbd5e1;
}
.link-item[data-v-8e49113b] {
    background: #1e293b;
}
.link-item[data-v-8e49113b]:active {
    background: #334155;
}
.link-item span[data-v-8e49113b] {
    color: #60a5fa;
}
.key-points[data-v-8e49113b] {
    background: #1a2e1a;
}
.point[data-v-8e49113b] {
    color: #cbd5e1;
}
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #1a1a2e);
  transition: background 0.3s ease, color 0.3s ease;
}
#app {
  width: 100%;
  min-height: 100vh;
  background: var(--bg-primary, #fff);
  transition: background 0.3s ease;
}