:root {
  --nav: #1a2332;
  --nav-hover: #253447;
  --accent: #3498db;
  --ink: #333;
  --soft: #f8f9fa;
  --border: #e9ecef;
}
body {
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif;
  background: #fff;
  line-height: 1.8;
}

/* ── 导航栏 ── */
.site-nav { background: var(--nav); padding: .6rem 0; }
.site-nav .navbar-brand { font-size: 1.4rem; letter-spacing: .04em; }
.site-nav .nav-link { color: #c5d0dc; font-size: .95rem; padding: .5rem 1rem; }
.site-nav .nav-link:hover { color: #fff; }

/* ── 首页 ── */
.home-hero { position: relative; overflow: hidden; color: #fff; padding: 3.8rem 0 3.2rem; background: linear-gradient(100deg, rgba(20,34,54,.96), rgba(24,82,106,.78)), url('../images/oceanwp-banner.png') center/cover; }
.home-hero .container { position: relative; z-index: 1; }
.home-hero .eyebrow { color: #8fd4e5; }
.home-hero h1 { max-width: 680px; margin: .35rem 0 .75rem; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; letter-spacing: .02em; }
.home-hero p:last-child { max-width: 600px; margin: 0; color: #d7e8ee; font-size: 1.05rem; }
.section-heading h1 { font-weight: 700; }
.eyebrow { color: var(--accent); letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; margin: 0; }

.article-card { border: 0; box-shadow: 0 2px 12px rgba(26, 35, 50, .07); overflow: hidden; transition: box-shadow .2s; }
.article-card:hover { box-shadow: 0 6px 24px rgba(26, 35, 50, .13); }
.article-cover { height: 240px; object-fit: cover; }
.article-list-inner { display: flex; align-items: stretch; }
.article-list-thumb { width: 190px; min-height: 150px; object-fit: cover; flex: 0 0 190px; }
.article-list-card .card-body { min-width: 0; }
.home-main { max-width: 1040px; }
.section-heading h2 { margin: .2rem 0 0; color: var(--nav); font-size: 1.65rem; font-weight: 700; }
.home-article-list { border-top: 2px solid var(--nav); }
.home-article-row { display: flex; align-items: center; gap: 1.25rem; padding: 1.15rem .2rem; border-bottom: 1px solid var(--border); transition: background .2s; }
.home-article-row:hover { background: #fbfcfd; }
.home-article-thumb-wrap { flex: 0 0 168px; }
.home-article-thumb { display: block; width: 168px; height: 108px; object-fit: cover; background: #e7ebef; }
.home-article-placeholder { background: var(--nav) url('../images/oceanwp-banner.png') center/cover; opacity: .82; }
.home-article-copy { min-width: 0; flex: 1; }
.home-article-copy h3 { margin: 0 0 .3rem; font-size: 1.08rem; line-height: 1.45; font-weight: 700; }
.home-article-copy h3 a { color: var(--nav); text-decoration: none; }
.home-article-copy h3 a:hover { color: var(--accent); }
.home-article-meta { margin: 0 0 .25rem; color: #89929c; font-size: .78rem; }
.home-article-meta span { margin: 0 .25rem; }
.home-article-summary { display: -webkit-box; overflow: hidden; margin: 0; color: #626b74; font-size: .9rem; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home-article-more { flex: 0 0 auto; color: var(--accent); font-size: .85rem; text-decoration: none; white-space: nowrap; }
.home-article-more span { margin-left: .25rem; }

/* ── 文章内页 Banner ── */
.article-banner {
  position: relative;
  background: var(--nav) url('/static/banner-bg.svg') center/cover no-repeat;
  color: #fff;
  padding: 0;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.article-banner .banner-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/oceanwp-banner.png');
  background-size: cover;
  background-position: center;
  opacity: .5;
}
.banner-gallery { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.banner-gallery::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.banner-gallery-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.banner-gallery-slide.active { opacity: .5; }
.banner-gallery-dots { position: absolute; z-index: 3; right: 0; bottom: 18px; left: 0; display: flex; justify-content: center; gap: 8px; pointer-events: auto; }
.banner-gallery-dot { width: 9px; height: 9px; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; background: rgba(255,255,255,.35); }
.banner-gallery-dot.active { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.2); }
.article-banner .banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to top, rgba(26,35,50,.85) 0%, rgba(26,35,50,.4) 100%);
}
.article-banner .banner-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .52; filter: saturate(.86) contrast(1.05); }
.article-banner .container {
  position: relative;
  z-index: 2;
  padding-top: 5rem;
  padding-bottom: 3rem;
}
.breadcrumb-line { color: #c5d0dc; margin-bottom: .5rem; }
.breadcrumb-line a { color: #fff; text-decoration: none; }
.breadcrumb-line a:hover { text-decoration: underline; }
.article-banner h1 { font-weight: 700; font-size: 2rem; margin: 0; }
.banner-summary { max-width: 700px; margin: .85rem 0 1.25rem; color: #dbe8ee; font-size: 1rem; line-height: 1.75; }
.banner-cta { display: inline-flex; align-items: center; gap: .7rem; padding: .6rem 1.15rem; border: 1px solid rgba(255,255,255,.65); border-radius: 3px; color: #fff; text-decoration: none; font-size: .92rem; transition: background .2s, border-color .2s; }
.banner-cta:hover { color: #17263b; background: #fff; border-color: #fff; }

/* ── 文章正文区 ── */
.article-content { min-width: 0; }
.article-detail-image { width: 100%; max-height: 520px; object-fit: cover; border-radius: 6px; }
.article-meta {
  display: flex; gap: 1.5rem; color: #6c757d;
  border-bottom: 1px solid var(--border); padding-bottom: 1rem; font-size: .9rem;
}
.article-meta span { display: flex; align-items: center; gap: .35rem; }
.contact-strip {
  background: #eef6fb;
  border-left: 4px solid var(--accent);
  padding: 1.25rem 1.35rem;
  border-radius: 0 6px 6px 0;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.contact-kicker { margin: 0 0 .25rem; color: var(--accent); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.contact-copy h2 { margin: 0 0 .75rem; font-size: 1.15rem; font-weight: 700; color: var(--nav); }
.contact-details { display: grid; gap: .35rem; }
.contact-details div { display: flex; gap: .75rem; }
.contact-details dt { width: 2.5rem; color: #6c757d; font-weight: 600; }
.contact-details dd { margin: 0; color: var(--ink); }
.contact-qr { display: flex; flex-direction: column; align-items: center; gap: .35rem; color: #6c757d; font-size: .75rem; flex-shrink: 0; }
.qrcode-img {
  width: 140px; height: 180px; object-fit: contain;
  border: 1px solid var(--border); border-radius: 4px; flex-shrink: 0;
}
.article-body p { margin-bottom: 1.25rem; }
.article-body img { max-width: 100%; height: auto; }
.product-showcase { position: relative; min-height: 330px; overflow: hidden; border-radius: 12px; background: #14243a; box-shadow: 0 18px 40px rgba(20,36,58,.2); }
.showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; height: 330px; }
.showcase-single { grid-template-columns: 1fr; }
.showcase-panel { position: relative; overflow: hidden; background: #17263b; }
.showcase-main { width: 100%; height: 330px; display: block; object-fit: cover; opacity: .78; filter: saturate(.9) contrast(1.05); }
.showcase-video { width: 100%; height: 330px; display: block; object-fit: cover; filter: saturate(.92) contrast(1.05); }
.showcase-video-fade { position: absolute; right: 0; bottom: 0; left: 0; height: 72px; pointer-events: none; background: linear-gradient(transparent, rgba(8,20,34,.35)); }
.product-gallery { position: relative; overflow: hidden; min-height: 330px; border-radius: 12px; background: #14243a; box-shadow: 0 18px 40px rgba(20,36,58,.16); }
.gallery-slide { display: none; width: 100%; height: 330px; object-fit: cover; }
.gallery-slide.active { display: block; animation: gallery-in .35s ease-out; }
.gallery-dots { position: absolute; right: 0; bottom: 16px; left: 0; display: flex; justify-content: center; gap: 8px; }
.gallery-dot { width: 9px; height: 9px; padding: 0; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(255,255,255,.35); cursor: pointer; }
.gallery-dot.active { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
@keyframes gallery-in { from { opacity: .3; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }
.showcase-image-one { animation: showcase-zoom-one 8s ease-in-out infinite; }
.showcase-image-two { animation: showcase-zoom-two 8s ease-in-out infinite; }
.showcase-glow { position: absolute; width: 220px; height: 220px; right: 8%; top: 12%; border-radius: 50%; background: rgba(102,219,224,.2); filter: blur(25px); animation: showcase-pulse 4s ease-in-out infinite; }
.showcase-label { position: absolute; z-index: 1; color: #fff; border: 1px solid rgba(255,255,255,.45); background: rgba(15,31,49,.72); backdrop-filter: blur(8px); border-radius: 999px; padding: .55rem .9rem; font-size: .78rem; letter-spacing: .04em; box-shadow: 0 8px 20px rgba(0,0,0,.14); animation: showcase-float 4.5s ease-in-out infinite; }
.showcase-label-top { top: 13%; left: 8%; }
.showcase-label-mid { right: 8%; bottom: 22%; animation-delay: -.9s; }
.showcase-label-bottom { left: 8%; bottom: 12%; animation-delay: -1.7s; }
.showcase-label-bottom span { margin-left: .35rem; color: #8fe4e9; font-size: 1rem; }
.showcase-dot { display: inline-block; width: 7px; height: 7px; margin-right: .4rem; border-radius: 50%; background: #75e0d7; box-shadow: 0 0 12px #75e0d7; }
@keyframes showcase-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes showcase-pulse { 0%,100% { transform: scale(.9); opacity: .55; } 50% { transform: scale(1.12); opacity: .85; } }
@keyframes showcase-zoom-one { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06) translate(-1%, -1%); } }
@keyframes showcase-zoom-two { 0%,100% { transform: scale(1.06) translate(1%, 1%); } 50% { transform: scale(1); } }

/* ── 侧栏 ── */
.sidebar-box {
  background: var(--soft); padding: 1.5rem; border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0; margin-bottom: 1.5rem;
}
.sidebar-box h3 { font-size: 1.1rem; margin-bottom: 1rem; font-weight: 600; }
.sidebar-contact { padding: .9rem 0 0; }
.sidebar-contact h4 { margin: 0 0 .55rem; color: var(--nav); font-size: 1rem; }
.sidebar-contact p:not(.contact-kicker) { margin: .25rem 0; color: var(--ink); font-size: .88rem; line-height: 1.55; }
.sidebar-contact p strong { color: #6c757d; font-weight: 600; }
.sidebar-contact-qr { display: flex; align-items: center; gap: .7rem; margin-top: .7rem; color: #6c757d; font-size: .78rem; }
.sidebar-contact-qr img { width: 112px; height: 112px; object-fit: contain; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.sidebar-item { display: flex; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--ink); }
.sidebar-item:last-child { border-bottom: 0; }
.sidebar-item:hover .sidebar-item-title { color: var(--accent); }
.sidebar-thumb {
  width: 70px; height: 52px; object-fit: cover; border-radius: 4px; flex-shrink: 0;
  background: #dde3ea;
}
.sidebar-item-title { font-size: .92rem; font-weight: 500; line-height: 1.4; }
.sidebar-item-date { font-size: .78rem; color: #999; margin-top: .15rem; }
.article-latest { padding: 1.35rem 1.5rem; }
.article-latest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }

/* ── 后台 ── */
.auth-card { max-width: 430px; padding: 2rem; box-shadow: 0 8px 26px rgba(26, 35, 50, .1); border-radius: 8px; }
.empty-state { padding: 3rem; background: var(--soft); text-align: center; border-radius: 8px; }
.table td { vertical-align: middle; }
.copy-preview { padding: 1rem; border: 1px solid #cfe4f4; background: #f5faff; border-radius: 4px; }
.copy-preview textarea { font-size: .84rem; line-height: 1.55; background: #fff; }
.admin-editor { max-width: 1060px; }
.admin-form-section { margin-bottom: 1.25rem; padding: 1.4rem; border: 1px solid var(--border); border-left: 3px solid var(--accent); background: #fff; box-shadow: 0 4px 16px rgba(26,35,50,.05); }
.admin-form-section h2 { margin: 0 0 1rem; color: var(--nav); font-size: 1.12rem; font-weight: 700; }
.section-help { margin: -.55rem 0 1rem; color: #6c757d; font-size: .86rem; }
.article-contact-notice { margin: -.35rem 0 1rem; padding: .8rem 1rem; border-left: 3px solid var(--accent); background: #eef6fb; color: #36536b; font-size: .88rem; line-height: 1.65; }
.admin-save-bar { display: flex; align-items: center; gap: .75rem; padding: .65rem 0 1.5rem; }
.admin-gallery-preview { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .8rem; }
.admin-media-preview { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .35rem; margin-top: .8rem; color: #6c757d; font-size: .78rem; }
.admin-media-preview img { width: 150px; height: 96px; object-fit: cover; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.article-contact-cell { min-width: 140px; font-size: .88rem; }
.article-address-cell { min-width: 190px; max-width: 260px; color: #5f6872; font-size: .86rem; }

/* ── 响应式 ── */
@media (max-width: 767px) {
  .home-hero { padding: 2.8rem 0 2.4rem; }
  .home-hero h1 { font-size: 1.85rem; }
  .home-article-row { align-items: flex-start; gap: .8rem; padding: .9rem 0; }
  .home-article-thumb-wrap { flex-basis: 112px; }
  .home-article-thumb { width: 112px; height: 82px; }
  .home-article-copy h3 { font-size: .96rem; }
  .home-article-summary { font-size: .82rem; -webkit-line-clamp: 1; }
  .home-article-more { display: none; }
  .admin-form-section { padding: 1rem; }
  .article-list-inner { display: block; }
  .article-list-thumb { width: 100%; height: 180px; display: block; }
  .article-banner { min-height: 220px; }
  .article-banner h1 { font-size: 1.4rem; }
  .banner-summary { font-size: .9rem; line-height: 1.55; margin-bottom: 1rem; }
  .contact-strip { align-items: flex-start; }
  .contact-details div { display: block; }
  .contact-details dt { width: auto; }
  .qrcode-img { width: 100px; height: 145px; }
  .article-latest-grid { grid-template-columns: 1fr; }
  .product-showcase { min-height: 245px; }
  .showcase-grid, .showcase-main { height: 245px; }
  .showcase-video { height: 245px; }
  .product-gallery { min-height: 245px; }
  .gallery-slide { height: 245px; }
  .showcase-label { font-size: .7rem; padding: .4rem .65rem; }
  .sidebar-thumb { width: 56px; height: 42px; }
}