/* ============================================================
   海角社区 - 经典BBS怀旧风格样式表
   CSS前缀: cc-
   ============================================================ */

/* === Reset & Base === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: "Arial", sans-serif;
  color: #333333;
  background-color: #E8EEF4;
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: #007BFF;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "SimSun", "宋体", serif;
  color: #0055A4;
  line-height: 1.3;
}

/* === Jammer Block (hidden) === */
.jammer-block {
  display: none;
}

/* === Layout Container === */
.cc-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* === Header === */
.cc-header {
  background-color: #0055A4;
  padding: 10px 0;
  border-bottom: 3px solid #FFD700;
}

.cc-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.cc-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cc-logo img {
  height: 40px;
  width: auto;
}

.cc-logo-text {
  font-family: "SimSun", "宋体", serif;
  color: #FFFFFF;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 2px;
}

.cc-header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.cc-header-right a {
  color: #FFFFFF;
  font-size: 0.85rem;
  padding: 4px 12px;
  border: 1px solid #FFFFFF;
}

.cc-header-right a:hover {
  background-color: #FFD700;
  color: #0055A4;
  text-decoration: none;
  border-color: #FFD700;
}

/* === Navigation === */
.cc-nav {
  background-color: #003D7A;
  border-bottom: 1px solid #002A55;
  position: relative; /* NOT sticky/fixed */
}

.cc-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
}

.cc-nav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.cc-nav-list li {
  position: relative;
}

.cc-nav-list li a {
  display: block;
  color: #FFFFFF;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-family: "SimSun", "宋体", serif;
  white-space: nowrap;
  transition: color 0.15s;
}

.cc-nav-list li a:hover,
.cc-nav-list li a.cc-active {
  color: #FFD700;
  text-decoration: underline;
}

/* Hamburger Menu */
.cc-hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 10px;
  gap: 4px;
}

.cc-hamburger span {
  width: 24px;
  height: 3px;
  background-color: #FFFFFF;
  display: block;
  transition: transform 0.3s;
}

/* === Mobile Nav Overlay === */
.cc-mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100vh;
  background-color: #003D7A;
  z-index: 9999;
  transition: left 0.3s ease;
  overflow-y: auto;
  padding: 20px 0;
}

.cc-mobile-nav.cc-open {
  left: 0;
}

.cc-mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
}

.cc-mobile-overlay.cc-open {
  display: block;
}

.cc-mobile-nav-close {
  color: #FFFFFF;
  font-size: 1.5rem;
  padding: 10px 20px;
  cursor: pointer;
  text-align: right;
  display: block;
}

.cc-mobile-nav a {
  display: block;
  color: #FFFFFF;
  padding: 12px 25px;
  font-size: 1rem;
  font-family: "SimSun", "宋体", serif;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.cc-mobile-nav a:hover {
  color: #FFD700;
  background-color: rgba(255,255,255,0.05);
  text-decoration: none;
}

/* === Breadcrumb === */
.cc-breadcrumb {
  padding: 10px 0;
  font-size: 0.85rem;
  color: #666;
}

.cc-breadcrumb a {
  color: #007BFF;
}

.cc-breadcrumb span {
  margin: 0 5px;
  color: #999;
}

/* === Main Content Area === */
.cc-main {
  padding: 15px 0;
}

/* === Section Module (BBS style) === */
.cc-section {
  background-color: #FFFFFF;
  border: 1px solid #C8D5E0;
  margin-bottom: 15px;
}

.cc-section-header {
  background-color: #0055A4;
  color: #FFFFFF;
  padding: 8px 15px;
  font-family: "SimSun", "宋体", serif;
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cc-section-header a {
  color: #FFD700;
  font-size: 0.8rem;
  font-weight: normal;
}

.cc-section-body {
  padding: 15px;
}

/* === Register Module === */
.cc-register-now .cc-section-body {
  text-align: center;
  padding: 30px 15px;
}

.cc-register-now .cc-reg-title {
  font-size: 1.5rem;
  color: #0055A4;
  margin-bottom: 10px;
  font-family: "SimSun", "宋体", serif;
}

.cc-register-now .cc-reg-desc {
  color: #666;
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.cc-btn {
  display: inline-block;
  padding: 10px 30px;
  border: 1px solid #0055A4;
  background-color: #0055A4;
  color: #FFFFFF;
  font-size: 1rem;
  cursor: pointer;
  font-family: "SimSun", "宋体", serif;
}

.cc-btn:hover {
  background-color: #003D7A;
  text-decoration: none;
  color: #FFFFFF;
}

.cc-btn-outline {
  background-color: transparent;
  color: #0055A4;
}

.cc-btn-outline:hover {
  background-color: #0055A4;
  color: #FFFFFF;
}

.cc-btn-yellow {
  background-color: #FFD700;
  border-color: #FFD700;
  color: #333333;
}

.cc-btn-yellow:hover {
  background-color: #E6C200;
  color: #333333;
}

.cc-login-link {
  margin-top: 12px;
  font-size: 0.85rem;
}

/* === Upload Module === */
.cc-upload-zone {
  border: 2px dashed #C8D5E0;
  padding: 40px 20px;
  text-align: center;
  background-color: #F8FAFC;
  margin-bottom: 10px;
}

.cc-upload-zone p {
  color: #999;
  margin-top: 8px;
  font-size: 0.85rem;
}

/* === Recruit Module === */
.cc-job-list {
  width: 100%;
  border-collapse: collapse;
}

.cc-job-list th,
.cc-job-list td {
  border: 1px solid #D0D8E0;
  padding: 8px 12px;
  text-align: left;
  font-size: 0.9rem;
}

.cc-job-list th {
  background-color: #E8EEF4;
  font-family: "SimSun", "宋体", serif;
  color: #0055A4;
}

.cc-job-list tr:hover {
  background-color: #F5F8FB;
}

/* === Ad Module === */
.cc-ad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.cc-ad-card {
  border: 1px solid #D0D8E0;
  padding: 12px;
  text-align: center;
}

.cc-ad-card img {
  margin: 0 auto 10px;
}

.cc-ad-card h4 {
  font-size: 0.95rem;
  margin-bottom: 5px;
}

.cc-ad-card p {
  font-size: 0.8rem;
  color: #666;
}

.cc-price {
  color: #E74C3C;
  font-weight: bold;
  font-size: 1.1rem;
}

/* === Crowdfund Module === */
.cc-cf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
}

.cc-cf-card {
  border: 1px solid #D0D8E0;
  overflow: hidden;
}

.cc-cf-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.cc-cf-info {
  padding: 12px;
}

.cc-cf-info h4 {
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.cc-progress-bar {
  background-color: #E8EEF4;
  height: 8px;
  border-radius: 0;
  margin: 8px 0;
  overflow: hidden;
}

.cc-progress-fill {
  height: 100%;
  background-color: #FFD700;
}

.cc-cf-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #666;
}

/* === Request Zone === */
.cc-request-form {
  max-width: 600px;
}

.cc-form-group {
  margin-bottom: 12px;
}

.cc-form-group label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 4px;
  font-family: "SimSun", "宋体", serif;
  color: #0055A4;
}

.cc-form-group input,
.cc-form-group textarea,
.cc-form-group select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #C8D5E0;
  font-size: 0.9rem;
  font-family: "Arial", sans-serif;
  background-color: #FFFFFF;
}

.cc-form-group textarea {
  height: 100px;
  resize: vertical;
}

/* === Mall Module === */
.cc-mall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.cc-mall-item {
  border: 1px solid #D0D8E0;
  padding: 10px;
  text-align: center;
}

.cc-mall-item img {
  margin: 0 auto 8px;
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.cc-mall-item h4 {
  font-size: 0.85rem;
  margin-bottom: 5px;
}

.cc-mall-item .cc-points {
  color: #E74C3C;
  font-weight: bold;
}

/* === APP Download Module === */
.cc-app-row {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.cc-app-screenshots {
  flex: 1;
  min-width: 200px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
}

.cc-app-screenshots img {
  width: 120px;
  height: auto;
  border: 1px solid #D0D8E0;
}

.cc-app-info {
  flex: 1;
  min-width: 250px;
}

.cc-app-info h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.cc-app-info p {
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #666;
}

.cc-qr-row {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.cc-qr-item {
  text-align: center;
}

.cc-qr-item img {
  width: 120px;
  height: 120px;
  margin: 0 auto 5px;
}

.cc-qr-item span {
  font-size: 0.8rem;
  color: #666;
}

/* === VIP Module === */
.cc-vip-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
}

.cc-vip-table th,
.cc-vip-table td {
  border: 1px solid #D0D8E0;
  padding: 10px 12px;
  text-align: center;
  font-size: 0.9rem;
}

.cc-vip-table th {
  background-color: #0055A4;
  color: #FFFFFF;
  font-family: "SimSun", "宋体", serif;
}

.cc-vip-table .cc-vip-yes {
  color: #2ECC71;
  font-weight: bold;
}

.cc-vip-table .cc-vip-no {
  color: #CCC;
}

.cc-vip-plans {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.cc-vip-plan {
  border: 1px solid #D0D8E0;
  padding: 15px 25px;
  text-align: center;
  min-width: 140px;
}

.cc-vip-plan h4 {
  font-size: 1rem;
  margin-bottom: 5px;
}

.cc-vip-plan .cc-price {
  font-size: 1.3rem;
  display: block;
  margin: 8px 0;
}

/* === Submit Module === */
.cc-submit-info {
  line-height: 1.8;
}

.cc-submit-info dt {
  font-weight: bold;
  color: #0055A4;
  font-family: "SimSun", "宋体", serif;
  margin-top: 10px;
}

.cc-submit-info dd {
  margin-left: 15px;
  color: #555;
}

/* === Forum Thread List (for inner pages) === */
.cc-thread-list {
  width: 100%;
  border-collapse: collapse;
}

.cc-thread-list th,
.cc-thread-list td {
  border: 1px solid #D0D8E0;
  padding: 8px 12px;
  font-size: 0.9rem;
}

.cc-thread-list th {
  background-color: #E8EEF4;
  font-family: "SimSun", "宋体", serif;
  color: #0055A4;
  text-align: left;
}

.cc-thread-list tr:hover {
  background-color: #F5F8FB;
}

.cc-thread-list .cc-thread-title {
  font-weight: bold;
}

.cc-thread-list .cc-thread-title a {
  color: #007BFF;
}

.cc-thread-list .cc-thread-meta {
  font-size: 0.8rem;
  color: #999;
}

.cc-thread-list .cc-thread-hot {
  color: #E74C3C;
  font-weight: bold;
  font-size: 0.75rem;
  margin-left: 5px;
}

.cc-thread-list .cc-thread-top {
  color: #FFD700;
  font-weight: bold;
  font-size: 0.75rem;
  margin-right: 5px;
  background-color: #0055A4;
  padding: 1px 5px;
}

.cc-thread-avatar {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}

/* === Pagination === */
.cc-pagination {
  display: flex;
  gap: 5px;
  padding: 15px 0;
  flex-wrap: wrap;
}

.cc-pagination a,
.cc-pagination span {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid #C8D5E0;
  font-size: 0.85rem;
  color: #007BFF;
  background-color: #FFFFFF;
}

.cc-pagination span.cc-current {
  background-color: #0055A4;
  color: #FFFFFF;
  border-color: #0055A4;
}

.cc-pagination a:hover {
  background-color: #E8EEF4;
  text-decoration: none;
}

/* === Sidebar === */
.cc-layout {
  display: flex;
  gap: 15px;
}

.cc-content {
  flex: 1;
  min-width: 0;
}

.cc-sidebar {
  width: 280px;
  flex-shrink: 0;
}

.cc-sidebar .cc-section {
  margin-bottom: 15px;
}

.cc-sidebar .cc-section-body {
  padding: 10px 12px;
}

.cc-sidebar .cc-section-body ul {
  list-style: none;
}

.cc-sidebar .cc-section-body ul li {
  padding: 5px 0;
  border-bottom: 1px dashed #E0E0E0;
  font-size: 0.85rem;
}

.cc-sidebar .cc-section-body ul li:last-child {
  border-bottom: none;
}

.cc-online-count {
  font-size: 0.85rem;
  color: #666;
  padding: 8px 0;
}

.cc-online-count strong {
  color: #E74C3C;
}

/* === Footer === */
.cc-footer {
  background-color: #003D7A;
  color: #CCCCCC;
  padding: 30px 0 0;
  margin-top: 20px;
  border-top: 3px solid #FFD700;
}

.cc-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px 25px;
}

.cc-footer-col h4 {
  color: #FFD700;
  font-size: 1rem;
  margin-bottom: 12px;
  font-family: "SimSun", "宋体", serif;
}

.cc-footer-col ul {
  list-style: none;
}

.cc-footer-col ul li {
  margin-bottom: 6px;
}

.cc-footer-col ul li a {
  color: #CCCCCC;
  font-size: 0.85rem;
}

.cc-footer-col ul li a:hover {
  color: #FFD700;
}

.cc-footer-bottom {
  background-color: #002A55;
  padding: 15px;
  text-align: center;
  font-size: 0.8rem;
  color: #999;
}

.cc-footer-bottom p {
  margin-bottom: 5px;
}

.cc-footer-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 10px;
}

.cc-footer-badges img {
  display: inline-block;
}

/* === Inner Page Content === */
.cc-page-title {
  font-size: 1.5rem;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #0055A4;
}

.cc-page-content {
  background-color: #FFFFFF;
  border: 1px solid #C8D5E0;
  padding: 20px;
  margin-bottom: 15px;
  line-height: 1.8;
}

.cc-page-content h2 {
  font-size: 1.2rem;
  margin: 20px 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px dashed #D0D8E0;
}

.cc-page-content h3 {
  font-size: 1.05rem;
  margin: 15px 0 8px;
}

.cc-page-content p {
  margin-bottom: 12px;
  text-indent: 2em;
}

.cc-page-content ul,
.cc-page-content ol {
  margin: 10px 0 10px 30px;
}

.cc-page-content li {
  margin-bottom: 5px;
}

/* === APP Download Page === */
.cc-app-page-hero {
  text-align: center;
  padding: 40px 20px;
  background-color: #FFFFFF;
  border: 1px solid #C8D5E0;
  margin-bottom: 15px;
}

.cc-app-page-hero img {
  margin: 0 auto 15px;
  height: 80px;
}

.cc-app-page-hero h2 {
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.cc-app-page-hero p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 5px;
}

.cc-app-page-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
}

.cc-app-page-info .cc-section-body {
  font-size: 0.9rem;
}

.cc-app-page-info .cc-section-body p {
  margin-bottom: 6px;
  text-indent: 0;
}

.cc-install-steps {
  counter-reset: step;
}

.cc-install-steps li {
  counter-increment: step;
  margin-bottom: 10px;
  padding-left: 5px;
}

.cc-install-steps li::marker {
  content: "步骤" counter(step) ". ";
  font-weight: bold;
  color: #0055A4;
}

/* === Banner === */
.cc-banner {
  margin-bottom: 15px;
}

.cc-banner img {
  width: 100%;
  height: auto;
}

/* === Forum Stats Bar === */
.cc-stats-bar {
  background-color: #FFFFFF;
  border: 1px solid #C8D5E0;
  padding: 10px 15px;
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 0.85rem;
  color: #666;
}

.cc-stats-bar strong {
  color: #0055A4;
}

/* === Responsive Design === */

/* 1440px+ */
@media (min-width: 1440px) {
  .cc-container {
    max-width: 1400px;
  }
}

/* Tablet: 768px - 1023px */
@media (max-width: 1023px) {
  .cc-sidebar {
    width: 220px;
  }
  
  .cc-nav-list li a {
    padding: 10px 10px;
    font-size: 0.85rem;
  }
  
  .cc-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile: < 768px */
@media (max-width: 767px) {
  .cc-nav-list {
    display: none;
  }
  
  .cc-hamburger {
    display: flex;
  }
  
  .cc-layout {
    flex-direction: column;
  }
  
  .cc-sidebar {
    width: 100%;
  }
  
  .cc-footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .cc-header-inner {
    flex-wrap: wrap;
  }
  
  .cc-header-right {
    display: none;
  }
  
  .cc-app-page-info {
    grid-template-columns: 1fr;
  }
  
  .cc-app-row {
    flex-direction: column;
  }
  
  .cc-ad-grid {
    grid-template-columns: 1fr;
  }
  
  .cc-vip-plans {
    flex-direction: column;
    align-items: center;
  }
  
  .cc-register-now .cc-reg-title {
    font-size: 1.2rem;
  }
  
  .cc-thread-list .cc-hide-mobile {
    display: none;
  }
}

/* Small Mobile: < 360px */
@media (max-width: 359px) {
  html {
    font-size: 14px;
  }
  
  .cc-logo-text {
    font-size: 1.1rem;
  }
  
  .cc-section-header {
    font-size: 0.9rem;
    padding: 6px 10px;
  }
  
  .cc-mall-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}