/* profile.css */
/* ==================================
   歆爱AI - 个人主页 "星尘棱镜" 主题
   ================================== */

/* ====== 1. 全局与字体设置 ====== */
:root {
    --primary-glow-color: #f92a82;  /* 品红辉光 */
    --secondary-glow-color: #00e5ff; /* 青色辉光 */
    --panel-bg-color: rgba(18, 12, 45, 0.6); /* 面板背景色 */
    --panel-border-color: rgba(249, 42, 130, 0.3); /* 面板边框色 */
    --text-color: #e0e0e0;
    --text-color-light: #ffffff;
    --text-color-muted: #a0a0c0;
    --font-primary: 'Noto Sans SC', sans-serif;
    --font-secondary: 'Orbitron', sans-serif; /* 科幻数字/标题字体 */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #05061a; /* 深邃宇宙蓝黑色 */
    color: var(--text-color);
    font-family: var(--font-primary);
    overflow: hidden; /* 隐藏body滚动条，由内部容器滚动 */
}

/* ====== 2. 动态背景 ====== */
.background-vortex {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}

@keyframes animStar {
  from { transform: translateY(0px); }
  to { transform: translateY(-2000px); }
}

/* 为了纯CSS实现，我们预定义box-shadow */
#stars, #stars2, #stars3 {
    position: absolute;
    width: 1px;
    height: 1px;
    background: transparent;
    animation-iteration-count: infinite;
}

#stars {
    animation-name: animStar;
    animation-duration: 50s;
    animation-timing-function: linear;
    box-shadow: 793px 1969px #FFF, 1515px 1563px #FFF, 888px 1243px #FFF, 755px 788px #FFF, 1690px 1157px #FFF, 1311px 1656px #FFF, 1238px 1133px #FFF, 1146px 632px #FFF, 1445px 1869px #FFF, 24px 1032px #FFF, 1060px 1989px #FFF, 128px 1473px #FFF, 1888px 1381px #FFF, 649px 1289px #FFF, 793px 1828px #FFF, 1485px 174px #FFF, 1331px 648px #FFF, 1475px 156px #FFF, 1878px 1195px #FFF, 549px 1569px #FFF, 1493px 1485px #FFF, 1198px 1184px #FFF, 185px 843px #FFF, 59px 1279px #FFF, 112px 1419px #FFF, 1374px 1761px #FFF, 1342px 1335px #FFF, 1420px 886px #FFF, 881px 164px #FFF, 1211px 26px #FFF;
}
#stars2 {
    animation-name: animStar;
    animation-duration: 100s;
    animation-timing-function: linear;
    box-shadow: 1943px 1642px #FFF, 281px 37px #FFF, 1555px 1387px #FFF, 143px 1198px #FFF, 1347px 111px #FFF, 34px 1629px #FFF, 1136px 1418px #FFF, 1827px 1018px #FFF, 353px 432px #FFF, 1180px 189px #FFF, 71px 935px #FFF, 1404px 578px #FFF, 929px 748px #FFF, 1530px 154px #FFF, 881px 696px #FFF, 1318px 233px #FFF, 1182px 1435px #FFF, 908px 649px #FFF, 740px 1015px #FFF, 252px 643px #FFF, 1269px 731px #FFF, 1362px 1493px #FFF, 471px 969px #FFF, 1547px 1066px #FFF, 599px 160px #FFF, 1912px 1391px #FFF, 549px 1902px #FFF, 1177px 1699px #FFF, 502px 135px #FFF, 1585px 941px #FFF;
}
#stars3 {
    animation-name: animStar;
    animation-duration: 150s;
    animation-timing-function: linear;
    box-shadow: 171px 644px #FFF, 151px 34px #FFF, 1394px 512px #FFF, 1363px 1462px #FFF, 1822px 1356px #FFF, 1294px 1729px #FFF, 1913px 463px #FFF, 1192px 1709px #FFF, 48px 1619px #FFF, 1076px 1003px #FFF, 1215px 441px #FFF, 1805px 1393px #FFF, 1807px 1010px #FFF, 1139px 923px #FFF, 1243px 1819px #FFF, 1573px 1500px #FFF, 1836px 1239px #FFF, 1397px 143px #FFF, 32px 1493px #FFF, 735px 418px #FFF;
}

/* ====== 3. 页面布局与导航栏 ====== */
.page-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow: hidden;
    position: relative; /* 老师批注：必须添加position，z-index才能生效 */
    z-index: 1;         /* 老师批注：设置一个基础的层级 */
}


.profile-header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    flex-shrink: 0;
}

.nav-btn, .nav-icon-btn {
    background: transparent;
    border: 1px solid var(--panel-border-color);
    color: var(--text-color-light);
    border-radius: 50px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    backdrop-filter: blur(5px);
}
.nav-icon-btn {
    padding: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-actions { display: flex; gap: 10px; }
.nav-btn:hover, .nav-icon-btn:hover {
    background-color: var(--primary-glow-color);
    border-color: var(--primary-glow-color);
    box-shadow: 0 0 15px var(--primary-glow-color);
}
.nav-btn i { margin-right: 8px; }

/* ====== 4. 主内容区 ====== */
.profile-content {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-right: 10px; /* 为滚动条留出空间 */
}

/* profile.css */
/* 美化滚动条 */
.profile-content::-webkit-scrollbar { width: 6px; }
.profile-content::-webkit-scrollbar-track { background: transparent; }
.profile-content::-webkit-scrollbar-thumb {
    /* ▼▼▼ 老师批注：修改这里的背景颜色 ▼▼▼ */
    background: transparent; /* 默认完全透明 */
    border-radius: 3px;
    transition: background 0.3s ease; /* 增加一个颜色过渡动画 */
}

/* ▼▼▼ 老师批注：新增一个鼠标悬浮效果，让交互更友好 ▼▼▼ */
.profile-content:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2); /* 当鼠标在整个内容区时，显示滚动条 */
}

.profile-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4); /* 当鼠标直接在滚动条上时，变得更亮 */
}


/* 入场动画 */
.profile-core, .profile-details-panel, .works-panel {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}
.profile-details-panel { animation-delay: 0.2s; }
.works-panel { animation-delay: 0.4s; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ====== 5. 个人信息核心区 (Profile Core) ====== */
.profile-core {
    background: var(--panel-bg-color);
    border-radius: 16px;
    border: 1px solid var(--panel-border-color);
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 40px rgba(249, 42, 130, 0.1);
    position: relative;
}

.avatar-hexagon-container {
    position: relative;
    margin-bottom: 20px;
}
.avatar-hexagon {
    width: 120px;
    height: 138px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(145deg, var(--primary-glow-color), var(--secondary-glow-color));
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}
.avatar-hexagon:hover {
    transform: scale(1.05);
}
.avatar-image {
    width: 112px;
    height: 129px;
    background-size: cover;
    background-position: center;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.edit-avatar-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}
.edit-avatar-btn:hover {
    background: var(--primary-glow-color);
    box-shadow: 0 0 10px var(--primary-glow-color);
}

.user-identity { text-align: center; margin-bottom: 25px; }
.profile-name {
    font-family: var(--font-secondary);
    font-size: 28px;
    color: var(--text-color-light);
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-shadow: 0 0 10px var(--primary-glow-color);
}
.profile-tagline {
    font-size: 14px;
    color: var(--text-color-muted);
}

.user-stats-grid {
    display: grid;
    /* 老师批注：把 repeat(1, 1fr) 修改为 repeat(3, 1fr)，让网格变成三列 */
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
    /* 老师批注：根据格子数量和间距，可以适当增加最大宽度 */
    max-width: 450px; 
    margin-bottom: 25px;
}

.stat-item-hexagon {
    /* 我们去掉了 clip-path 和过大的 padding */
    background: rgba(0, 0, 0, 0.2); /* 使用一个更融入背景的颜色 */
    border-radius: 12px; /* 设置圆角，和我们其他组件保持一致 */
    padding: 15px; /* 统一的内边距 */
    text-align: center;
    border: 1px solid rgba(0, 229, 255, 0.2); /* 边框也调得更柔和 */
    transition: all 0.3s ease;
    
    /* 使用 Flexbox 进行垂直居中布局 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px; /* 在标题和数值之间创建一点空隙 */
    min-height: 85px; /* 设置一个最小高度保证三个卡片一样高 */
}

.stat-item-hexagon:hover {
    transform: translateY(-4px); /* 向上浮动更多，感觉更轻盈 */
    background: rgba(0, 229, 255, 0.1);
    border-color: var(--secondary-glow-color); /* 悬浮时边框变亮 */
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.4); /* 光晕效果也增强一点 */
}

.stat-label {
    display: block;
    font-size: 13px; /* 稍微大一点点，更清晰 */
    color: var(--text-color-muted); /* 使用柔和的文字颜色 */
    margin-bottom: 0; /* 我们用gap了，所以不需要这个了 */
}
.stat-value {
    display: block;
    font-family: var(--font-secondary);
    font-size: 20px; /* 稍微小一点，更协调 */
    font-weight: 700; /* 加粗，突出数字 */
    color: var(--text-color-light);
    line-height: 1.2; /* 优化行高 */
}

.edit-profile-btn {
    background: transparent;
    border: 1px solid var(--primary-glow-color);
    color: var(--primary-glow-color);
    padding: 10px 25px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}
.edit-profile-btn:hover {
    background: var(--primary-glow-color);
    color: white;
    box-shadow: 0 0 15px var(--primary-glow-color);
}
.edit-profile-btn i { margin-right: 8px; }

/* ====== 6. 简介与邀请链接区 (Details Panel) ====== */
.profile-details-panel {
    background: var(--panel-bg-color);
    border-radius: 16px;
    border: 1px solid var(--panel-border-color);
    padding: 25px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 40px rgba(249, 42, 130, 0.1);
}
.panel-section:not(:last-child) { margin-bottom: 25px; }
.panel-section h3 {
    font-size: 16px;
    color: var(--text-color-light);
    margin-bottom: 10px;
    border-left: 3px solid var(--primary-glow-color);
    padding-left: 10px;
}
.panel-section h3 i { margin-right: 8px; color: var(--primary-glow-color); }
.panel-section p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-color-muted);
}
.invite-link-container {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.invite-link-container:hover {
    border-color: var(--primary-glow-color);
    background: rgba(249, 42, 130, 0.1);
}
.invite-link-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    color: var(--text-color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.invite-link-container i { color: var(--text-color-muted); transition: color 0.3s ease; }
.invite-link-container:hover i { color: var(--primary-glow-color); }


/* ====== 7. 作品集区 (Works Panel) ====== */
.works-panel {
    background: var(--panel-bg-color);
    border-radius: 16px;
    border: 1px solid var(--panel-border-color);
    padding: 25px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 40px rgba(249, 42, 130, 0.1);
    display: flex;
    flex-direction: column;
}

.works-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}
.works-header h2 {
    font-size: 20px;
    color: var(--text-color-light);
}
.works-header h2 i { margin-right: 10px; color: var(--primary-glow-color); }
.tab-controls {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 4px;
}
.tab-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-color-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}
.tab-btn.active {
    background-color: var(--primary-glow-color);
    color: white;
    box-shadow: 0 0 10px var(--primary-glow-color);
}

.works-content-area {
    flex-grow: 1;
    min-height: 250px;
    display: flex;
    flex-direction: column;
}
.tab-content { display: none; height: 100%; flex-direction: column;}
.tab-content.active { display: flex; }
.works-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
    overflow-y: auto;
}
.work-list-item {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}
/* profile.css */
.work-list-item:hover {
    background: rgba(249, 42, 130, 0.1);
    border-left-color: var(--primary-glow-color);
    transform: translateY(-2px); /* 向上平移2像素，制造一个轻微上浮的效果 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 再加一点阴影，增强立体感 */
}


.work-list-title { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
.work-list-meta { display: flex; gap: 20px; font-size: 12px; color: var(--text-color-muted); }
.work-list-meta i { margin-right: 5px; }
.work-list-status { color: var(--secondary-glow-color); }
.work-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.work-action-btn:hover {
    background: var(--secondary-glow-color);
    color: white;
    box-shadow: 0 0 10px var(--secondary-glow-color);
}
.empty-placeholder { text-align: center; padding: 40px; color: var(--text-color-muted); }
.empty-placeholder i { font-size: 30px; margin-bottom: 10px; display: block; }

.load-more-btn {
    align-self: center;
    margin-top: 20px;
    background: transparent;
    border: 1px solid var(--secondary-glow-color);
    color: var(--secondary-glow-color);
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.load-more-btn:hover {
    background: var(--secondary-glow-color);
    color: white;
    box-shadow: 0 0 15px var(--secondary-glow-color);
}

/* ====== 8. 模态框适配新主题 ====== */
/* profile.css */

/* 老师批注：这是模态框的默认基础样式，默认是看不见的 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* 使用flex布局方便居中 */
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    
    /* ▼▼▼ 关键修改 ▼▼▼ */
    opacity: 0; /* 默认完全透明 */
    visibility: hidden; /* 默认隐藏，无法交互 */
    z-index: 9999; /* 给一个非常高的层级，确保在最顶层 */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* 添加过渡动画 */
    backdrop-filter: blur(10px); /* 这个是你的酷炫效果，保留 */
}

/* 老师批注：这是当模态框需要“显示”时的样式 */
.modal.show {
    opacity: 1; /* 变为不透明 */
    visibility: visible; /* 变为可见 */
}

/* 老师批注：这是模态框内部内容的样式，基本保持不变 */
.modal-content {
    background: linear-gradient(145deg, #100828, #1c103c);
    border: 1px solid var(--panel-border-color);
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    transform: translateY(-20px);
    transition: transform 0.3s ease-out;

    /* ▼▼▼ 老师批注：新增的宽度和布局规则 ▼▼▼ */
    width: 90%; /* 在小屏幕上宽度为90% */
    max-width: 700px; /* 但最大宽度不超过700px */
    border-radius: 12px; /* 加个圆角 */
    overflow: hidden; /* 防止内部元素意外溢出 */
}

/* 老师批注：让模态框的身体部分使用flex布局 */
.modal-body {
    display: flex;
    padding: 25px 30px; /* 调整一下内边距 */
}

/* 老师批注：让登录表单占据剩余空间 */
#loginForm {
    flex-grow: 1; /* 占据所有可用的剩余空间 */
}

/* 老师批注：当模态框显示时，让内容回到原位 */
.modal.show .modal-content {
    transform: translateY(0);
}


.modal-content {
    background: linear-gradient(145deg, #100828, #1c103c);
    border: 1px solid var(--panel-border-color);
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}
.modal-header { border-bottom-color: rgba(255,255,255,0.1); }
.modal-footer { border-top-color: rgba(255,255,255,0.1); }
input, textarea {
    background: rgba(0,0,0,0.3);
    border-color: rgba(255,255,255,0.2);
}
input:focus, textarea:focus {
    border-color: var(--primary-glow-color);
    background: rgba(0,0,0,0.4);
}
.primary-btn, .save-btn {
    background: var(--primary-glow-color);
    border: none;
}
.primary-btn:hover, .save-btn:hover {
    box-shadow: 0 0 15px var(--primary-glow-color);
}
.text-btn {
    color: var(--secondary-glow-color);
}
.cancel-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
}
#submitRegisterBtn:disabled {
    background: #555;
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}
.send-code-btn {
    background: var(--secondary-glow-color);
    color: #05061a;
    border: none;
}
.send-code-btn:hover:not(:disabled) {
    box-shadow: 0 0 15px var(--secondary-glow-color);
}
.send-code-btn:disabled {
    background: #555;
    color: #999;
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* ====== 10. 额外功能样式（如主题面板） ====== */
.theme-panel {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 280px;
    background: rgba(30, 20, 50, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 1001; /* 老师批注：比模态框还高一点，确保它能覆盖所有东西 */
    overflow: hidden;
    transform: translateY(-20px) scale(0.95);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-panel.show {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}

.theme-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.1);
}

.theme-panel-header h3 {
    font-size: 16px;
    margin: 0;
    color: #fff;
}

.close-panel {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 16px;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 20px;
}

.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 8px;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.theme-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.theme-option.active {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.theme-preview {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.theme-option span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

/* 主题预览颜色 */
.theme-preview.purple-theme { background: linear-gradient(135deg, #432d7e, #6a3a9c); }
.theme-preview.blue-theme { background: linear-gradient(135deg, #154a90, #2a7ac0); }
.theme-preview.pink-theme { background: linear-gradient(135deg, #b03a79, #e04c94); }
.theme-preview.cyber-theme { background: linear-gradient(135deg, #0a1a2f, #17324d); }
.theme-preview.dark-theme { background: linear-gradient(135deg, #121212, #2d2d2d); }

/* ====== 11. 用户协议模态框样式 ====== */
.agreement-modal-content {
    max-width: 800px; /* 可以适当加宽以显示协议 */
    width: 90%;
    max-height: 80vh; /* 限制最大高度 */
    display: flex;
    flex-direction: column;
}

.agreement-modal-body {
    flex-grow: 1; /* 让内容区域填充剩余空间 */
    overflow-y: auto; /* 内容超长时滚动 */
    padding: 15px 25px; /* 内边距 */
    line-height: 1.7;
    font-size: 14px;
    color: var(--text-color-muted);
}

.agreement-modal-body h1, 
.agreement-modal-body h2 {
    color: var(--text-color-light);
    border-bottom: 1px solid var(--panel-border-color);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.agreement-modal-body strong {
    color: var(--primary-glow-color);
}

.agreement-modal-body ul, 
.agreement-modal-body ol {
    padding-left: 20px;
}
/* 老师批注：专门为登录/注册模态框里的插图添加样式 */
.login-illustration {
    flex-shrink: 0; /* 防止在flex布局中被压缩 */
    width: 180px;   /* 给插图容器一个固定的宽度 */
    margin-right: 20px; /* 和右边的表单留出一些间距 */
}

.login-illustration img {
    width: 100%;      /* 让图片宽度充满它的容器(.login-illustration) */
    max-width: 100%;  /* 这是关键！确保图片最宽就是100%，不会溢出 */
    height: auto;     /* 高度自动调整，保持图片原始比例 */
    border-radius: 8px; /* 给图片加个圆角，更好看 */
    display: block;   /* 消除图片底部的微小间距 */
}
/* ==================================
   老师批注：模态框深度美化样式
   ================================== */

/* 1. 模态框标题美化 */
/* profile.css */
/* 1. 模态框标题美化 */

/* ▼▼▼ 老师批注：新增/修改的代码从这里开始 ▼▼▼ */
.modal-header {
    position: relative; /* 让关闭按钮可以相对于它定位 */
    padding: 20px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center; /* 让内部的 h3 标题居中 */
}
/* ▲▲▲ 老师批注：新增/修改的代码到这里结束 ▲▲▲ */


.modal-header h3 {
    font-family: var(--font-secondary);
    font-size: 24px;
    color: var(--text-color-light);
    text-shadow: 0 0 8px var(--primary-glow-color);
    letter-spacing: 1px;
}

.close-modal {
    /* ▼▼▼ 老师批注：新增/修改的代码从这里开始 ▼▼▼ */
    position: absolute; /* 使用绝对定位 */
    top: 15px;          /* 距离顶部15px */
    right: 15px;        /* 距离右侧15px */
    /* ▲▲▲ 老师批注：新增/修改的代码到这里结束 ▲▲▲ */

    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color-muted);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}


.close-modal:hover {
    background: var(--primary-glow-color);
    color: white;
    border-color: var(--primary-glow-color);
    box-shadow: 0 0 10px var(--primary-glow-color);
    transform: rotate(90deg);
}

/* 2. 表单元素（输入框、标签）美化 */
.form-group {
    margin-bottom: 20px; /* 增加组间距 */
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-color-muted);
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon i {
    position: absolute;
    left: 15px;
    color: var(--text-color-muted);
    font-size: 14px;
    transition: color 0.3s ease;
}

.input-with-icon input {
    width: 100%;
    /* 这个规则可以删掉，或者注释掉，因为下面有更通用的规则 */
    /* padding-left: 40px; */
}

/* 输入框聚焦时，图标也变色 */
.input-with-icon input:focus + i,
.input-with-icon:focus-within i {
    color: var(--primary-glow-color);
}

/* 密码框的“眼睛”图标 */
.toggle-password {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    width: 40px;
    background: transparent;
    border: none;
    color: var(--text-color-muted);
    cursor: pointer;
    transition: color 0.3s ease;
}

.toggle-password:hover {
    color: var(--primary-glow-color);
}

/* 输入框通用样式 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea {
    width: 100%;
    /* ▼▼▼ 老师批注：修改这一行 ▼▼▼ */
    padding: 10px 40px; /* 左右各留40px内边距，给图标让位 */
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color);
    font-size: 14px;
    transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
textarea:focus {
    background: rgba(0, 0, 0, 0.4);
    border-color: var(--primary-glow-color);
    box-shadow: 0 0 10px rgba(249, 42, 130, 0.5);
    outline: none;
}

/* 错误提示信息 */
.error-message {
    color: #ff6b6b;
    font-size: 12px;
    margin-top: 5px;
    min-height: 16px; /* 占据固定高度，防止布局跳动 */
}

/* 3. 注册页特殊样式 */
.input-with-button {
    display: flex;
    gap: 10px;
}

.input-with-button .input-with-icon {
    flex-grow: 1;
}

.send-code-btn {
    flex-shrink: 0; /* 防止按钮被压缩 */
    padding: 0 20px;
    border-radius: 6px;
    border: none;
    background: var(--secondary-glow-color);
    color: #05061a;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.send-code-btn:hover:not(:disabled) {
    box-shadow: 0 0 15px var(--secondary-glow-color);
}
.send-code-btn:disabled {
    background: #555;
    color: #999;
    opacity: 0.6;
    cursor: not-allowed;
}

.status-message {
    font-size: 12px;
    color: var(--secondary-glow-color);
    margin-top: 5px;
    min-height: 16px;
}

/* 协议部分 */
.agreement-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.agreement-line {
    display: flex;
    align-items: center;
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    accent-color: var(--primary-glow-color); /* 让勾选框颜色跟随主题 */
}

.agreement-link {
    color: var(--secondary-glow-color);
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.3s ease;
}

.agreement-link:hover {
    color: var(--primary-glow-color);
}

.confirmation-message {
    font-size: 12px;
    color: #00ff7f; /* 绿色 */
    margin-top: 5px;
    min-height: 16px;
}

/* 4. 模态框底部按钮区 */
.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 主操作按钮 (登录, 注册) */
.primary-btn {
    padding: 10px 30px;
    border-radius: 6px;
    border: none;
    background: var(--primary-glow-color);
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.primary-btn:hover:not(:disabled) {
    box-shadow: 0 0 15px var(--primary-glow-color);
    transform: translateY(-2px);
}
.primary-btn:disabled {
    background: #555;
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* 次要文本按钮 (注册账号, 返回登录, 忘记密码) */
.text-btn {
    background: none;
    border: none;
    color: var(--text-color-muted);
    cursor: pointer;
    transition: color 0.3s ease;
}
.text-btn:hover {
    color: var(--secondary-glow-color);
    text-decoration: underline;
}

/* 登录框底部三按钮布局 */
#loginModal .modal-footer {
    justify-content: space-between;
}

/* 注册框底部双按钮布局 */
#registerModal .modal-footer {
    justify-content: space-between;
}

/* ==================================
   老师批注：可滚动模态框 & 滚动条美化
   ================================== */

/* 1. 限制模态框外壳的最大高度，并启用Flex布局 */
.modal-content {
    /* ▼▼▼ 老师批注：新增/修改的代码从这里开始 ▼▼▼ */
    max-height: 85vh; /* 设置最大高度为视窗高度的85% */
    display: flex; /* 启用Flexbox布局 */
    flex-direction: column; /* 设置主轴为垂直方向 */
    /* ▲▲▲ 老师批注：新增/修改的代码到这里结束 ▲▲▲ */
}

/* 2. 让内容区可以滚动 */
.modal-body {
    /* ▼▼▼ 老师批注：新增/修改的代码从这里开始 ▼▼▼ */
    overflow-y: auto;  /* 当内容垂直方向溢出时，自动显示滚动条 */
    flex-grow: 1;      /* 让内容区占据所有可用的剩余空间 */
    
    /* 优化一下内边距，给滚动条留出空间 */
    padding: 25px 20px 25px 30px; /* 右内边距稍微减小 */
    /* ▲▲▲ 老师批注：新增/修改的代码到这里结束 ▲▲▲ */
}

/* 3. 美化滚动条，让它符合我们的主题 */
.modal-body::-webkit-scrollbar {
  width: 6px; /* 滚动条的宽度 */
}

.modal-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2); /* 滚动条轨道的颜色 */
  border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb {
  background-color: var(--primary-glow-color); /* 滚动条滑块的颜色 */
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.5);
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--secondary-glow-color); /* 鼠标悬浮时滑块的颜色 */
}

/* ====== 老师批注：个人卡片上传区域样式 ====== */

.card-image-preview-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* 保持16:9的宽高比，很适合做卡片背景 */
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 隐藏超出部分的图片 */  
}

.card-image-preview {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-muted);
    font-size: 14px;
}

#uploadCardImageBtn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    padding: 8px 15px;
    border-radius: 6px;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

#uploadCardImageBtn i {
    margin-right: 8px;
}

#uploadCardImageBtn:hover {
    background: var(--primary-glow-color);
    border-color: var(--primary-glow-color);
    box-shadow: 0 0 10px var(--primary-glow-color);
}

/* 登录/注册 表单里的 `发送验证码` 按钮 */
.input-with-button .send-code-btn {
    flex-shrink: 0;
    padding: 0 20px;
    border-radius: 6px;
    border: none;
    background: var(--secondary-glow-color);
    color: #05061a;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* ▼▼▼ 老师批注：在这里添加新复制按钮的样式 ▼▼▼ */
/* 设置模态框里输入框右侧的 `复制` 按钮 */
.input-with-button .copy-btn-addon {
    flex-shrink: 0;
    width: 45px; /* 固定宽度 */
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color-muted);
    cursor: pointer;
    transition: all 0.3s ease;
}
.input-with-button .copy-btn-addon:hover {
    background: var(--primary-glow-color);
    border-color: transparent;
    color: white;
}