/* 基础样式 */
:root{
    --primary:#3b82f6; /* 蓝 */
    --primary-600:#2563eb;
    --primary-700:#1d4ed8;
    --success:#10b981;
    --success-600:#059669;
    --danger:#ef4444;
    --danger-600:#dc2626;
    --text:#334155;
    --muted:#64748b;
    --border:#e5e7eb;
    --bg:#f5f7fa;
    --card:#ffffff;
    --shadow:0 8px 24px rgba(15,23,42,.06);
    --radius:10px;
}
*{margin:0;padding:0;box-sizing:border-box;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
body{background-color:var(--bg);color:var(--text);line-height:1.6}

a{text-decoration:none;color:var(--primary)}
a:hover{color:var(--primary-600)}

/* 按钮样式 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;line-height:1;transition:.2s box-shadow,.2s transform,.2s background}
.btn:hover{background:var(--primary-600);color:#fff;box-shadow:var(--shadow);transform:translateY(-1px)}
.btn.primary{background:var(--success)}
.btn.primary:hover{background:var(--success-600)}
.btn.danger{background:var(--danger)}
.btn.danger:hover{background:var(--danger-600)}
.btn.small{padding:6px 10px;font-size:12px;border-radius:6px}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}

/* 表单样式 */
.form{background-color:var(--card);padding:20px;border-radius:var(--radius);box-shadow:var(--shadow)}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 14px;
}

.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;background:#fff}

.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.2)}

.form-group small {
    color: #7f8c8d;
    font-size: 12px;
}

.form-actions {
    margin-top: 20px;
}

/* 表格样式 */
.data-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}

/* 表格容器（小屏横向滚动） */
.table-container{width:100%;overflow-x:auto}

.data-table th,
.data-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.data-table th{background:#f8fafc;font-weight:600;color:#0f172a}
.data-table tr:hover {
    background-color: #f8fafc;
}

.data-table .actions {
    display: flex;
    gap: 5px;
}

/* 消息提示 */
.message{padding:12px 14px;border-radius:10px;margin-bottom:15px;font-size:14px;border:1px solid transparent}
.message.success{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.message.error{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.message.info{background:#eff6ff;color:#1e3a8a;border-color:#bfdbfe}

/* 空状态提示 */
.empty-message{text-align:center;padding:30px;color:var(--muted);background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-content{background:var(--card);padding:20px;border-radius:12px;width:90%;max-width:520px;position:relative;box-shadow:var(--shadow)}

.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
    color: #7f8c8d;
}

.close-btn:hover {
    color: #333;
}

/* 响应式样式 */
@media (max-width:768px){
  .form{padding:16px}
  .section{padding:16px}
  .form-group input,.form-group select,.form-group textarea{font-size:16px}
  .form-actions .btn{width:100%}
  .data-table{font-size:12px}
  .data-table th,.data-table td{padding:10px}
  .btn{padding:10px 14px;font-size:14px}
}