/* Extracted minimal styles from index.html */
/* 极简风格基础 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color: #111; background: #fff; padding: 18px; }
.container { max-width: 1100px; margin: 0 auto; }
.page { display: none; }
.page.active { display: block; }

/* 极简卡片：浅边框与内边距 */
.card { background: #fff; border: 1px solid #e6e6e6; border-radius: 6px; padding: 14px; margin-bottom: 14px; }
@keyframes cardPop { 0% { transform: scale(0.96); box-shadow: 0 0 0 rgba(0,0,0,0); } 80% { transform: scale(1.04); } 100% { transform: scale(1); } }
.card:hover { box-shadow: 0 12px 32px rgba(160, 226, 255, 0.22), 0 3px 12px rgba(246, 214, 255, 0.18); transform: translateY(-2px) scale(1.02); }
.section-title { font-size: 15px; margin-bottom: 12px; font-weight: 600; color: #222; }

/* 按钮样式 */
.btn { padding: 8px 12px; border-radius: 6px; border: 1px solid #dcdcdc; background: #fafafa; font-weight: 600; cursor: pointer; }
.btn-primary { background: #111; color: #fff; border-color: #111; }
.btn-danger { background: #b00; color: #fff; border-color: #b00; }
.btn-sm { padding: 6px 8px; font-size: 13px; }

/* 输入框与选择器 */
.input, .select { padding: 8px 10px; border-radius: 4px; border: 1px solid #dcdcdc; font-size: 14px; width: 100%; }
.input:focus, .select:focus { outline: none; border-color: #bfbfbf; }
.input-search { flex: 1; max-width: 400px; }
.form-row { display: flex; gap: 15px; margin-bottom: 20px; }
.form-col { flex: 1; }
@media (max-width: 992px) { .form-row { flex-wrap: wrap; gap: 10px; } .form-col { flex: 0 0 48%; } }
@media (max-width: 768px) { .form-col { flex: 0 0 100%; } }

/* 顶部导航 */
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #f0f2f5; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: bold; color: #7fbcff; }
.logo-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #aee2ff 0%, #f6d6ff 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; box-shadow: 0 2px 8px rgba(160, 226, 255, 0.18); }
.header-actions { display: flex; gap: 10px; }
.main-nav { display: flex; gap: 10px; margin-bottom: 20px; }

/* 筛选区 */
.filter-bar { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }

/* 表格样式 */
.table { width: 100%; background: none; padding: 0; border-collapse: collapse; table-layout: auto; }
.table th { background-color: #f5f7fa; font-weight: 600; color: #303133; text-align: left; padding: 10px 12px; }
.table td { padding: 10px 12px; vertical-align: middle; word-break: break-word; white-space: normal; }
.col-id { position: sticky; left: 0; background: inherit; z-index: 2; min-width: 60px; }
.col-phone { min-width: 160px; }
.col-name { min-width: 120px; }
.col-age { min-width: 70px; }
.col-assignee { min-width: 140px; }
.col-importTime { min-width: 140px; }
.col-fileName { min-width: 140px; }
.col-actions { min-width: 100px; }
@media (max-width: 768px) { .col-importTime, .col-fileName { display: none; } .table td.col-importTime, .table td.col-fileName { display: none; } }
.table th:hover { background-color: #eef3fa; }
.table tr:hover { background-color: #ecf5ff; }
.phone-number { font-family: 'Courier New', Courier, monospace; color: #303133; }
.table-container { overflow-x: auto; }

/* 状态样式 */
.status-used { color: #67c23a; font-weight: 500; }
.status-used::before { content: "●"; margin-right: 5px; font-size: 16px; }
.status-unused { color: #909399; }
.status-unused::before { content: "●"; margin-right: 5px; font-size: 16px; }

/* 操作按钮 */
.oper-btn { color: #409eff; background: none; border: none; cursor: pointer; margin: 0 5px; font-size: 14px; padding: 2px 4px; border-radius: 4px; }
.oper-btn:hover { background-color: #ecf5ff; }
.oper-btn-danger { color: #f56c6c; }
.oper-btn-danger:hover { background-color: #fef0f0; }

/* 统计信息 */
.stats { margin-bottom: 15px; color: #606266; font-size: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stats span { padding: 3px 10px; border-radius: 12px; font-size: 12px; display: flex; align-items: center; gap: 5px; }
.stats-used { background-color: #f0f9eb; color: #67c23a; }
.stats-unused { background-color: #f5f7fa; color: #909399; }

/* 表单样式 */
.form { max-width: 800px; margin: 0 auto; }
.form-item { margin-bottom: 20px; }
.form-label { display: block; margin-bottom: 8px; font-weight: 500; color: #303133; }
.form-hint { margin-top: 5px; font-size: 12px; color: #909399; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 30px; }
.form-note { color: #f56c6c; font-size: 12px; margin-top: 5px; }

/* 时间线样式 */
.timeline { position: relative; max-width: 800px; margin: 0 auto; padding-left: 30px; }
.timeline::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background-color: #e4e7ed; }
.timeline-item { position: relative; margin-bottom: 30px; }
.timeline-dot { position: absolute; left: -30px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background-color: #409eff; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; }
.timeline-dot.used { background-color: #67c23a; }
.timeline-dot.unused { background-color: #909399; }
.timeline-content { background-color: white; border-radius: 8px; padding: 15px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); border: 1px solid #f0f2f5; }
.timeline-time { color: #909399; font-size: 12px; margin-bottom: 5px; }
.timeline-title { font-weight: 500; margin-bottom: 8px; }
.timeline-detail { font-size: 14px; color: #606266; }

/* 提示框和加载动画 */
.toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); padding: 10px 20px; border-radius: 8px; background-color: rgba(0,0,0,0.8); color: white; font-size: 14px; z-index: 1000; opacity: 0; transition: opacity 0.3s; display: flex; align-items: center; gap: 8px; }
.toast.show { opacity: 1; }
.toast-success { background-color: rgba(103, 194, 58, 0.9); }
.toast-error { background-color: rgba(245, 108, 108, 0.9); }
.loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.8); z-index: 1001; display: none; justify-content: center; align-items: center; flex-direction: column; gap: 15px; }
.loading.show { display: flex; }
.loading-spinner { width: 40px; height: 40px; border: 4px solid #f0f2f5; border-top: 4px solid #409eff; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
* { -webkit-animation: none !important; animation: none !important; -webkit-transition: none !important; transition: none !important; }

/* ========== 极简风覆盖样式 ========== */
:root { --bg: #ffffff; --card-bg: #ffffff; --muted: #6b7280; --text: #0f172a; --border: #e6e6e6; --primary: #0f172a; }
body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
.card { background: var(--card-bg); border-radius: 8px; box-shadow: none; padding: 16px; border: 1px solid var(--border); }
.btn { background: none; border: 1px solid var(--border); color: var(--primary); border-radius: 6px; padding: 6px 12px; font-weight: 600; box-shadow: none; }
.btn-primary { background: var(--primary); color: #fff; border: none; }
.btn-success { background: #0ea5a4; color: #fff; border: none; }
.btn-danger { background: #ef4444; color: #fff; border: none; }
.btn-default { background: transparent; color: var(--muted); }
.table th, .table td { border-bottom: 1px solid var(--border); padding: 10px; }
.table { border-collapse: collapse; }
.table-container { overflow: auto; }
.logo-icon { display: none !important; }
svg[width="120"][height="120"] { display: none !important; }
.timeline-content, .person-card { box-shadow: none; border: 1px solid var(--border); background: transparent; }
.status-used, .status-unused { color: var(--muted); font-weight: 500; }
.input, .select { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
@media (max-width: 768px) { .card { padding: 12px; } }

/* ========== 结束极简覆盖 ========== */

/* 批量操作模态框 */
.modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 2000; display: none; justify-content: center; align-items: center; }
.modal-backdrop.show { display: flex; }
.modal { background-color: white; border-radius: 12px; width: 90%; max-width: 800px; max-height: 80vh; overflow-y: auto; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.modal-header { padding: 15px 20px; border-bottom: 1px solid #f0f2f5; display: flex; justify-content: space-between; align-items: center; }
.modal-title { font-size: 16px; font-weight: 600; color: #303133; }
.modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: #909399; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background-color: #f5f7fa; color: #606266; }
.modal-body { padding: 20px; }
.modal-footer { padding: 15px 20px; border-top: 1px solid #f0f2f5; display: flex; justify-content: flex-end; gap: 10px; }

/* 导入模板和帮助文本 */
.import-template { margin-top: 15px; padding: 10px; background-color: #f5f7fa; border-radius: 8px; font-size: 13px; }
.import-template-title { font-weight: 600; margin-bottom: 5px; color: #409eff; }
.import-fields { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.import-field { padding: 3px 8px; background-color: #ecf5ff; border-radius: 4px; font-size: 12px; color: #409eff; }

/* 人员列表样式 */
.person-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 15px; }
.person-card { background-color: #f9fafb; border-radius: 8px; padding: 15px; border: 1px solid #f0f2f5; transition: all 0.2s; }
.person-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-color: #e6f7ff; }
.person-name { font-weight: 600; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; }
.person-info { font-size: 13px; color: #606266; margin-bottom: 3px; }
.person-actions { margin-top: 10px; display: flex; justify-content: flex-end; gap: 5px; }

/* 导入方式选项卡 */
.import-tabs { display: flex; border-bottom: 1px solid #e4e7ed; margin-bottom: 15px; }
.import-tab { padding: 10px 15px; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
.import-tab.active { border-bottom-color: #409eff; color: #409eff; font-weight: 500; }
.import-tab-content { display: none; }
.import-tab-content.active { display: block; }

/* 粘贴导入文本区域 */
.paste-area { width: 100%; min-height: 150px; padding: 10px; border: 1px solid #e4e7ed; border-radius: 8px; font-family: monospace; font-size: 13px; resize: vertical; margin-bottom: 10px; }
.paste-preview { margin-top: 15px; max-height: 200px; overflow-y: auto; border: 1px solid #e4e7ed; border-radius: 8px; }
.paste-preview-header { background-color: #f5f7fa; font-weight: 500; }
.paste-preview-row { display: grid; grid-template-columns: 50px 1fr 1fr 1fr 1fr; padding: 8px 10px; border-bottom: 1px solid #f0f2f5; font-size: 13px; }
.paste-preview-row.error { background-color: #fff1f0; }
.paste-error { color: #f56c6c; font-size: 12px; margin-top: 5px; }

@media (max-width: 768px) { .filter-bar { flex-direction: column; align-items: flex-start; } .input-search { width: 100%; max-width: none; } .main-nav { flex-wrap: wrap; } .header { flex-direction: column; align-items: flex-start; gap: 15px; } .header-actions { width: 100%; justify-content: space-between; } .paste-preview-row { grid-template-columns: 40px 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "index phone" "index name" "index age" "index assignee"; } .paste-preview-row > div:nth-child(1) { grid-area: index; } .paste-preview-row > div:nth-child(2) { grid-area: phone; } .paste-preview-row > div:nth-child(3) { grid-area: name; } .paste-preview-row > div:nth-child(4) { grid-area: age; } .paste-preview-row > div:nth-child(5) { grid-area: assignee; } }