/* SPA 应用样式 === 文件结构（按作用域分组，便于查找与维护） === 1. Variables (主题变量) 2. Base / Reset 3. Layout (app, header, nav, content) 4. Components - Cards - Forms - Buttons - Tables - Alerts - Widgets/Helpers 5. Utilities & Responsive 注意：此文件仅进行注释/分组整理，未改动具体行为性规则。 */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif; line-height: 1.6; color: #333; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; -webkit-overflow-scrolling: touch; overflow-x: hidden; /* 强制预留滚动条空间，避免出现/消失导致内容左右抖动 */ overflow-y: scroll; } :root { /* == Variables == 主题变量：默认启用高对比（便于移动设备与可访问性）通过添加 body.theme-soft 可覆盖为柔和风格 */ /* ...existing variables... */ /* 主题色 */ --primary: #667eea; --accent: #27ae60; --bg-card: #ffffff; --text: #222; --muted: #6b7280; --error-bg: #f8d7da; --error-text: #721c24; --success-bg: #d4edda; --success-text: #155724; } /* == Components: Forms == */ /* 软色主题：添加 body.theme-soft 可切换 */ body.theme-soft { --primary: #5a6fd8; --accent: #2ecc71; --bg-card: #ffffff; --text: #333; --muted: #6b7280; --error-bg: #fdecea; --error-text: #9b2b2b; --success-bg: #e9f7ef; --success-text: #1a7f3a; } /* 字段级错误样式 (Forms) */ .spa-form-group.error input, .spa-form-group.error textarea, .spa-form-group.error select { border-color: var(--error-text); box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.06); } .spa-form-group .field-error { margin-top: 8px; color: var(--error-text); background: rgba(220, 53, 69, 0.05); padding: 6px 10px; border-radius: 8px; font-size: 13px; } /* 当表单在移动设备上时 (Forms Mobile) */ @media (max-width:600px) { .spa-form-group .field-error { font-size: 14px; padding: 10px; } .spa-form { padding: 0 10px; } } /* 可选：隐藏但保留滚动条占位（Webkit 浏览器）*/ body::-webkit-scrollbar { width: 12px; /* 不能设为0，否则又会触发布局变化 */ } /* 避免页面居中容器因滚动条出现宽度变小导致左右“跳动” */ html { scrollbar-gutter: stable both-edges; /* 支持的浏览器会直接稳定布局 */ } /* 当 Bootstrap Modal 打开时，Bootstrap 会在上设置 inline padding-right 来补偿滚动条宽度，由于本应用已通过始终显示滚动条与 scrollbar-gutter 稳定布局，这里强制去除该补偿以避免头部与导航向右位移 */ body.modal-open { padding-right: 0 !important; } /* 某些环境下 Modal 自身也可能携带 padding-right（取决于样式引入顺序），一并归零 */ .modal, .modal-open .modal { padding-right: 0 !important; } /* 保险起见：固定头部与导航在 Modal 打开时也不随 body 右内边距变化 */ .modal-open .spa-header, .modal-open .spa-nav { padding-right: 0 !important; } /* == Layout == */ /* SPA 应用容器 */ #app { min-height: 100vh; display: flex; flex-direction: column; max-width: 1000px; min-width: 300px; margin: 0 auto; position: relative; } /* 固定头部 */ .spa-header { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 5px 15px; text-align: center; position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; transform: none; width: 100%; max-width: 1000px; z-index: 1000; border-bottom: 1px solid rgba(255, 255, 255, 0.2); transition: transform 0.3s ease, opacity 0.3s ease; will-change: transform, opacity; } .spa-header h1 { color: white; font-size: 1.8em; margin-bottom: 5px; font-weight: 600; } .spa-header p { color: rgba(255, 255, 255, 0.8); font-size: 0.9em; margin: 0; } /* 固定导航栏 */ .spa-nav { display: flex; justify-content: space-around; background: white; padding: 6px 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); position: fixed; top: 85px; /* 头部高度 */ left: 0; right: 0; transform: none; margin: 0 auto; width: 100%; max-width: 1000px; z-index: 999; transition: top 0.3s ease; } .spa-nav .nav-item { text-decoration: none; padding: 8px 16px; color: #667eea; border-radius: 20px; transition: all 0.3s ease; font-size: 14px; font-weight: 500; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 60px; } .spa-nav .nav-item:hover, .spa-nav .nav-item.active { background: #667eea; color: white; transform: translateY(-1px); } .spa-nav .nav-item i { font-size: 18px; } /* 主内容区域 */ .spa-content { flex: 1; /* 原先写死 margin-top:145px 改为使用变量，便于 JS 动态更新 */ margin-top: var(--content-offset, 145px); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); min-height: calc(100vh - var(--content-offset, 145px)); transition: margin-top 0.25s ease; } /* 卡片：现代悬浮样式 */ /* 页面内容 */ .spa-page-content { padding: 10px; /* 顶部减少为10px */ animation: fadeIn 0.3s ease; margin: 0 auto; width: 100%; box-sizing: border-box; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* 页面卡片样式 */ .spa-card { background: white; border-radius: 15px; padding: 10px; margin-bottom: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.2s ease-out; } .spa-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .spa-card.spa-centered { max-width: 500px; margin: 0 auto 15px auto; } .spa-card.spa-wide { max-width: 800px; margin: 20px auto; } .spa-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #f0f0f0; } .spa-card-title { font-size: 1.2em; font-weight: 600; color: #333; margin: 0; display: flex; align-items: center; gap: 8px; } .spa-card-body { padding: 0; } /* 网格布局 */ .spa-grid { display: grid; gap: 15px; } .spa-grid.spa-grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* 表单样式 */ .spa-form { max-width: 400px; margin: 0 auto; } .spa-form-group { margin-bottom: 10px; } .spa-form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #333; } .spa-form-group input, .spa-form-group textarea, .spa-form-group select { width: 100%; padding: 10px 10px; border: 2px solid #e1e8ed; border-radius: 10px; font-size: 14px; transition: border-color 0.3s ease; -webkit-appearance: none; appearance: none; /* 补充标准属性，提升兼容性 */ background: white; } /* 复选框与单选按钮不应继承上面的大块输入样式，单独还原 */ .spa-form-group input[type="checkbox"], .spa-form-group input[type="radio"] { width: auto; padding: 0; border: 1px solid #888; border-radius: 4px; box-shadow: none; display: inline-block; cursor: pointer; vertical-align: middle; -webkit-appearance: checkbox; appearance: checkbox; background: initial; } .spa-form-group input[type="checkbox"]:checked, .spa-form-group input[type="radio"]:checked { background-color: #667eea; border-color: #667eea; } .spa-form-group input[type="checkbox"]:focus, .spa-form-group input[type="radio"]:focus { outline: 2px solid #667eea; outline-offset: 2px; } .spa-form-group input:focus, .spa-form-group textarea:focus, .spa-form-group select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } /* 按钮样式 */ .spa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 15px; background: #667eea; color: white; text-decoration: none; border-radius: 8px; border: none; cursor: pointer; transition: all 0.3s ease; /* font-size: 14px; */ font-weight: 500; min-height: 36px; -webkit-appearance: none; appearance: none; } .spa-btn:hover { background: #5a6fd8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); color: white; text-decoration: none; } .spa-btn:active { transform: translateY(0); } .spa-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } .spa-btn.btn-block { width: 100%; } .spa-btn.btn-success, .spa-btn.spa-btn-primary.btn-success { background: #27ae60; } .spa-btn.btn-success:hover { background: #27ae60; box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4); } .spa-btn.btn-danger { background: #e74c3c; } .spa-btn.btn-danger:hover { background: #e74c3c; box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4); } .spa-btn.btn-secondary { background: #6c757d; } .spa-btn.btn-secondary:hover { background: #5a6268; } .spa-btn.btn-small { padding: 8px 10px; font-size: 12px; min-height: 30px; } .spa-btn-primary { background: #667eea; } .spa-btn-primary:hover { background: #5a6fd8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } /* 统计网格 */ .spa-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 5px; width: 100%; } .spa-stat-card { background: white; padding: 20px; margin: 0px 5; border-radius: 15px; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); transition: transform 0.28s ease, box-shadow 0.28s ease; will-change: transform, box-shadow; /* subtle entrance animation for stat cards (lightweight) */ animation: statFloatIn 260ms cubic-bezier(.16,.84,.44,1) both; } .spa-stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); } .spa-stat-number { font-size: 2em; font-weight: 700; color: #667eea; margin-bottom: 5px; } .spa-stat-label { color: #666; font-size: 0.9em; } /* 管理员统计网格 */ .admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; padding: 10px 2px 0px; margin-bottom: 10px; } .admin-stat-card { background: white; border-radius: 15px; padding: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); display: flex; align-items: center; gap: 15px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .admin-stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); } .admin-stat-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: white; } .admin-stat-card.users .admin-stat-icon { background: #4facfe; } .admin-stat-card.songs .admin-stat-icon { background: #43e97b; } .admin-stat-card.devices .admin-stat-icon { background: #fa709a; } .admin-stat-card.storage .admin-stat-icon { background: #fee140; } .admin-stat-info h3 { margin: 0 0 5px 0; font-size: 20px; font-weight: 500; color: #333; } .admin-stat-info p { margin: 0 0 5px 0; color: #666; font-weight: 500; } .admin-stat-info small { color: #999; font-size: 12px; } /* 用户信息 */ .spa-user-card { background: white; padding: 12px; border-radius: 15px; border-left: 4px solid; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); transition: transform 0.28s ease, box-shadow 0.28s ease; will-change: transform, box-shadow; animation: statFloatIn 260ms cubic-bezier(.16,.84,.44,1) both; } .spa-user-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); } .spa-user-card.primary { border-left-color: #667eea; } /* 介绍样式 */ .spa-describe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自动适应列数，最小300px */ gap: 10px; width: 100%; } /* 表格样式已迁移至 /static/css/spa-data-table.css */ .spa-alerts, #spa-alerts { /* alert 容器独立定位：固定在右下（或按后续媒体查询覆盖） */ position: fixed; bottom: 24px; /* show in lower-right */ right: 24px; left: auto; transform: none; width: min(360px, calc(100% - 48px)); z-index: 12000 !important; /* 提升层级，覆盖 PWA 弹窗 */ pointer-events: none; /* allow clicks to pass-through; internal buttons will enable pointer-events */ display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } /* 错误提示悬浮弹窗 */ .spa-alert { pointer-events: auto; display: flex; background: rgba(255, 193, 7, 0.80); /* warning yellow with 80% opacity */ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #222; border-radius: 14px; box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.18); left: 0; right: 0; margin: 0 auto; transform: none; width: 100%; max-width: 1000px; align-items: center; /* 垂直居中 */ justify-content: space-between; /* 左中右三栏布局 */ gap: 14px; position: relative; width: 100%; max-width: 380px; z-index: 12010; /* alert 本身层级位于容器之上 */ animation: alertFloatIn 280ms cubic-bezier(.16, .84, .44, 1) both; font-size: 14px; line-height: 1.35; border: none; } .spa-alert-left { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin-right: 10px; } .spa-alert-center { flex: 1 1 auto; min-width: 0; } .spa-alert-right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin-left: 12px; } /* 移除绝对定位关闭按钮样式，使用右侧容器内样式 */ #spa-alerts .spa-alert .spa-alert-close { position: static; top: auto; right: auto; width: 32px; height: 32px; border-radius: 8px; padding: 0; } /* 让图标和内容垂直居中 */ #spa-alerts .spa-alert .spa-alert-icon { margin: 0; } #spa-alerts .spa-alert .spa-alert-message { margin: 0; } /* 小屏幕改为垂直堆叠（图标与内容同行，右侧按钮在下方靠右） */ @media (max-width:480px) { #spa-alerts .spa-alert { flex-direction: row; } /* 小屏幕下隐藏按钮标签，仅显示图标（紧凑显示） */ #btn-refresh-devices .btn-label { display: none !important; } #btn-refresh-users .btn-label { display: none !important; } /* admin music refresh button compact */ #btn-refresh-admin-music .btn-label { display: none !important; } /* 保证图标居中显示 */ #btn-refresh-users i { margin-right: 0; } #btn-refresh-devices i { margin-right: 0; } #btn-refresh-admin-music i { margin-right: 0; } /* make manufacture button compact on small screens (icon-only) */ #btn-manufacture-device .btn-label { display: none !important; } #btn-manufacture-device i { margin-right: 0; } #spa-alerts .spa-alert-right { margin-left: 8px; } } /* 图标方块区域 (Icon square) */ .spa-alert .spa-alert-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) inset; } .spa-alert .spa-alert-icon i { color: #fff; font-size: 16px; } /* 文本块 (Text block) */ .spa-alert .spa-alert-message { flex: 1; min-width: 0; } .spa-alert-title { display: block; font-size: 15px; font-weight: 800; margin-bottom: 4px; letter-spacing: .2px; } .spa-alert-desc { font-size: 14px; font-weight: 500; color: #1a1a1a; } .spa-alert-desc a { color: #111; text-decoration: underline; font-weight: 600; } /* 关闭按钮 (Close button) */ #spa-alerts .spa-alert .spa-alert-close { position: static; top: auto; right: auto; background: rgba(0, 0, 0, 0.12); color: #111; border: 0; width: 32px; height: 32px; border-radius: 8px; padding: 0; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease; } #spa-alerts .spa-alert .spa-alert-close:hover { background: rgba(0, 0, 0, 0.2); } #spa-alerts .spa-alert .spa-alert-close:active { transform: scale(.9); } /* 操作按钮区域 (Actions if present) */ .spa-alert-action { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .spa-alert-action button, .spa-alert-action a { background: rgba(0, 0, 0, 0.15); border: 0; color: #111; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background .2s; } .spa-alert-action button:hover, .spa-alert-action a:hover { background: rgba(0, 0, 0, 0.25); } /* 去重高亮复用 (Dedupe highlight reuse) */ .spa-alert.shake-highlight { animation: shake 0.6s ease-in-out; } /* 极小屏幕紧凑适配 (Compact tweaks for very small mobile widths) */ @media (max-width: 420px) { .spa-alert { padding: 12px 14px 12px 14px; border-radius: 12px; } .spa-alert .spa-alert-icon { width: 30px; height: 30px; flex-basis: 30px; } .spa-alert-title { font-size: 14px; } .spa-alert-desc { font-size: 13px; } } /* 提示卡片细化：更窄、更高位置、更小图标 (Alert Tweaks: narrower, higher, smaller icon) */ @media (min-width: 769px) { .spa-alerts, #spa-alerts { bottom: 15vh !important; /* raise higher */ width: 320px !important; max-width: 320px !important; } } /* 核心卡片尺寸调整 (Core card adjustments) */ .spa-alert { max-width: 320px; padding: 12px 14px 12px 14px; gap: 10px; } #spa-alerts .spa-alert .spa-alert-icon { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 6px; } #spa-alerts .spa-alert .spa-alert-icon i { font-size: 13px; } #spa-alerts .spa-alert-title { font-size: 14px; margin-bottom: 2px; } #spa-alerts .spa-alert-desc { font-size: 13px; } /* 再次极小屏幕紧凑 (Tighten very small screens further) */ @media (max-width: 420px) { .spa-alert { gap: 8px; } .spa-alert .spa-alert-icon { width: 24px; height: 24px; flex-basis: 24px; } .spa-alert .spa-alert-icon i { font-size: 12px; } } /* === End Alert Tweaks === */ /* 隐藏头部导航状态 */ .spa-header.hidden { transform: translateY(-100%); } .spa-header.scrolled { background: rgba(255, 255, 255, 0.15); } body.header-hidden .spa-header { transform: translateY(-100%); } body.header-hidden .spa-nav { top: 0; } body.header-hidden .spa-content { margin-top: 50px; /* 减少10px */ } /* 移动端响应式 */ @media (max-width: 768px) { #app { max-width: 100%; margin: 0; } .spa-header.hidden { transform: translate3d(0, -100%, 0); } .spa-header { padding: 2px 12px; } .spa-header h1 { font-size: 1.5em; } .spa-nav { top: 71px; padding: 8px 0; left: 0; right: 0; transform: none; margin: 0 auto; max-width: none; width: 100%; } .spa-nav .nav-item span { display: none; } .spa-nav .nav-item { min-width: 50px; padding: 10px 8px; } .spa-content { margin-top: 115px; /* 减少20px */ } .spa-page-content { padding: 20px 5px 0px 5px; /*上，左，下，右 */ max-width: none; } .spa-card { padding: 10px 10px 10px; margin-bottom: 10px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.03); } .spa-card-header { margin-bottom: 8px; padding-bottom: 8px; } /* 表格样式已迁移至 /static/css/spa-data-table.css */ .spa-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .spa-stat-card { padding: 15px; } .spa-stat-number { font-size: 1.5em; } /* 表格样式已迁移至 /static/css/spa-data-table.css */ .spa-dashboard-links { grid-template-columns: 1fr; } .spa-tips-grid { grid-template-columns: 1fr; } .spa-auth-links { flex-direction: column; align-items: center; } .spa-usage-guide { grid-template-columns: 1fr; gap: 15px; } /* 介绍样式 */ .spa-describe-grid { grid-template-columns: 1fr; } /* 表格样式已迁移至 /static/css/spa-data-table.css */ body.header-hidden .spa-nav { top: 0; } body.header-hidden .spa-content { margin-top: 50px; /* 减少10px */ } } /* iOS Safari 特殊处理 */ @supports (-webkit-touch-callout: none) { .spa-content { min-height: calc(100vh - 165px - env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); } } /* 平滑滚动 */ html { scroll-behavior: smooth; } /* 加强对比度的无障碍样式 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; /* transition-duration: 1.51ms !important; */ } } /* 深色模式支持预留 */ @media (prefers-color-scheme: dark) { /* 这里可以添加深色模式样式 */ } /* 统一组件样式 */ /* API示例框 */ .spa-api-example { background: #f8f9fa; border-left: 4px solid #667eea; padding: 15px 20px; margin: 20px 0; border-radius: 0 10px 10px 0; } /* 仪表板链接网格 */ .spa-dashboard-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; } /* 仪表板链接 */ .spa-dashboard-link { display: flex; align-items: center; gap: 10px; padding: 15px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-decoration: none; border-radius: 10px; transition: all 0.3s ease; font-weight: 500; } .spa-dashboard-link:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); color: white; text-decoration: none; } .spa-dashboard-link.admin { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); } .spa-dashboard-link.logout { background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%); } /* 认证链接区域 */ .spa-auth-links { display: flex; gap: 15px; justify-content: center; } .spa-login-prompt { text-align: center; margin-top: 10px; } .spa-login-prompt p { margin-bottom: 20px; } /* 状态标签 */ .spa-status-badge { padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; } .spa-status-badge.spa-small { padding: 2px 6px; border-radius: 8px; font-size: 10px; } .spa-status-badge.primary, .spa-status-badge.spa-info { background: #e3f2fd; color: #1976d2; } .spa-status-badge.success, .spa-status-badge.spa-success { background: #e8f5e8; color: #2e7d2e; } .spa-status-badge.danger, .spa-status-badge.spa-danger { background: #ffe0e0; color: #e74c3c; } .spa-status-badge.warning, .spa-status-badge.spa-warning { background: #fff4e6; color: #f57c00; } /* 信息框 - 改进样式，参考传统模板 */ .spa-info-box { background: white; padding: 15px; border-radius: 15px; margin-bottom: 6px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.05); position: relative; } .spa-info-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); border-radius: 15px 15px 0 0; } .spa-info-box.spa-success::before { background: linear-gradient(90deg, #27ae60 0%, #2ecc71 100%); } .spa-info-box.spa-warning::before { background: linear-gradient(90deg, #f39c12 0%, #e67e22 100%); } .spa-info-box.spa-danger::before { background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%); } .spa-info-box.spa-info::before { background: linear-gradient(90deg, #3498db 0%, #2980b9 100%); } /* 列表间距优化：仅针对主要内容区、卡片与模态中的列表，避免全局副作用 */ .spa-page-content li, .spa-card-body li, .spa-card li, .spa-modal .spa-modal-body li, .spa-usage-card li, .spa-privacy-card li, .spa-info-box li { margin-bottom: 6px; line-height: 1.0; } /* 小屏幕适配：适当增加行高以便触控阅读 */ @media (max-width: 600px) { .spa-page-content li, .spa-card-body li, .spa-modal .spa-modal-body li { margin-bottom: 6px; line-height: 1.0; } } /* 警告框 */ .spa-warning-box { padding: 15px; background: #f8f9fa; border-radius: 10px; border-left: 4px solid #ffc107; margin: 15px 0; } /* 提示网格 */ .spa-tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .spa-tip-card { padding: 15px; background: #f8f9fa; border-radius: 10px; border-left: 4px solid #667eea; } .spa-tip-card.success { border-left-color: #28a745; } .spa-tip-card.warning { border-left-color: #ffc107; } .spa-tip-card.info { border-left-color: #17a2b8; } /* 代码片段 */ .spa-code { background: #f8f9fa; padding: 4px 6px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 13px; } .spa-code.inline { display: inline; } .spa-code.block { display: block; padding: 12px 16px; margin: 10px 0; border: 1px solid #e9ecef; } /* Fix: ensure long code blocks / preformatted text do not force page width on mobile - allow wrapping inside long words when necessary, and fall back to horizontal scroll so different browsers (including Samsung) won't expand the viewport. */ pre, .spa-card pre, .spa-code.block pre, .spa-code { white-space: pre-wrap; /* allow wrapping of long lines */ word-break: break-word; /* break long words if needed */ overflow-wrap: anywhere; /* modern rule to allow breaks anywhere */ hyphens: auto; max-width: 100%; box-sizing: border-box; } /* If content still needs horizontal scrolling, provide a contained scroll instead of expanding the page width. */ pre { overflow-x: auto; } /* Fix inline

 elements that may contain long strings (URLs, JSON fragments)
   so they won't expand the page width on small devices (e.g. Samsung browser). */
code,
.spa-card code,
.spa-usage-card code,
.spa-usage-guide code,
.spa-info-box code {
    white-space: normal;      /* allow wrapping within inline code */
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    max-width: 100%;
    display: inline-block;    /* allows max-width to take effect */
    vertical-align: baseline;
}

/* 状态指示器 */
.spa-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.spa-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.spa-status-dot.online {
    background: #28a745;
}

.spa-status-dot.offline {
    background: #6c757d;
}

.spa-status-dot.warning {
    background: #ffc107;
}

/* 用户仪表板 */
.spa-user-dashboard {
    margin-top: 10px;
}

/* 设备信息 */
.spa-device-info {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #667eea;
}


/* 圆形图标小按钮（扁平风格，主色体系） */
.spa-btn.btn-small.btn-icon {
    padding: 4px 6px;
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.spa-btn.btn-small.btn-icon i {
    margin: 0;
    font-size: 14px;
}

.spa-btn.btn-small.btn-icon {
    background: var(--primary);
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.spa-btn.btn-small.btn-icon:hover {
    background: #5a6fd8;
}

.spa-btn.btn-small.btn-icon.btn-success {
    background: #2e7d2e;
}

.spa-btn.btn-small.btn-icon.btn-danger {
    background: #d24333;
}

.spa-btn.btn-small.btn-icon.btn-warning {
    background: #cc7a0e;
}

.spa-btn.btn-small.btn-icon:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25);
}

.spa-btn.btn-small.btn-icon.disabled,
.spa-btn.btn-small.btn-icon:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* OTA Level buttons: flat horizontal pill buttons, evenly spaced */
.ota-level-buttons {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.ota-level-buttons .ota-level-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(102, 126, 234, 0.12);
    background: rgba(102, 126, 234, 0.06);
    color: var(--text);
    padding: 6px 9px; /* 减小内边距，使按钮更紧凑 */
    border-radius: 999px;
    font-size: 12px; /* 略小字体 */
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* 减小图标与文字间距 */
    min-width: 72px; /* 减小最小宽度，便于在窄容器内放下更多按钮 */
    justify-content: center;
    transition: background .18s ease, color .15s ease, transform .12s ease, box-shadow .12s ease;
}

/* Layout helper: place OTA buttons to the right of the label in device detail panel */
.device-ota-controls {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
}

.device-ota-controls .ota-level-buttons {
    margin-left: auto; /* push buttons to the right */
    justify-content: flex-end;
}

/* On small screens stack label above buttons for better touch targets */
@media (max-width: 600px) {
    .device-ota-controls {
        flex-direction: column;
        align-items: flex-start;
    }
    .device-ota-controls .ota-level-buttons {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
        justify-content: flex-start; /* keep buttons left-aligned in stacked layout */
    }
}

.ota-level-buttons .ota-level-btn i {
    font-size: 12px;
    opacity: 0.95;
}

/* ensure positioning context for tooltip pseudo elements */
.ota-level-buttons .ota-level-btn {
    position: relative;
}

/* 文本标签：在窄屏上隐藏以实现图标优先的紧凑样式；在桌面 hover 或 focus 时显示以增强可读性 */
.ota-level-buttons .ota-label {
    display: inline-block;
    transition: opacity .14s ease, max-width .14s ease;
    white-space: nowrap;
    margin-left: 4px;
}

/* 移动端或窄容器：只显示图标，隐藏文字标签；点击/聚焦时可显示（当可用） */
@media (max-width:600px) {
    /* 移动端：未选中的按钮为圆形图标，仅选中项显示文本 */
    .ota-level-buttons .ota-level-btn:not(.active) {
        width: 36px;
        height: 36px;
        padding: 0;
        min-width: 0;
        border-radius: 50%;
        gap: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 隐藏非选中按钮的文字标签；选中按钮保持显示标签 */
    .ota-level-buttons .ota-level-btn:not(.active) .ota-label {
        display: none;
    }
    .ota-level-buttons .ota-level-btn.active .ota-label {
        display: inline-block;
        margin-left: 6px;
    }

    .ota-level-buttons .ota-level-btn i {
        margin-right: 0;
        font-size: 14px; /* 图标可稍大以利触控识别 */
    }

    /* allow focus/active to reveal label on some touch devices */
    .ota-level-buttons .ota-level-btn:focus .ota-label,
    .ota-level-buttons .ota-level-btn:active .ota-label {
        display: inline-block;
    }
}

/* 桌面：当 hover 或 focus 时突出显示文字（便于可发现性） */
.ota-level-buttons .ota-level-btn:hover .ota-label,
.ota-level-buttons .ota-level-btn:focus .ota-label {
    opacity: 1;
}

.ota-level-buttons .ota-level-btn:hover {
    background: rgba(102, 126, 234, 0.12);
    transform: translateY(-1px);
}

/* Active state */
.ota-level-buttons .ota-level-btn.active {
    background: linear-gradient(90deg, var(--primary), #5a6fd8);
    color: #fff;
    border-color: rgba(90, 111, 216, 0.9);
    box-shadow: 0 6px 18px rgba(102, 126, 234, 0.18);
}

/* Disabled (level 3 visual only) */
.ota-level-buttons .ota-level-btn[disabled],
.ota-level-buttons .ota-level-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: rgba(220,220,220,0.5);
    color: var(--muted);
    border-color: rgba(0,0,0,0.04);
}

/* When an OTA level is active but disabled (admin-set development level),
   still show the active/highlighted appearance so users can see the selection. */
.ota-level-buttons .ota-level-btn.active[disabled],
.ota-level-buttons .ota-level-btn[disabled].active {
    background: linear-gradient(90deg, var(--primary), #5a6fd8);
    color: #fff;
    border-color: rgba(90, 111, 216, 0.9);
    box-shadow: 0 6px 18px rgba(102, 126, 234, 0.18);
    opacity: 1;
    cursor: not-allowed;
}

/* Tooltip for icon-only buttons on hover-capable devices (uses data-label attribute) */
@media (hover: hover) {
    /* Tooltip for all icon buttons, including active ones */
    .ota-level-buttons .ota-level-btn::after {
        content: attr(data-label);
        position: absolute;
        top: -36px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.82);
        color: #fff;
        padding: 6px 8px;
        border-radius: 6px;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity .12s ease, transform .12s ease;
        z-index: 50;
        box-shadow: 0 6px 18px rgba(0,0,0,0.28);
    }

    .ota-level-buttons .ota-level-btn:hover::after,
    .ota-level-buttons .ota-level-btn:focus::after {
        opacity: 1;
        transform: translateX(-50%) translateY(-4px);
    }
}

/* 表格CSS迁移至 /static/css/spa-data-table.css */


/* 搜索表单 */
.spa-search-form {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 20px;
    border-radius: 15px;
    border: 1px solid #dee2e6;
    margin-bottom: 20px;
}

/* QR码图片 */
.spa-qr-image {
    margin-top: 10px;
    max-width: 200px;
    height: auto;
    border-radius: 10px;
}

/* 帮助文本 */
.spa-help-text {
    color: #666;
    font-size: 12px;
    margin-top: 5px;
}

/* 页脚注释 */
.spa-footer-note {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e1e8ed;
    text-align: center;
    color: #666;
}

/* 特色卡片 */
.spa-feature-card {
    text-align: center;
    padding: 20px;
}

.spa-feature-icon {
    font-size: 2em;
    color: #667eea;
    margin-bottom: 10px;
    display: block;
}

/* 隐私保护卡片 */
.spa-privacy-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

/* 使用说明样式 */
.spa-usage-guide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* 大屏幕上限制使用说明卡片的最大列数 */
@media (min-width: 1000px) {
    .spa-usage-guide {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        max-width: 1400px;
    }
}


.spa-usage-card {
    padding: 15px 20px;
    margin: 5px 0;
    background: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    border-left: 4px solid;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    will-change: transform, box-shadow;
    animation: statFloatIn 260ms cubic-bezier(.16,.84,.44,1) both;
}

.spa-usage-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.spa-usage-card.primary {
    border-left-color: #667eea;
}

.spa-usage-card.success {
    border-left-color: #28a745;
}

.spa-usage-card.warning {
    border-left-color: #ffc107;
}

.spa-usage-card.danger {
    border-left-color: #dc3545;
}

.spa-usage-card.info {
    border-left-color: #17a2b8;
}

.spa-usage-card h4 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

.spa-usage-card p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

.spa-privacy-card {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
}

.spa-privacy-card p {
    margin: 0;
    font-size: 14px;
}

.spa-privacy-icon {
    color: #28a745;
    margin-bottom: 5px;
    display: block;
}


/* 桌面端自定义滚动条（仅影响支持 WebKit 的浏览器）*/
@media (pointer: fine) {
    body::-webkit-scrollbar {
        width: 10px;
    }

    body::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
    }

    body::-webkit-scrollbar-thumb {
        background: rgba(102, 126, 234, 0.55);
        border-radius: 6px;
        border: 2px solid rgba(0, 0, 0, 0);
        background-clip: padding-box;
    }

    body::-webkit-scrollbar-thumb:hover {
        background: rgba(102, 126, 234, 0.85);
    }
}

/* === Global Paragraph Font Size Normalization === */
body p {
    font-size: 14px;
    line-height: 1.55;
    padding: 2px;
}

.spa-header p {
    font-size: 12px;
}

.admin-stat-info p {
    font-size: 13px;
}

.spa-usage-card p,
.spa-privacy-card p {
    font-size: 14px;
}

.spa-help-text-sm {
    font-size: 12px !important;
}

/* === End Global Paragraph Font Size Normalization === */

/* Modal / Confirm（扁平风格，主色体系） */
.spa-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}

.spa-modal.show {
    pointer-events: auto;
    opacity: 1;
}

.spa-modal .spa-modal-content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(16, 24, 40, .24);
    max-width: 700px;
    width: 90%;
    margin: 16px;
    transform: translateY(6px);
    transition: transform .18s ease, opacity .18s ease;
}

.spa-modal .spa-modal-content.small {
    max-width: 420px;
    padding: 10px;
}

.spa-modal .spa-modal-content.medium {
    max-width: 520px;
    padding: 10px;
}

.spa-modal .spa-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.spa-modal .spa-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.spa-modal .spa-modal-close {
    background: transparent;
    border: 0;
    color: #6b7280;
    font-size: 18px;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 6px;
}

.spa-modal .spa-modal-close:focus {
    outline: 2px solid rgba(102, 126, 234, 0.35);
    outline-offset: 2px;
}

.spa-modal .spa-modal-body {
    padding: 5px 5px;
    color: #374151;
    font-size: 14px;
    line-height: 1.0;
}

.spa-modal .spa-modal-body p {
    margin: 0 0 8px 0;
}

.spa-modal .spa-modal-actionbar {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 8px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.spa-modal .spa-modal-actionbar button {
    min-width: 88px;
}

@media (max-width:480px) {
    .spa-modal .spa-modal-actionbar {
        flex-direction: column-reverse;
        gap: 8px;
        padding: 12px;
    }

    .spa-modal .spa-modal-actionbar button {
        width: 100%;
        min-width: 0;
    }
}

.spa-modal .btn-primary {
    background: var(--primary);
    color: #fff;
    border: 0;
    padding: 8px 14px;
    border-radius: 8px;
}

.spa-modal .btn-primary:hover {
    background: #5a6fd8;
}

.spa-modal .btn-secondary {
    background: #f3f4f6;
    color: #111827;
    border: 0;
    padding: 8px 14px;
    border-radius: 8px;
}

/* 登录标签样式 */
.login-tabs {
    display: flex;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 20px;
}

.login-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.login-tab:hover {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

.login-tab.active {
    background: #667eea;
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.login-form-content {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 二维码登录样式 */
.qr-login-container {
    max-width: 300px;
    margin: 0 auto;
}

.qr-loading {
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
}

.qr-loading i {
    font-size: 24px;
    margin-bottom: 12px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.qr-error {
    padding: 40px 20px;
    text-align: center;
}

.qr-error i {
    font-size: 24px;
    margin-bottom: 12px;
    color: #ef4444;
}

.qr-status {
    font-size: 14px;
    font-weight: 500;
}

.qr-status i {
    margin-right: 8px;
}

#qr-waiting {
    color: #6b7280;
}

#qr-scanned {
    color: #667eea;
}

#qr-expired {
    color: #f59e0b;
}