/* --- 全局与基础样式 --- */
:root {
    --primary-red: #D93A35;
    --accent-blue: #007AFF;
    --accent-green: #34C759;
    --accent-yellow: #FF9500;
    --text-dark: #1C1C1E;
    --text-light: #8A8A8E;
    --bg-main: #F2F2F7;
    --bg-card: #FFFFFF;
    --border-color: #E5E5EA;
}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
    background-color: var(--bg-main);
    color: var(--text-dark);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

/* --- 登录页面样式 --- */
.login-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; box-sizing: border-box; }
.login-header { text-align: center; margin-bottom: 40px; }
.login-header .logo { width: 80px; height: 80px; margin-bottom: 12px; }
.login-header h2 { font-size: 24px; font-weight: 600; margin: 0 0 8px 0; color: var(--text-dark); }
.login-header p { color: var(--text-light); font-size: 15px; margin: 0; }
.login-form { width: 100%; max-width: 350px; }
.form-group { margin-bottom: 20px; }
.form-group input { width: 100%; padding: 15px; border: 1px solid var(--border-color); background-color: var(--bg-card); border-radius: 12px; font-size: 16px; box-sizing: border-box; transition: border-color 0.3s, box-shadow 0.3s; }
.form-group input:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15); outline: none; }
.btn-login { width: 100%; padding: 15px; background: linear-gradient(135deg, #FF5B55, var(--primary-red)); color: white; border: none; border-radius: 12px; font-size: 18px; font-weight: 500; cursor: pointer; box-shadow: 0 4px 12px rgba(217, 58, 53, 0.3); transition: transform 0.2s, box-shadow 0.2s; }
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(217, 58, 53, 0.4); }
.error-message { color: var(--primary-red); text-align: center; height: 20px; font-size: 14px; margin-top: 10px; }
.visitor-link { margin-top: 30px; font-size: 14px; text-align: center; }
.visitor-link a { color: var(--accent-blue); text-decoration: none; }

/* --- 主应用框架 --- */
.app-container { padding-bottom: 80px; }
.app-header { background-color: var(--bg-card); color: var(--text-dark); padding: 12px 20px; text-align: center; position: sticky; top: 0; z-index: 999; border-bottom: 1px solid var(--border-color); }
.app-header h1 { margin: 0; font-size: 17px; font-weight: 600; }
.content-area { padding: 15px; }
.module-section { margin-bottom: 25px; }
.module-section h3 { font-size: 20px; font-weight: 600; margin: 0 0 15px 5px; color: var(--text-dark); }

/* --- 通用组件 --- */
.card, .form-section { background-color: var(--bg-card); border-radius: 14px; padding: 18px; margin-bottom: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); }
.card h3, .card h4 { display: flex; align-items: center; font-weight: 500; margin:0 0 5px 0; }
.card i.fas { font-size: 22px; color: var(--accent-blue); margin-right: 15px; width: 25px; text-align: center; }
.card p { color: var(--text-light); font-size: 14px; line-height: 1.5; margin: 0; padding-left: 0; }
.list-item { display: flex; justify-content: space-between; align-items: center; background-color: var(--bg-card); padding: 15px; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.list-item:last-child { margin-bottom: 0; }
.list-item span { font-size: 16px; }
.list-item .status { font-weight: 500; }
.status { padding: 5px 12px; border-radius: 15px; font-size: 12px; color: white; }
.status.pending { background-color: var(--accent-yellow); }
.status.approved { background-color: var(--accent-green); }
.status.rejected { background-color: var(--text-light); }
.btn { padding: 12px 20px; border-radius: 10px; border: none; cursor: pointer; font-size: 16px; font-weight: 500; color: white; background-color: var(--accent-blue); transition: background-color 0.3s, transform 0.2s; }
.btn:hover { transform: translateY(-2px); }
.btn:disabled { background-color: #c8c8c8; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary { background-color: var(--primary-red); }
.btn-primary:hover { background-color: #C1302C; }
.btn-primary:disabled:hover { background-color: #c8c8c8; }
.btn:hover { background-color: #0062CC; }
.btn-group { margin-top: 20px; display: flex; gap: 10px; justify-content: flex-end; }

/* --- 表单元素 --- */
.form-section h3 { margin-top: 0; }
.form-section input[type="text"], .form-section input[type="password"], .form-section textarea, .form-section select { width: 100%; padding: 12px; border: 1px solid var(--border-color); background-color: var(--bg-main); border-radius: 10px; margin-bottom: 15px; box-sizing: border-box; font-size: 16px; }
.form-section select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238A8A8E%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 15px top 50%; background-size: 10px auto; }

/* --- 底部导航栏 --- */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 65px; display: flex; justify-content: space-around; align-items: center; background-color: var(--bg-card); border-top: 1px solid var(--border-color); box-shadow: 0 -4px 15px rgba(0,0,0,0.05); z-index: 1000; padding-bottom: env(safe-area-inset-bottom, 5px); }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--text-light); flex-grow: 1; padding: 8px 0; transition: color 0.3s, transform 0.2s; transform: scale(0.95); }
.nav-item i { font-size: 24px; margin-bottom: 4px; }
.nav-item span { font-size: 11px; font-weight: 500; }
.nav-item.active { color: var(--accent-blue); transform: scale(1.05); }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.nav-item.active i { animation: bounce 0.5s; }

/* --- 应用网格图标样式 --- */
.app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 15px; margin-top: 10px; }
.grid-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px 5px; border-radius: 18px; background-color: var(--bg-card); text-align: center; cursor: pointer; transition: transform 0.2s ease-in-out; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); }
.grid-item:hover { transform: translateY(-5px); }
.grid-item .icon-wrapper { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; font-size: 24px; color: white; }
.grid-item .icon-wrapper.bg-blue { background-color: #007AFF; }
.grid-item .icon-wrapper.bg-orange { background-color: #FF9500; }
.grid-item .icon-wrapper.bg-red { background-color: #D93A35; }
.grid-item .icon-wrapper.bg-purple { background-color: #AF52DE; }
.grid-item .icon-wrapper.bg-green { background-color: #34C759; }
.grid-item .icon-wrapper.bg-teal { background-color: #5AC8FA; }
.grid-item span { font-size: 13px; font-weight: 500; color: var(--text-dark); }

/* --- 个人中心 --- */
.profile-header { display: flex; align-items: center; background-color: var(--bg-card); padding: 20px; border-radius: 14px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); }
.profile-avatar { width: 65px; height: 65px; border-radius: 50%; margin-right: 15px; object-fit: cover; border: 2px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.profile-info h3 { margin: 0 0 5px 0; font-size: 20px; font-weight: 600; color: var(--text-dark); }
.profile-info p { margin: 0; font-size: 14px; color: var(--text-light); background-color: var(--bg-main); display: inline-block; padding: 3px 8px; border-radius: 8px; }
.profile-menu { background-color: var(--bg-card); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); margin-bottom: 20px; }
.profile-menu-item { display: flex; align-items: center; padding: 16px; cursor: pointer; transition: background-color 0.2s; border-bottom: 1px solid var(--bg-main); }
.profile-menu-item:last-child { border-bottom: none; }
.profile-menu-item:hover { background-color: #f9f9f9; }
.profile-menu-item i.fas { font-size: 18px; color: var(--text-light); width: 30px; text-align: center; margin-right: 15px; }
.profile-menu-item span { flex-grow: 1; font-size: 16px; color: var(--text-dark); }
.profile-menu-item .fa-chevron-right { font-size: 14px; color: var(--border-color); }
.logout-button { width: 100%; padding: 14px; background-color: #E5E5EA; color: var(--primary-red); border: none; border-radius: 12px; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color 0.3s; margin-top: 20px; }
.logout-button:hover { background-color: #DCDCE1; }

/* --- 注册页和弹窗 --- */
.upload-placeholder { cursor: pointer; border: 2px dashed var(--border-color); border-radius: 12px; padding: 30px; text-align: center; color: var(--text-light); margin-bottom: 15px; background-color: var(--bg-main); }
.upload-placeholder i { font-size: 30px; margin-bottom: 10px; color: var(--accent-blue); }
.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.upload-area { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; background-color: var(--bg-main); }
.upload-area .upload-placeholder { width: 100%; height: 100%; margin-bottom: 0; display: flex; flex-direction: column; justify-content: center; position: absolute; top: 0; left: 0; }
.image-preview { width: 100%; height: 100%; }
.preview-img { width: 100%; height: 100%; object-fit: cover; display: none; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; transition: opacity 0.3s; }
.modal-overlay.visible { opacity: 1; }
.modal-content { background-color: white; padding: 30px; border-radius: 16px; text-align: center; width: 70%; max-width: 300px; transform: scale(0.9); transition: transform 0.3s; }
.modal-overlay.visible .modal-content { transform: scale(1); }
.modal-content p { margin: 15px 0 0 0; font-size: 16px; font-weight: 500; color: var(--text-dark); }
.spinner { width: 40px; height: 40px; border: 4px solid var(--border-color); border-top-color: var(--accent-blue); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- 通行管理 --- */
.access-card { padding: 20px; text-align: center; }
.access-card i.fas { font-size: 32px; margin: 0 auto 10px auto; display: block; color: var(--primary-red); }
.access-card h3 { justify-content: center; font-size: 17px; margin-bottom: 5px; }
.access-card p { padding-left: 0; font-size: 13px; }
.tab-nav { display: flex; border-bottom: 2px solid var(--border-color); margin-bottom: 20px; }
.tab-item { flex-grow: 1; text-align: center; padding: 12px 0; font-size: 16px; font-weight: 500; color: var(--text-light); cursor: pointer; position: relative; border-bottom: 4px solid transparent; transition: color 0.3s; }
.tab-item.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }
.applicant-item { display: flex; align-items: center; padding: 15px; background-color: var(--bg-card); border-radius: 12px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); cursor: pointer; }
.applicant-info { flex-grow: 1; }
.applicant-info h4 { margin: 0 0 5px 0; font-weight: 500; }
.applicant-info p { margin: 0; font-size: 13px; color: var(--text-light); padding-left: 0; }
.applicant-status i.fas { font-size: 24px; }
.applicant-status .fa-check-circle { color: var(--accent-green); }
.applicant-status .fa-times-circle { color: var(--primary-red); }
.applicant-status .fa-chevron-right { color: var(--border-color); }

/* --- 通行码 --- */
.qr-page-container { background-color: var(--bg-card); border-radius: 18px; padding: 25px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.qr-profile { display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.qr-profile .profile-avatar { width: 50px; height: 50px; margin-right: 12px; }
.qr-profile .profile-info h3 { font-size: 18px; }
.qr-profile .profile-info p { font-size: 13px; }
.qr-code-display { padding: 15px; background-color: white; border-radius: 12px; border: 1px solid var(--border-color); display: inline-block; min-width: 200px; min-height: 200px; }
.qr-code-display img { vertical-align: middle; }
.qr-expiry-msg { font-size: 14px; color: var(--text-light); margin: 20px 0 10px 0; }
.qr-countdown { font-size: 36px; font-weight: 600; color: var(--primary-red); font-family: monospace; margin-bottom: 20px; }
.qr-countdown.expired { color: var(--text-light); text-decoration: line-through; }
.btn-refresh { display: inline-flex; align-items: center; gap: 8px; background-color: var(--bg-main); color: var(--text-dark); font-weight: 500; }

/* --- 导航地图 --- */
.map-canvas-wrapper { position: relative; width: 100%; max-width: 500px; margin: 0 auto 15px auto; border-radius: 14px; overflow: hidden; border: 2px solid var(--border-color); box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
#mapCanvas { width: 100%; height: auto; display: block; background-color: #f0f0f0; }
.nav-info { text-align: center; margin-top: 15px; font-size: 16px; font-weight: 500; height: 22px; color: var(--accent-blue); }

/* --- 流动公告栏 --- */
.announcement-bar { display: flex; align-items: center; background-color: #fff7e6; color: #d46b08; padding: 10px 15px; border-radius: 12px; margin-bottom: 20px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.announcement-bar i.fa-volume-high { font-size: 16px; margin-right: 10px; }
.marquee-container { flex-grow: 1; overflow: hidden; white-space: nowrap; }
.marquee-text { display: inline-block; padding-left: 100%; animation: marquee 15s linear infinite; font-size: 14px; font-weight: 500; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* --- AI审查合同结果 --- */
.file-name-display { background-color: var(--bg-main); border-radius: 8px; padding: 10px 15px; font-size: 14px; color: var(--text-light); margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
#review-output { margin-top: 25px; }
.review-result-container { background-color: var(--bg-card); border-radius: 14px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); }
.warning-item { border-left: 4px solid var(--primary-red); padding-left: 15px; margin-bottom: 20px; }
.warning-item:last-child { margin-bottom: 0; }
.clause-title { font-weight: 600; color: var(--text-dark); margin-bottom: 5px; display: flex; align-items: center; }
.clause-title i { margin-right: 8px; color: var(--primary-red); }
.clause-explanation { font-size: 14px; color: var(--text-light); line-height: 1.6; }
/* --- 新增：社区活动卡片样式 --- */

.activity-card {
    background-color: var(--bg-card);
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
    overflow: hidden; /* 保证内部图片也被裁切为圆角 */
    cursor: default;
    transition: transform 0.3s, box-shadow 0.3s;
}
.activity-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.activity-card-image {
    width: 100%;
    aspect-ratio: 16 / 9; /* 保持图片16:9的比例 */
    object-fit: cover; /* 图片不变形地填满容器 */
}

.activity-card-content {
    padding: 15px;
    position: relative;
}

.activity-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 10px 0;
}

.activity-card-meta {
    font-size: 13px;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    gap: 5px; /* 元数据行间距 */
}

.activity-card-meta span {
    display: flex;
    align-items: center;
}

.activity-card-meta i.fas {
    margin-right: 8px;
    width: 15px;
    text-align: center;
}

.activity-status-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    color: white;
}
.activity-status-badge.status-open {
    background-color: var(--accent-green);
}
.activity-status-badge.status-closed {
    background-color: var(--text-light);
}

/* 覆盖 .list-item 的一些样式，让卡片内部按钮组更好看 */
.activity-card-content .list-item {
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
}

/* --- 新增：AI监控仪表盘样式 --- */

.dashboard-container {
    padding: 0; /* AI监控页面不需要外边距 */
}

.dashboard-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.stat-box-large {
    background-color: rgba(0, 122, 255, 0.1);
    border: 1px solid rgba(0, 122, 255, 0.2);
    padding: 15px;
    border-radius: 12px;
    text-align: center;
}

.stat-title {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.stat-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--accent-blue);
    font-family: monospace;
    transition: transform 0.3s ease, color 0.3s ease;
}

.stat-value.danger {
    color: var(--primary-red);
}

.dashboard-panel {
    background-color: var(--bg-card);
    border-radius: 14px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    height: 300px; /* 给图表一个默认高度 */
}

.panel-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--text-dark);
}

.panel-content {
    height: calc(100% - 30px);
}

#population-flow-chart,
#population-composition-chart {
    width: 100%;
    height: 100%;
}

.realtime-log-list {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 100%;
    overflow-y: auto;
    font-size: 13px;
}
.realtime-log-list li {
    padding: 8px 5px;
    border-bottom: 1px solid var(--bg-main);
    display: flex;
    justify-content: space-between;
}
.realtime-log-list li:last-child {
    border-bottom: none;
}
.log-time {
    color: var(--text-light);
    margin-right: 10px;
    font-family: monospace;
}
.log-event-in {
    color: var(--accent-green);
    text-align: right;
    flex-grow: 1;
}
.log-event-out {
    color: var(--primary-red);
    text-align: right;
    flex-grow: 1;
}

#risk-alert-list .log-event-out {
    text-align: left;
}

/* AI合同审查页面优化样式 */
.ai-contract-section {
    max-width: 420px;
    margin: 0 auto 30px auto;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.07);
    padding: 28px 18px 22px 18px;
}
.ai-upload-block {
    margin-bottom: 10px;
}
.ai-upload-label {
    padding: 32px 0 28px 0;
    font-size: 17px;
    border-radius: 14px;
    border: 2px dashed var(--border-color);
    background: var(--bg-main);
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color 0.3s;
    margin-bottom: 12px;
}
.ai-upload-label:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}
.ai-upload-label i {
    font-size: 36px;
    margin-bottom: 10px;
    color: var(--accent-blue);
}
.ai-review-btn {
    font-size: 18px;
    padding: 14px 0;
    margin-top: 10px;
    border-radius: 10px;
}
.ai-review-output {
    margin-top: 32px;
    margin-bottom: 10px;
}
@media (max-width: 600px) {
    .ai-contract-section {
        padding: 18px 4vw 18px 4vw;
        max-width: 98vw;
    }
    .ai-review-btn { font-size: 16px; }
}

/* --- 积分奖励页面优化 --- */
.card-gradient {
    background: linear-gradient(135deg, var(--primary-blue), #4e9aff);
    color: white;
    text-align: center;
    padding: 20px;
}
.points-display small {
    display: block;
    font-size: 16px;
    opacity: 0.8;
    margin-bottom: 5px;
}
.points-display h2 {
    font-size: 48px;
    margin: 0;
    font-weight: 700;
}
.a-2-col {
    grid-template-columns: repeat(2, 1fr);
}
.grid-item.large-icon .icon-wrapper {
    width: 60px;
    height: 60px;
    font-size: 28px;
    margin-bottom: 12px;
}
.grid-item.large-icon {
    flex-direction: column;
    height: auto;
    padding: 20px 10px;
}
.grid-item.large-icon span {
    font-size: 16px;
    font-weight: 500;
}
.grid-item.large-icon small {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 4px;
}

/* --- 积分兑换页面优化 --- */
.announcement-bar.small {
    padding: 8px 12px;
    font-size: 13px;
}
.announcement-bar.small .fa-bullhorn {
    margin-right: 8px;
}
.gift-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.gift-card {
    background-color: var(--bg-surface);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}
.gift-card-img-wrapper {
    width: 100%;
    height: 120px; /* 控制图片高度 */
    background-color: #f0f0f0;
}
.gift-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片不变形 */
}
.gift-card-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.gift-card-title {
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 5px 0;
    color: var(--text-main);
}
.gift-card-meta {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 8px;
}
.gift-card-points {
    font-size: 16px;
    font-weight: bold;
    color: var(--accent-yellow);
    margin-bottom: 10px;
}
.gift-card-points .fa-coins {
    margin-right: 4px;
}
.gift-card .btn {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    margin-top: auto; /* 将按钮推到底部 */
}
.btn-disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    border-color: #ccc;
}