/* ==========================
   1. 全局重置 + 基础样式（兼容所有浏览器）
   ========================== */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  font-family: Calibri, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  min-width: 320px;
  background-color: #FFFFFF;
}

img {
  border: none;
  vertical-align: middle;
}

table, tr, td {
  border-collapse: collapse;
  vertical-align: top;
  font-size: 13px;
  line-height: 1.4;
}

a {
  color: #296ab1;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #1A446C;
}

/* 全局居中适配（核心修复table布局居中） */
body table[align="center"],
#main,
#structure,
.site-header,
.site-main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: table;
}

/* ==========================
   2. 页面模块：头部/页脚
   ========================== */
#header {
  height: 80px;
  width: 100%;
  max-width: 1200px;
  text-align: left;
  background-color: #689DC1;
  color: #FFFFFF;
  padding-bottom: 10px;
}

#header h1 {
  padding: 20px 0 0 15px;
  margin: 0;
}

#header h1 a,
#header h3 a {
  color: #FFFFFF;
}

#header h3 {
  text-align: center;
  margin-bottom: 8px;
}

#footer {
  height: 66px;
  width: 100%;
  margin: 20px 0 25px 0;
  vertical-align: middle;
  text-align: center;
}

/* ==========================
   3. 布局模块：侧边栏/主内容
   ========================== */
#main {
  padding-top: 10px;
  text-align: center;
}

#structure {
  height: 100%;
  width: 100%;
}

#sidebar {
  width: 10%;
  height: 100%;
  vertical-align: top;
}

#sidebarA,
#profile_right {
  width: 200px;
  padding: 0 5px;
  margin: 5px 0;
  height: 100%;
  vertical-align: top;
}

#sidebarA_title {
  padding: 5px;
  font-weight: bold;
  font-size: 13px;
  color: #16334f;
  background-color: #689DC1;
}

#sidebarA_p,
#profile_right_p {
  font-size: 13px;
  color: #16334f;
  margin: 5px;
  padding: 3px;
}

#middle {
  height: 100%;
  vertical-align: top;
  text-align: center;
}

#content {
  width: 80%;
  border: 1px solid #689DC1;
  padding: 2em;
  background-color: #F5F5F5;
}

#content a {
  color: #000000;
}

/* ==========================
   4. 表单模块：登录/注册/信息填写
   ========================== */
.form-input {
  height: 30px;
  padding: 5px;
  margin: 3px;
  font-size: 15px;
  font-family: Calibri, Helvetica, sans-serif;
  border: 1px solid #689DC1;
  background-color: #FFFFFF;
  box-sizing: border-box;
}

.form-select {
  height: 35px;
  padding: 1px;
  margin: 3px;
  font-size: 15px;
  font-family: Calibri, Helvetica, sans-serif;
  border: 1px solid #689DC1;
  background-color: #FFFFFF;
  color: #16334f;
}

.form-textarea {
  padding: 5px;
  margin: 3px;
  font-size: 15px;
  font-family: Calibri, Helvetica, sans-serif;
  border: 1px solid #689DC1;
  background-color: #FFFFFF;
  color: #16334f;
}

.form-btn {
  height: 30px;
  padding: 5px;
  margin: 3px;
  font-size: 15px;
  font-family: Calibri, Helvetica, sans-serif;
  background-color: #008000;
  color: #FFFFFF;
  border: 1px solid #689DC1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.form-btn:hover {
  background-color: #006400;
}

/* 登录表单 */
#login {
  padding: 20px 0 30px 0;
}

#login input {
  width: 150px;
}

#login_text {
  font-size: 15px;
  text-align: right;
}

#login_submit .form-btn {
  width: 90px;
}

#login_space {
  height: 45px;
  width: 100%;
}

/* 注册表单 */
#signup {
  color: #16334f;
}

#signup_headline {
  font-weight: bold;
  font-size: 20px;
  color: #16334f;
  text-align: left;
  padding: 25px 0 10px 0;
  margin-top: 45px;
  width: 100%;
}

#signup_text {
  font-size: 15px;
  color: #16334f;
  text-align: right;
}

#signup_title {
  font-weight: bold;
  color: #16334f;
  text-align: left;
  padding: 10px 0;
}

#signup_submit .form-btn {
  width: auto;
}

/* 基础信息表单 */
#basic_title {
  font-weight: bold;
  color: #0000FF;
  text-align: left;
  padding: 10px 0;
}

#basic select {
  width: 100px;
}

#basic_text {
  text-align: right;
}

/* ==========================
   5. 个人中心模块
   ========================== */
#profile_headline {
  font-weight: bold;
  color: #16334f;
  font-size: 17px;
  text-align: center;
  margin: 15px 0;
  padding-top: 20px;
}

#myprofile_left {
  width: 1000px;
  border: 1px solid #689DC1;
  margin: 5px 0;
  vertical-align: top;
}

#myprofile_left table {
  margin: 15px;
  font-size: 15px;
}

#myprofile_left td {
  padding: 5px 0;
  text-align: left;
  vertical-align: top;
}

#myprofile_left img {
  border: 1px ridge #ccc;
  margin: 5px;
}

#profile_left {
  width: 635px;
  color: #16334f;
  margin-bottom: 5px;
  padding-bottom: 10px;
  vertical-align: top;
}

#profile_left table {
  margin: 15px;
  text-align: center;
}

#profile_left td {
  padding: 5px 0;
  text-align: left;
}

#message {
  padding: 20px 0 30px 0;
  margin: 25px;
  font-size: 15px;
}

#message input {
  width: 400px;
}

#message td {
  padding: 5px 5px 5px 7px;
  text-align: left;
}

#message_text {
  font-weight: bold;
  color: #0000FF;
  text-align: left;
  padding: 10px 0;
}

#message_p {
  color: #0000FF;
  padding: 10px 0;
  text-align: left;
}

#visitor {
  border: 1px solid #ccc;
  margin: 20px 0 5px 0;
  vertical-align: top;
}

#visitor table {
  width: 75%;
  border: 1px solid #ccc;
  padding: 2em;
}

#innervisitor {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  padding: 2em;
}

#visitor td {
  padding: 5px;
  text-align: center;
  vertical-align: middle;
}

#visitor_text {
  font-weight: bold;
  color: #0000FF;
  text-align: left;
  vertical-align: middle;
}

/* ==========================
   6. 通用模块：分页/广告/友情链接
   ========================== */
.pagination {
  text-align: center;
  padding: 3px;
  margin: 3px;
}

.pagination a {
  padding: 2px 5px;
  margin: 2px;
  border: 1px solid #AAAADD;
  color: #000099;
}

.pagination a:hover,
.pagination a:active {
  border: 1px solid #000099;
  color: #000000;
}

.pagination .current {
  padding: 2px 5px;
  margin: 2px;
  border: 1px solid #000099;
  font-weight: bold;
  background-color: #000099;
  color: #FFFFFF;
}

.pagination .disabled {
  padding: 2px 5px;
  margin: 2px;
  border: 1px solid #EEE;
  color: #DDD;
}

#ads {
  width: 75%;
  height: 25px;
  font-size: 17px;
  background-color: #D4E6F4;
  margin: 10px 0 10px 5px;
  padding-top: 10px;
  font-weight: bold;
  color: #ff0000;
  vertical-align: middle;
}

#ads2 {
  width: 830px;
  margin: 0 15px;
  text-align: center;
}

#adsmall {
  width: 250px;
  height: 25px;
  font-size: 15px;
  font-weight: bold;
  color: #0000FF;
  vertical-align: middle;
  float: right;
}

#membership {
  margin: 5px 0 10px 0;
  vertical-align: middle;
}

#membership td {
  padding-left: 5px;
  line-height: 140%;
}

/* ==========================
   7. 响应式适配（移动端优化）
   ========================== */
@media (max-width: 1200px) {
  body table[align="center"],
  #main,
  #structure {
    width: 95%;
    margin: 0 auto;
  }

  #header {
    width: 95%;
    height: auto;
    padding: 10px 0;
  }

  #content {
    width: 90%;
    padding: 1em;
  }

  #myprofile_left {
    width: 100%;
  }

  #profile_left {
    width: 100%;
  }

  #ads2 {
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 768px) {
  #sidebar,
  #sidebarA,
  #profile_right {
    width: 100%;
    height: auto;
    margin: 10px 0;
  }

  #message input {
    width: 100%;
  }

  #login input,
  #signup input {
    width: 100%;
  }

  .form-btn {
    width: 100%;
  }

  #visitor table {
    width: 100%;
    padding: 1em;
  }

  #innervisitor {
    width: 80px;
    height: 80px;
    padding: 1em;
  }
}

/* ==========================
   8. 小众模块：保留原有兼容
   ========================== */
#recommendation {
  width: 100%;
  color: #16334f;
  font-weight: bold;
  padding: 5px 0;
  margin: 10px 0;
  text-align: left;
}

#header2,
#header3,
#header4 {
  padding: 5px;
  margin: 5px 0;
  text-align: left;
  vertical-align: middle;
}

#header2_p,
#header3_p,
#header4_p {
  color: #729fb7;
  font-weight: bold;
}

#header3 {
  border: 1px solid #ccc;
}

#emailsetting {
  border: 1px solid #ccc;
  padding: 4px;
  font-size: 12px;
  width: 75%;
  text-align: center;
}

#fans {
  padding: 25px;
  font-size: 12px;
}

#sug {
  width: 118px;
  height: 152px;
  margin: 0 4px 0 0;
  float: left;
  text-align: center;
  vertical-align: middle;
}

.profile-section--love-call {
  margin: 1rem 0;
  padding: 0.8rem;
}

.profile-section__title {
  font-size: 1.1rem;
  color: #333;
  margin: 0 0 0.5rem 0;
  font-weight: 600;
}

.profile-section__desc {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.profile-section__link {
  color: #e63946;
  font-weight: 500;
}

.profile-section__link:hover {
  text-decoration: underline;
}


/* ==========================
   新增：index.php 左右栏目 Flex 布局
   ========================== */
/* 外层容器：核心 Flex 布局，实现左右分列 */
#profile_container.layout-flex {
    display: flex;
    gap: 20px; /* 左右栏目之间的间距，可调整 */
    width: 100%;
    max-width: 1200px; /* 和全局最大宽度一致 */
    margin: 0 auto; /* 页面居中 */
    padding: 0 15px;
    box-sizing: border-box;
}

/* 左侧主内容区：占主要宽度 */
#profile_main.layout-flex__item {
    flex: 3; /* 占3份宽度（可调整比例） */
    min-width: 0; /* 防止内容溢出 */
}

/* 右侧侧边栏：固定比例，不挤压 */
#profile_right.layout-flex__item {
    flex: 1; /* 占1份宽度（可调整比例） */
    min-width: 200px; /* 侧边栏最小宽度，防止太窄 */
    flex-shrink: 0; /* 侧边栏不被压缩 */
}

/* ==========================
   移动端适配：小屏幕自动上下排列
   ========================== */
@media (max-width: 768px) {
    #profile_container.layout-flex {
        flex-direction: column; /* 移动端纵向排列 */
        gap: 15px; /* 上下间距 */
    }

    #profile_main.layout-flex__item,
    #profile_right.layout-flex__item {
        flex: 1;
        min-width: 100%; /* 移动端占满宽度 */
    }
}
/* ==========================
   修复：核心资料表格居中（最高优先级）
   ========================== */
/* 精准定位个人资料页的核心表格，避免和首页ID冲突 */
main.site-main table#profile_main {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important; /* 强制居中，优先级最高 */
    float: none !important; /* 清除可能的浮动干扰 */
    display: table !important; /* 确保是表格布局 */
}

/* 核心资料容器：强制居中+覆盖所有旧样式 */
main.site-main #myprofile_left {
    width: 100% !important;
    max-width: 1050px !important;
    margin: 15px auto !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* 内部所有表格：强制居中 */
main.site-main #myprofile_left table {
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* 所有单元格：文本强制居中 */
main.site-main #myprofile_left table tr td {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 8px !important;
}

/* 视频区域：强制居中 */
main.site-main #display_picture {
    margin: 0 auto !important;
    text-align: center !important;
}

/* 兴趣爱好标题：强制居中 */
main.site-main #profile_left_title {
    text-align: center !important;
    width: 100% !important;
}