/*************************************************************
 * 适用于所有页面 (Home, About, Portfolio, Contact, Web Disk)
 *************************************************************/

/* ==========================
   0. 全局重置 & 基础样式（新配色）
   ========================== */

/* 一、重置基础 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 定义一套统一的色板 */
:root {
  --color-bg: #f5f5f5;            /* 页面背景 */
  --color-text: #333;             /* 正文字体颜色 */
  --color-primary: #0055aa;       /* 主色（蓝） */
  --color-secondary: #28a745;     /* 次色（绿色/按钮等） */
  --color-accent: #e96a57;        /* 强调色（橘红） */
  
  /* 新增弧形 & 渐变用的颜色 */
  --color-header-gradient-start: #ffffff;
  --color-header-gradient-end: #f0f3fa;
  --color-footer-gradient-start: #f0f3fa;
  --color-footer-gradient-end: #ffffff;
  
  /* 语言切换按钮专用色 (Cyan & Tomato) */
  --lang-color-default: #00bcd4;  /* 未激活 -> cyan */
  --lang-color-active: #ff6347;   /* 激活 -> tomato */


  /* 文字 & 布局 */
  --font-family: "Helvetica Neue", Arial, sans-serif;
  --max-width: 1200px;
}

/* 二、全局字体、颜色、布局 */
html, body {
  font-family: var(--font-family);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  margin: 0 auto;
  max-width: var(--max-width);
}

/* 三、链接默认样式 */
a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* 四、按钮基础样式 */
button {
  cursor: pointer;
  border: none;
  padding: 0.5em 1em;
  border-radius: 6px;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  transition: background-color 0.3s;
}
button:hover {
  background-color: #003f82; /* 鼠标悬停时略暗 */
}

/* 五、输入元素 */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  width: 100%;
  max-width: 300px;
  margin: 0.5em 0;
  padding: 0.5em;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 提交按钮 */
input[type="submit"], button[type="submit"] {
  background-color: var(--color-secondary);
  color: #fff;
}
input[type="submit"]:hover, button[type="submit"]:hover {
  background-color: #218838;
}

/* ==========================
   1. 布局相关
   ========================== */

/* 给页面容器添加一些常用布局限制和背景色 */
body {
  background-color: var(--color-bg);
}

/*******************************************************
   2. 头部 & 导航栏
 *******************************************************/
 header {
  width: 100%;
  margin-bottom: 1em;
  padding: 1em 0;
  background: linear-gradient(
    to bottom right,
    var(--color-header-gradient-start),
    var(--color-header-gradient-end)
  );
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1em; /* 两边间距 */
}

/* Logo 容器 */
.logo-container img {
  max-height: 60px; /* 让 logo 不至于太大 */
  height: auto;
}

/* 导航栏（可根据你原先的选择器命名来做微调） */
header nav ul {
  display: flex;
  list-style: none;
  gap: 1em; /* flex 间距 */
  margin: 0;
}

header nav ul li a {
  font-weight: bold;
  color: #333;  /* 文字颜色可自行调整 */
  font-size: 1rem;
}

/*************************************************************
 * 语言切换按钮
 * 默认使用 --lang-color-default (cyan)
 * 激活时使用 --lang-color-active (tomato)
 *************************************************************/
 #language-switcher {
  display: flex;
  align-items: center;  /* 让按钮垂直居中 */
  gap: 0.5em;           /* 按钮之间留点间距 */
}

/* 默认按钮背景色：var(--lang-color-default) (cyan) */
#lang-zh, 
#lang-en {
  background-color: var(--lang-color-default);
  color: #fff;
  border-radius: 6px;
  padding: 0.5em 1em;
  font-size: 1rem;
  transition: background-color 0.3s;
}

/* 激活状态：var(--lang-color-active) (tomato) */
#lang-zh.active,
#lang-en.active {
  background-color: var(--lang-color-active);
}

/* ==========================
   3. 页脚
   ========================== */

/* 同样使用一个渐变 + 圆角，顶部做个弧形 */

footer {
  width: 100%;
  padding: 2em 0 1em 0;
  margin-top: 2em;
  background: linear-gradient(
    to top right,
    var(--color-footer-gradient-start),
    var(--color-footer-gradient-end)
  );
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
}

footer .footer-info {
  text-align: center;
  padding: 1em 0;
}

.footer-info .footer-logo img {
  max-height: 80px;
  height: auto;
  margin-bottom: 1em;
}

.footer-info .social-media a,
.footer-info .quick-links a {
  margin: 0 0.5em;
  color: var(--color-text);
}

.footer-info .social-media a:hover,
.footer-info .quick-links a:hover {
  color: var(--color-primary);
}

/* ==========================
   4. 首页 (index.html) 专属样式
   ========================== */

   
 #company-intro {
  background-color: #fff;
  padding: 2em 1em;
  margin: 1em 0;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#company-intro h2 {
  text-align: center;
  margin-bottom: 1em;
}

#company-intro p {
  margin-bottom: 1em;
  color: #555;
  line-height: 1.8; /* 更大行高，便于阅读 */
}

#brand-intro {
  padding: 2em 1em;
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 1em;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#brand-intro h1 {
  font-size: 2rem;
  margin-bottom: 1em;
}

#brand-intro p {
  font-size: 1.1rem;
  color: #666;
}

/* ------ #featured-projects ------ */
#featured-projects {
  background-color: #fff;
  padding: 2em 1em;
  margin: 1em 0;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#featured-projects h2 {
  margin-bottom: 1em;
}

.project-thumbnails {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.project-thumbnails .project-item {
  width: 200px;
  margin: 1em;
  text-align: center;
}

.project-thumbnails img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0.5em;
  border-radius: 6px;
}

/* ------ #quick-navigation ------ */
#quick-navigation {
  background-color: #fff;
  padding: 2em 1em;
  text-align: center;
  margin: 1em 0;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#quick-navigation .cta-buttons button {
  margin: 0.5em;
  background-color: var(--color-secondary);
  font-weight: bold;
  border-radius: 6px;
  transition: background-color 0.2s;
}
#quick-navigation .cta-buttons button:hover {
  background-color: #218838;
}

/* ==========================
   5. 公司介绍 (about.html) 专属样式
   ========================== */
#about-us {
  background-color: #fff;
  padding: 2em 1em;
  margin: 1em 0;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#about-us h1 {
  text-align: center;
  margin-bottom: 1em;
}

/* ------ #vision-mission, #company-background, #team, #client-cases, #contact-link ------ */
#vision-mission, #company-background, #team, #client-cases, #contact-link {
  margin-bottom: 2em;
}

/* 团队介绍 */
.team-members {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.team-member {
  width: 200px;
  margin: 1em;
  text-align: center;
}
.team-member img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 客户案例 */
.client-case {
  margin: 1em;
  text-align: center;
}
.client-case img {
  width: 150px;
  height: auto;
  margin-bottom: 1em;
  border-radius: 6px;
}
.client-case blockquote {
  font-style: italic;
  color: #666;
}

/* ==========================
   6. 作品展示 (portfolio.html) 专属样式
   ========================== */
#portfolio {
  padding: 2em 1em;
  background-color: #fff;
  margin: 1em 0;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#portfolio h1 {
  text-align: center;
  margin-bottom: 1em;
}

/* ------ #portfolio-list ------ */
#portfolio-list {
  margin-bottom: 2em;
}

/* 分类筛选区 */
.filter {
  text-align: center;
  margin-bottom: 1em;
}

/* 作品缩略图 */
.portfolio-thumbnails {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.portfolio-item {
  width: 200px;
  margin: 1em;
  text-align: center;
}
.portfolio-item img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0.5em;
  border-radius: 6px;
}

/* ------ #portfolio-detail ------ */
#portfolio-detail {
  margin-bottom: 2em;
}

.portfolio-detail-content {
  text-align: center;
}
.portfolio-detail-content img {
  max-width: 500px;
  width: 100%;
  height: auto;
  margin: 1em 0;
  border-radius: 6px;
}
.portfolio-detail-content video {
  margin: 1em 0;
  border-radius: 6px;
}

/* ------ #portfolio-story ------ */
#portfolio-story {
  margin-bottom: 2em;
  background-color: #f7f7f7;
  padding: 1em;
  border-radius: 6px;
}


 #portfolio-pdf {
  background-color: #fff;
  border-radius: 10px;
  margin: 1em 0;
  padding: 2em 1em;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#portfolio-pdf .pdf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: center;
  margin-top: 1em;
}

#portfolio-pdf .pdf-item {
  width: 200px;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 6px;
  padding: 1em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

#portfolio-pdf .pdf-item h3 {
  margin-bottom: 0.5em;
  font-size: 1.1rem;
  color: #333;
}
#portfolio-pdf .pdf-item a {
  display: inline-block;
  margin-top: 0.5em;
  padding: 0.4em 0.8em;
  background-color: #00bcd4; /* 按钮感 */
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s;
}
#portfolio-pdf .pdf-item a:hover {
  background-color: #0097a7;
}

/* ------ #related-works ------ */
#related-works .related-works-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.related-item {
  width: 200px;
  margin: 1em;
  text-align: center;
}
.related-item img {
  width: 100%;
  height: auto;
  margin-bottom: 0.5em;
  border-radius: 6px;
}

/* ==========================
   7. 联系我们 (contact.html) 专属样式
   ========================== */
#contact {
  padding: 2em 1em;
  background-color: #fff;
  margin: 1em 0;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#contact h1 {
  text-align: center;
  margin-bottom: 1em;
}

/* ------ #contact-form ------ */
#contact-form {
  margin-bottom: 2em;
}
#contact-form form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#contact-form label {
  font-weight: bold;
}

/* ------ #company-address ------ */
#company-address {
  margin-bottom: 2em;
  text-align: center;
}
#company-address iframe {
  width: 80%;
  max-width: 600px;
  height: 350px;
  border: none;
  border-radius: 6px;
}

/* ------ #contact-info ------ */
#contact-info {
  margin-bottom: 2em;
  text-align: center;
}

/* ------ #social-media ------ */
#social-media {
  margin-bottom: 2em;
  text-align: center;
}
#social-media ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
#social-media ul li {
  margin: 0.5em 1em;
}

/* ------ #customer-chat ------ */
#customer-chat {
  margin-bottom: 2em;
  text-align: center;
}

/* ==========================
   8. 网盘 & AI使用 后端 (webdisk.html) 专属样式
   ========================== */
#webdisk {
  background-color: #fff;
  margin: 1em 0;
  padding: 2em 1em;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#webdisk h1 {
  text-align: center;
  margin-bottom: 1em;
}

/* ------ #login ------ */
#login {
  margin-bottom: 2em;
}
#login form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#login label {
  font-weight: bold;
}

/* ------ #remote-control, #file-management, #access-control, #api, #file-transfer ------ */
#remote-control,
#file-management,
#access-control,
#api,
#file-transfer {
  margin-bottom: 2em;
  padding: 1em;
  background-color: #f7f7f7;
  border-radius: 6px;
}

/* ==========================
   9. 响应式设计 (示例)
   ========================== */
@media (max-width: 768px) {
  header nav ul li {
    margin: 0 0.5em;
  }
  #language-switcher {
    justify-content: center;
    margin-bottom: 0.5em;
  }
  footer {
    padding: 1em;
    margin-top: 1em;
  }
  /* 让一些大块区域的内边距更紧凑 */
  #brand-intro,
  #featured-projects,
  #quick-navigation,
  #about-us,
  #portfolio,
  #contact,
  #webdisk {
    padding: 1em;
    margin: 0.5em 0;
  }
  /* 减小图片和卡片宽度 */
  .project-thumbnails .project-item,
  .portfolio-thumbnails .portfolio-item,
  .related-item,
  .team-member {
    width: 150px;
    margin: 0.5em;
  }
}