/* 基本排版与配色 */
* { box-sizing: border-box; margin:0; padding:0; font-family: "Times New Roman", serif; }
:root {
  --purple:#4E2A84;
  --purple-dark:#3a1c63;
  --gold:#D4AF37;
  --white:#ffffff;
}
html,body { height:100%; background:#fff; color:var(--purple); }
.site-frame { min-height:100vh; display:flex; flex-direction:column; align-items:center; }

/* 顶底统一封边 */
.border-top { position:fixed; top:0; left:0; right:0; height:56px; background:var(--purple); border-bottom:4px solid var(--gold); z-index:999; }
.border-bottom { position:fixed; bottom:0; left:0; right:0; height:64px; background:var(--purple); border-top:3px solid var(--gold); z-index:999; }

/* 四角小元素（徽章、格言、签名） */
.corner { position:fixed; z-index:1000; color:#eee; font-size:12px; }
.corner.top-left {
  top: 8px;                /* 向上贴近紫色边框 */
  left: 10px;              /* 轻微靠内，保证视觉平衡 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;            /* 稍大一点，内部容纳头像 */
  width: 40px;
  background-color: var(--purple);
  overflow: hidden;        /* 避免头像溢出 */
  z-index: 1001;           /* 保证在边框上层 */
}

.corner.top-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.corner.top-right { top:13px; right:20px; color:white; font-weight:600; font-size:18px; }
.corner.bottom-left { bottom:22px; left:20px; font-style:italic; color:#fff; }
.corner.bottom-right {
    bottom: 16px; 
    right: 32px; /* 定位到右下角 */
    transform: scale(0.6); /* 只缩放，不需要平移了 */
    transform-origin: bottom right; /* 从右下角开始缩放 */
}
/* hero 全屏 */
.hero { width:100%; height:100vh; display:flex; align-items:center; justify-content:center; background:#fff; text-align:center; position:relative; }
.hero .hero-image { width:100%; height:100%; object-fit:cover; display:block; }
.hero-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; background:linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.05)); }
.hero-logo {
  width:min(280px,40vw);
  max-height:35vh;
  object-fit:contain;
  transform: scale(1);
  transition: transform 0.6s ease-in-out;
}

.hero-logo:hover {
  transform: scale(1.05); /* 鼠标悬停略微放大 */
}

/* call to action area */
.cta { display:flex; flex-direction:column; gap:20px; align-items:center; margin-top:20px; }
.cta .big-btn { width:320px; height:84px; border-radius:12px; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .18s ease; }
.cta .login { background: #ffffff; color: var(--purple); border: 4px solid var(--purple); }
.cta .signup { background:#3a1c63; color:var(--gold); border:4px solid var(--gold); }
.cta .big-btn:hover { transform:scale(1.04); }

/* 主体 container */
.main { max-width:1200px; width:100%; padding:90px 20px 120px; margin:0 auto; display:none; flex-direction:column; align-items:center; gap:28px; }
.main.active { display:flex; }

/* 页面卡片 */
.card { background:rgba(255,255,255,0.94); border-radius:14px; padding:28px; box-shadow:0 8px 28px rgba(0,0,0,0.12); width:100%; max-width:960px; }

/* dashboard buttons */
.dash-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; width:100%; }
.dash-item { height:140px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:26px; color:white; background:var(--purple); cursor:pointer; transition:transform .12s ease; }
.dash-item:hover { transform:scale(1.02); background:var(--purple-dark); }

/* forms */
.form { display:flex; flex-direction:column; gap:12px; }
.form label { font-size:14px; color:var(--purple); }
.form input[type="text"], .form input[type="email"], .form input[type="password"], .form select, .form textarea {
  padding:12px; border-radius:8px; border:2px solid var(--purple); font-family: "Times New Roman", serif; font-size:16px;
}
.form input[type="file"] { padding:6px; }

.btn { background:var(--purple); color:white; border:none; padding:10px 14px; border-radius:8px; cursor:pointer; }
.btn.alt { background:var(--gold); color:var(--purple); border:2px solid var(--purple); }

/* members */
.members-grid { display:flex; flex-direction:column; gap:28px; width:100%; }
.cohort-row { border-top:4px solid var(--gold); padding-top:18px; position:relative; margin-bottom:8px; }
.cohort-label { position:absolute; left:50%; top:-22px; transform:translateX(-50%); background:var(--gold); color:var(--purple); padding:8px 16px; border-radius:20px; font-weight:600; }
.member-row { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; padding:12px 0; }
.person { width:160px; background:var(--purple); color:white; border-radius:10px; padding:10px; text-align:center; }
.person.founder { background:linear-gradient(180deg,var(--purple), #3b2470); color:var(--gold); border:4px solid var(--gold); }
.member-img { width:100px; height:100px; object-fit:cover; border-radius:50%; border:2px solid white; display:block; margin:0 auto 8px auto; }

/* history */
.history-list { display:flex; flex-direction:column; gap:18px; }
.history-item img { width:100%; max-width:760px; height:auto; border:6px solid var(--purple); display:block; margin:0 auto; border-radius:6px; }

/* rules */
.rules { background:var(--purple); color:white; padding:22px; border-radius:10px; }
.rules h4 { color:var(--gold); margin:20px 0 10px 0; }
.rules h4:first-child { margin-top:0; }
.rules ul { padding-left:20px; }
.rules li { margin-bottom:8px; line-height:1.5; }
.highlight { font-weight: normal; color: #D4AF37; }

/* calendar */
.calendar-container {
    max-width: 900px;
    background-color: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
}

.calendar-nav {
    background-color: #4E2A84;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
}

.calendar-title {
    font-size: 18px;
    font-weight: normal;
    color: #4E2A84;
    margin: 0 20px;
    min-width: 200px;
    text-align: center;
}

.calendar-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

.calendar-table {
    width: 100%;
    border-collapse: collapse;
}

.calendar-row {
    display: flex;
    width: 100%;
    min-height: 80px;
}

.calendar-day, .calendar-date {
    flex: 1;
    min-height: 80px;
    padding: 10px;
    border: 3px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    font-size: 14px;
}

.calendar-day {
    background-color: #f0f0f0;
    font-weight: normal;
    color: black;
}

.calendar-date.past-date {
    color: #999;
    background-color: #f9f9f9;
    font-weight: normal;
    border: 3px solid #ddd;
}

.calendar-date.future-date {
    color: black;
    background-color: white;
    font-weight: normal;
    border: 3px solid #ddd;
}

.calendar-date.past-event {
    color: #9b7dd4;
    font-weight: normal;
    border: 3px solid #9b7dd4;
    background-color: #f9f9f9;
}

.calendar-date.future-event {
    color: #4E2A84;
    font-weight: normal;
    border: 3px solid #4E2A84;
    background-color: white;
}

.calendar-date.election {
    color: #D4AF37;
    font-weight: normal;
    border: 3px solid #D4AF37;
    background-color: #fff9e6;
}

.calendar-date.today-date {
    color: black;
    font-weight: bold;
    border: 3px solid black;
    background-color: #f0f0f0;
}
/* 成员展示样式 */
#members-grid {
    width: 100%;
  }
  
  /* 届次分隔线样式 */
  .year-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px 0 30px 0;
    position: relative;
    width: 100%;
  }
  
  .year-divider.first-cohort {
    margin-top: 20px;
  }
  
  .divider-line {
    flex: 1;
    height: 2px;
    max-width: 200px;
  }
  
  /* 第一个届次用紫色 */
  .year-divider.first-cohort .divider-line {
    background: var(--purple);
  }
  
  .year-divider.first-cohort .left-line {
    background: linear-gradient(90deg, var(--purple), transparent);
  }
  
  .year-divider.first-cohort .right-line {
    background: linear-gradient(90deg, transparent, var(--purple));
  }
  
  /* 其他届次用金色 */
  .year-divider.other-cohort .divider-line {
    background: var(--purple);
  }
  
  .year-divider.other-cohort .left-line {
    background: linear-gradient(90deg, var(--purple), transparent);
  }
  
  .year-divider.other-cohort .right-line {
    background: linear-gradient(90deg, transparent, var(--purple));
  }
  
  .year-label {
    background-color: white;
    padding: 8px 20px;
    margin: 0 15px;
    border-radius: 25px;
    font-weight: normal;
    font-family: "Times New Roman", serif;
    font-size: 16px;
    position: relative;
    z-index: 2;
    min-width: 200px;
    text-align: center;
    border: 2px solid;
  }
  
  /* 第一个届次标签样式 */
  .year-divider.first-cohort .year-label {
    background-color: var(--purple);
    color: white;
    border-color: var(--purple);
  }
  
  /* 其他届次标签样式 */
  .year-divider.other-cohort .year-label {
    background-color: var(--gold);
    color: var(--purple);
    border-color: var(--gold);
  }
  
  /* 成员行样式 */
  .members-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
  }
  
  /* 成员卡片基础样式 */
  .member-card {
    background-color: var(--purple);
    color: white;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    position: relative;
    font-family: "Times New Roman", serif;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .member-card:hover {
    transform: translateY(-2px);
  }
  
  /* 不同角色的卡片尺寸 */
  .keystone-card {
    width: 200px;
    min-height: 280px;
  }
  
  .chord-card {
    width: 180px;
    min-height: 260px;
  }
  
  .sagitta-card {
    width: 160px;
    min-height: 240px;
  }
  
  /* 创始人特殊样式 */
  .member-card.founder {
    background-color: var(--purple);
    color: var(--gold);
    border: 3px solid var(--gold);
  }
  
  .member-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid white;
  }
  
  .member-card.founder .member-img {
    border: 3px solid var(--gold);
  }
  
  .keystone-card .member-img {
    width: 100px;
    height: 100px;
  }
  
  .chord-card .member-img {
    width: 90px;
    height: 90px;
  }
  
  .member-name {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 16px;
    font-family: "Times New Roman", serif;
  }
  
  .keystone-card .member-name {
    font-size: 18px;
  }
  
  .member-role {
    font-size: 14px;
    margin-bottom: 8px;
    color: #ffffff;
    font-style: italic;
  }
  
  .member-card.founder .member-role {
    color: var(--gold);
  }
  
  .member-referrer {
    font-size: 12px;
    font-style: italic;
    margin-top: 8px;
    color: #cccccc;
    line-height: 1.3;
    text-align: center;
  }
/* avatar small */
.avatar { width:56px; height:56px; border-radius:8px; object-fit:cover; border:2px solid #fff; }

/* modal */
#modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:2000; background:rgba(0,0,0,0.6); }
#modal .card { max-width:520px; }

/* responsive */
@media (max-width:900px){
  .dash-grid { grid-template-columns:1fr; }
  .hero-logo { width:85vw; }
  .member-img { width:120px; height:120px; }
  .calendar-cell { min-height:64px; }
}