* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', sans-serif; background: #f8f9fa; color: #333; line-height: 1.6; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }

.footer-email { color: #f1f1f1; background: rgba(255,255,255,0.02); padding: 2px 6px; border-radius: 4px; text-decoration: none; }

/* .notice .contact a { color: #0056b3; text-decoration: none; } */

header { background: #007bff; color: white; padding: 30px 0; text-align: center; }
header h1 { font-size: 2.5rem; }
header p { font-size: 1.2rem; margin: 10px 0; }

.notice { background: rgba(255,255,255,0.95); color: #333; margin: 18px auto 0; padding: 18px; border-radius: 10px; max-width: 1000px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.notice p { margin: 8px 0; font-size: 1rem; }
.notice-img { margin: 12px 0; text-align: center; }
.notice-img img { max-width: 720px; width: 100%; height: auto; border-radius: 8px; display: inline-block; }
.contact a { color: #0056b3; text-decoration: underline; }

.category { margin: 40px 0; }
.category h2 { font-size: 1.8rem; margin-bottom: 20px; color: #007bff; border-bottom: 2px solid #007bff; padding-bottom: 10px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
.card { background: white; padding: 20px; text-align: center; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; text-decoration: none; color: #333; font-weight: bold; text-transform: uppercase; }
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }

@media (min-width: 900px) {
    .card { padding: 22px; font-size: 0.95rem; }
}

.back-btn { display: inline-block; margin: 20px 0; padding: 10px 20px; background: #007bff; color: white; border-radius: 5px; text-decoration: none; }
.warning { text-align: center; color: #e74c3c; font-weight: bold; margin: 30px 0; }

footer { background: #343a40; color: white; text-align: center; padding: 20px 0; margin-top: 50px; }

@media (max-width: 768px) {
    .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    header h1 { font-size: 2rem; }
}

/* Modal 公告样式 */
.modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); z-index: 1000; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal { background: #fff; color: #222; width: 100%; max-width: 560px; border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,0.28); overflow: hidden; }
.modal h3 { margin: 16px 20px 0; font-size: 1.25rem; color: #007bff; }
.modal-body { padding: 12px 20px 4px; font-size: 0.98rem; }
.modal .notice-img { margin: 12px 0; text-align: center; }
.modal .notice-img img { max-width: 420px; width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto; }
.modal .contact a { color: #0056b3; text-decoration: underline; }
.modal-actions { padding: 12px 20px 20px; text-align: center; }
.btn { display: inline-block; padding: 10px 18px; background: #007bff; color: #fff; border-radius: 8px; border: none; cursor: pointer; font-size: 1rem; }
.btn:active { transform: translateY(1px); }

@media (max-width: 480px) {
    .modal { max-width: 100%; border-radius: 10px; }
    .modal h3 { font-size: 1.05rem; }
    .modal-body { padding: 10px 14px; }
    .modal-actions { padding: 10px 14px 18px; }
}