/* APHA官网风格 - 公共样式 v1.2.0 */

/* 全局 box-sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

/* CSS变量定义 */
:root {
    /* 颜色系统 - #2A7AE5 蓝色系 */
    --color-primary: #2A7AE5;
    --color-primary-dark: #1E5FAF;
    --color-primary-light: #4A9AF5;
    --color-accent: #2A7AE5;
    --color-h1: #2A7AE5;
    --color-link: #2A7AE5;
    --color-link-hover: #1E5FAF;
    --color-text: #222;
    --color-text-secondary: #606060;
    --color-border: #B0B0B0;
    --color-divider: #EBEBEB;
    --color-bg: #ffffff;
    --color-bg-light: #f5f5f5;
    --shadow-light: 0 0 6px #ccc;
    --radius-small: 3px;
    --radius-medium: 5px;
    --container-width: 970px;
    --nav-height: 50px;
}

/* 字体系统 */
body, button, input, select, textarea {
    font-family: 'PT Sans', sans-serif;
    color: var(--color-text);
}

/* 标题样式 */
h1 { font-size: 2.667em; color: var(--color-h1); margin-bottom: 1em; }
h2 { font-size: 1.5em; color: var(--color-accent); margin-bottom: 1em; }
h3 { font-size: 1.333em; color: var(--color-accent); margin-bottom: 1em; }
h4 { font-size: 1.25em; margin-bottom: 1em; }

/* 链接样式 */
a, a:link, a:visited { color: var(--color-link); text-decoration: none; }
a:hover, a:active { color: var(--color-link-hover); }

/* 容器 */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 20px;
}

/* 卡片样式 */
.card {
    background: var(--color-bg);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-light);
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid var(--color-divider);
}

/* 按钮样式 */
.btn-primary {
    background: var(--color-primary);
    color: #fff;
    border-radius: 4px;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-family: 'PT Sans', sans-serif;
}
.btn-primary:hover { background: var(--color-primary-dark); }

.btn-secondary {
    background: var(--color-link);
    color: #fff;
    border-radius: 4px;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
}
.btn-secondary:hover { background: var(--color-link-hover); }

.btn-link {
    color: var(--color-link);
    background: none;
    border: none;
    cursor: pointer;
}
.btn-link:hover { color: var(--color-link-hover); }

/* 表单输入 */
input, select, textarea {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    padding: 8px 12px;
    font-size: 1em;
}
input:focus {
    outline: none;
    border-color: var(--color-link);
}

/* 分页样式 */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    padding: 16px;
    border-top: 1px solid var(--color-divider);
}
.pagination button {
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-bg-light);
    color: var(--color-text);
    cursor: pointer;
}
.pagination button:hover:not(:disabled) {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Badge 样式 */
.badge {
    padding: 4px 10px;
    border-radius: var(--radius-small);
    font-size: 0.8em;
    font-weight: 600;
}
.badge-active { background: #dcfce7; color: #166534; }
.badge-banned { background: #fee2e2; color: #991b1b; }
.badge-user { background: #e0f2fe; color: #0369a1; }
.badge-admin { background: #fef3c7; color: #92400e; }
.badge-superadmin { background: #fce7f3; color: #be185d; }

/* 表格样式 */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid var(--color-divider); }
th { font-weight: 600; color: var(--color-text-secondary); }
tr:hover { background: var(--color-bg-light); }

/* 消息提示 */
.msg { padding: 12px 16px; border-radius: var(--radius-small); margin-bottom: 16px; }
.msg-success { background: #dcfce7; color: #166534; }
.msg-error { background: #fee2e2; color: #991b1b; }
.msg-warning { background: #fef3c7; color: #92400e; }

/* 响应式断点 */
@media (max-width: 979px) {
    .container { padding: 15px; }
}
@media (max-width: 767px) {
    .container { padding: 10px; }
    .card { padding: 12px 15px; }
}
@media (max-width: 480px) {
    h1 { font-size: 2em; }
    h2 { font-size: 1.25em; }
}