/* ====================================================================
   赵子年的建筑云 · 自定义样式
   基础样式基于 Tailwind CSS，这里补充自定义类与动效
   ==================================================================== */

/* ========== 隐藏 Alpine 元素直到初始化完成 ========== */
[x-cloak] {
  display: none !important;
}

/* ========== 全局基础 ========== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  /* 整体缩放 90%：让默认 100% 缩放下更紧凑，接近浏览器缩放 90% 的观感 */
  font-size: 90%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum" 1, "kern" 1;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.7);
}

/* ========== 背景纹理：蓝图网格 ========== */
.blueprint-grid {
  background-image:
    linear-gradient(rgba(31, 63, 199, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 63, 199, 0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 0 0;
}
.dark .blueprint-grid {
  background-image:
    linear-gradient(rgba(90, 126, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 126, 255, 0.08) 1px, transparent 1px);
}

/* ========== 导航链接 ========== */
.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  color: rgb(71 85 105);
  transition: all 0.2s ease;
}
.dark .nav-link {
  color: rgb(203 213 225);
}
.nav-link:hover {
  background-color: rgb(241 245 249);
  color: rgb(31 63 199);
}
.dark .nav-link:hover {
  background-color: rgb(30 41 59);
  color: rgb(165 180 252);
}

/* ========== 标签 chips ========== */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background-color: rgb(241 245 249);
  color: rgb(51 65 85);
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid rgb(226 232 240);
}
.dark .chip {
  background-color: rgb(30 41 59);
  color: rgb(203 213 225);
  border-color: rgb(51 65 85);
}

.chip-sm {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background-color: rgb(241 245 249);
  color: rgb(71 85 105);
  font-size: 0.6875rem;
  font-weight: 500;
}
.dark .chip-sm {
  background-color: rgb(30 41 59);
  color: rgb(203 213 225);
}

/* 品牌色 chip（身份标签用） */
.chip-brand {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background-color: rgb(238 242 255);  /* 浅蓝 */
  color: rgb(79 70 229);               /* 深蓝 */
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid rgb(199 210 254);
}
.dark .chip-brand {
  background-color: rgba(79 70 229 / 0.15);
  color: rgb(165 180 252);
  border-color: rgba(99 102 241 / 0.3);
}

/* ========== 搜索关键词高亮 ========== */
mark.hl,
.hl {
  background-color: #fef08a;
  color: #713f12;
  padding: 0 0.15em;
  border-radius: 0.25rem;
  font-weight: 700;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.dark mark.hl,
.dark .hl {
  background-color: rgba(250 204 21 / 0.35);
  color: rgb(254 240 138);
}

/* ========== 按钮 ========== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.625rem;
  background-color: rgb(31 63 199);
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 0 0 0 rgba(31, 63, 199, 0);
  white-space: nowrap;
}
.btn-primary:hover:not(:disabled) {
  background-color: rgb(25 47 160);
  box-shadow: 0 6px 20px -4px rgba(31, 63, 199, 0.5);
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.625rem;
  background-color: rgb(241 245 249);
  color: rgb(51 65 85);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.dark .btn-secondary {
  background-color: rgb(30 41 59);
  color: rgb(203 213 225);
}
.btn-secondary:hover {
  background-color: rgb(226 232 240);
}
.dark .btn-secondary:hover {
  background-color: rgb(51 65 85);
}

/* ========== 业务卡片 ========== */
.service-card {
  position: relative;
  background-color: white;
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid rgb(241 245 249);
  transition: all 0.3s ease;
  overflow: hidden;
}
.dark .service-card {
  background-color: rgb(15 23 42);
  border-color: rgb(30 41 59);
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08);
  border-color: rgb(199 210 254);
}
.dark .service-card:hover {
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4);
  border-color: rgb(67 89 202);
}
.service-card:hover::before {
  opacity: 1;
}

.service-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: 1rem;
  box-shadow: 0 6px 20px -4px currentColor;
}

.service-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: rgb(15 23 42);
}
.dark .service-title {
  color: white;
}

.service-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgb(100 116 139);
  margin-bottom: 1rem;
}
.dark .service-desc {
  color: rgb(148 163 184);
}

.service-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem 0;
  font-size: 0.8125rem;
  color: rgb(71 85 105);
}
.dark .service-list {
  color: rgb(203 213 225);
}
.service-list li {
  position: relative;
  padding-left: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.service-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: rgb(31 63 199);
}

.service-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(31 63 199);
  display: inline-flex;
  align-items: center;
  transition: gap 0.2s ease;
}
.dark .service-link {
  color: rgb(129 140 248);
}
.service-link:hover {
  gap: 0.5rem;
}

/* ========== 能力卡片 ========== */
.capability-card {
  background-color: white;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(241 245 249);
  text-align: center;
  transition: all 0.2s ease;
}
.dark .capability-card {
  background-color: rgb(15 23 42);
  border-color: rgb(30 41 59);
}
.capability-card:hover {
  border-color: rgb(199 210 254);
  transform: scale(1.02);
}
.dark .capability-card:hover {
  border-color: rgb(67 89 202);
}

.capability-num {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgb(31 63 199);
  font-family: 'JetBrains Mono', monospace;
}
.dark .capability-num {
  color: rgb(129 140 248);
}

.capability-name {
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 0.25rem;
  color: rgb(15 23 42);
}
.dark .capability-name {
  color: white;
}

/* ========== PDF 列表行 ========== */
.pdf-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  transition: background-color 0.15s ease;
}
.pdf-row:hover {
  background-color: rgb(248 250 252);
}
.dark .pdf-row:hover {
  background-color: rgb(30 41 59 / 0.5);
}

.pdf-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(241 245 249);
  color: rgb(71 85 105);
}
.dark .pdf-icon {
  background-color: rgb(30 41 59);
  color: rgb(203 213 225);
}

/* 各格式文件图标配色 */
.pdf-icon-pdf  { background-color: rgb(254 226 226); color: rgb(185 28 28); }
.pdf-icon-zip,
.pdf-icon-rar  { background-color: rgb(254 243 199); color: rgb(180 83 9); }
.pdf-icon-doc,
.pdf-icon-docx { background-color: rgb(219 234 254); color: rgb(29 78 216); }
.pdf-icon-xls,
.pdf-icon-xlsx { background-color: rgb(220 252 231); color: rgb(21 128 61); }
.pdf-icon-dwg  { background-color: rgb(224 231 255); color: rgb(67 56 202); }
.pdf-icon-mp4,
.pdf-icon-mov  { background-color: rgb(243 232 255); color: rgb(126 34 206); }

.dark .pdf-icon-pdf  { background-color: rgb(127 29 29 / 0.45); color: rgb(252 165 165); }
.dark .pdf-icon-zip,
.dark .pdf-icon-rar  { background-color: rgb(120 53 15 / 0.45); color: rgb(252 211 77); }
.dark .pdf-icon-doc,
.dark .pdf-icon-docx { background-color: rgb(30 58 138 / 0.45); color: rgb(147 197 253); }
.dark .pdf-icon-xls,
.dark .pdf-icon-xlsx { background-color: rgb(20 83 45 / 0.45); color: rgb(134 239 172); }
.dark .pdf-icon-dwg  { background-color: rgb(49 46 129 / 0.45); color: rgb(165 180 252); }
.dark .pdf-icon-mp4,
.dark .pdf-icon-mov  { background-color: rgb(88 28 135 / 0.45); color: rgb(216 180 254); }

/* ========== 分类徽章 ========== */
.category-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid;
}
.cat-S { background-color: rgb(219 234 254); color: rgb(29 78 216); border-color: rgb(147 197 253); }
.cat-J { background-color: rgb(220 252 231); color: rgb(21 128 61); border-color: rgb(134 239 172); }
.cat-D { background-color: rgb(254 243 199); color: rgb(180 83 9); border-color: rgb(253 224 71); }
.cat-G { background-color: rgb(243 232 255); color: rgb(126 34 206); border-color: rgb(216 180 254); }
.cat-R { background-color: rgb(254 226 226); color: rgb(185 28 28); border-color: rgb(252 165 165); }
.cat-K { background-color: rgb(252 231 243); color: rgb(157 23 77); border-color: rgb(249 168 212); }
.cat-T { background-color: rgb(224 231 255); color: rgb(67 56 202); border-color: rgb(165 180 252); }
.cat-X { background-color: rgb(207 250 254); color: rgb(14 116 144); border-color: rgb(103 232 249); }
.cat-Y { background-color: rgb(255 237 213); color: rgb(194 65 12); border-color: rgb(253 186 116); }
.cat-Q { background-color: rgb(237 233 254); color: rgb(91 33 182); border-color: rgb(196 181 253); }
.cat-other { background-color: rgb(241 245 249); color: rgb(71 85 105); border-color: rgb(203 213 225); }

.dark .cat-S { background-color: rgb(30 58 138 / 0.4); color: rgb(147 197 253); border-color: rgb(30 58 138); }
.dark .cat-J { background-color: rgb(20 83 45 / 0.4); color: rgb(134 239 172); border-color: rgb(20 83 45); }
.dark .cat-D { background-color: rgb(113 63 18 / 0.4); color: rgb(253 224 71); border-color: rgb(113 63 18); }
.dark .cat-G { background-color: rgb(88 28 135 / 0.4); color: rgb(216 180 254); border-color: rgb(88 28 135); }
.dark .cat-R { background-color: rgb(127 29 29 / 0.4); color: rgb(252 165 165); border-color: rgb(127 29 29); }
.dark .cat-K { background-color: rgb(131 24 67 / 0.4); color: rgb(249 168 212); border-color: rgb(131 24 67); }
.dark .cat-T { background-color: rgb(49 46 129 / 0.4); color: rgb(165 180 252); border-color: rgb(49 46 129); }
.dark .cat-X { background-color: rgb(8 145 178 / 0.3); color: rgb(103 232 249); border-color: rgb(8 145 178); }
.dark .cat-Y { background-color: rgb(124 45 18 / 0.4); color: rgb(253 186 116); border-color: rgb(124 45 18); }
.dark .cat-Q { background-color: rgb(76 29 149 / 0.4); color: rgb(196 181 253); border-color: rgb(76 29 149); }
.dark .cat-other { background-color: rgb(30 41 59); color: rgb(203 213 225); border-color: rgb(51 65 85); }

/* ========== 列表操作按钮 ========== */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all 0.15s ease;
  cursor: pointer;
  border: none;
}
.action-btn-secondary {
  background-color: rgb(241 245 249);
  color: rgb(71 85 105);
}
.dark .action-btn-secondary {
  background-color: rgb(30 41 59);
  color: rgb(203 213 225);
}
.action-btn-secondary:hover {
  background-color: rgb(226 232 240);
}
.dark .action-btn-secondary:hover {
  background-color: rgb(51 65 85);
}

.action-btn-primary {
  background-color: rgb(31 63 199);
  color: white;
}
.action-btn-primary:hover {
  background-color: rgb(25 47 160);
  box-shadow: 0 4px 12px -2px rgba(31, 63, 199, 0.4);
}
.action-btn-share {
  background-color: rgb(13 148 76);
  color: white;
}
.action-btn-share:hover {
  background-color: rgb(21 128 61);
  box-shadow: 0 4px 12px -2px rgba(13, 148, 76, 0.45);
}
.action-btn-share svg {
  transition: transform 0.2s ease;
}
.action-btn-share:hover svg {
  transform: translateX(2px);
}
.dark .action-btn-share {
  background-color: rgb(34 197 94);
  color: rgb(5 46 22);
}
.dark .action-btn-share:hover {
  background-color: rgb(74 222 128);
}

/* ========== 分类标签 ========== */
.tag {
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  background-color: rgb(241 245 249);
  color: rgb(71 85 105);
  border: 1px solid transparent;
  transition: all 0.15s ease;
  cursor: pointer;
}
.dark .tag {
  background-color: rgb(30 41 59);
  color: rgb(203 213 225);
}
.tag:hover {
  background-color: rgb(226 232 240);
}
.dark .tag:hover {
  background-color: rgb(51 65 85);
}

.tag-active {
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  background-color: rgb(31 63 199);
  color: white;
  border: 1px solid rgb(31 63 199);
  box-shadow: 0 4px 12px -2px rgba(31, 63, 199, 0.4);
  cursor: pointer;
}

/* ========== 分页 ========== */
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  background-color: white;
  color: rgb(71 85 105);
  border: 1px solid rgb(226 232 240);
  transition: all 0.15s ease;
  cursor: pointer;
}
.dark .page-btn {
  background-color: rgb(30 41 59);
  color: rgb(203 213 225);
  border-color: rgb(51 65 85);
}
.page-btn:hover:not(:disabled) {
  border-color: rgb(31 63 199);
  color: rgb(31 63 199);
}
.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-btn-active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  background-color: rgb(31 63 199);
  color: white;
  border: 1px solid rgb(31 63 199);
  cursor: pointer;
}

/* ========== 信息行 ========== */
.info-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed rgb(226 232 240);
}
.dark .info-row {
  border-bottom-color: rgb(51 65 85);
}
.info-row:last-child {
  border-bottom: none;
}

.info-label {
  flex-shrink: 0;
  width: 4rem;
  font-size: 0.75rem;
  color: rgb(100 116 139);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 2px;
}
.dark .info-label {
  color: rgb(148 163 184);
}

.info-value {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(15 23 42);
}
.dark .info-value {
  color: white;
}

/* ========== 迷你信息 ========== */
.info-mini {
  padding: 0.75rem;
  background-color: rgb(248 250 252);
  border-radius: 0.5rem;
}
.dark .info-mini {
  background-color: rgb(15 23 42);
}
.info-mini-label {
  font-size: 0.6875rem;
  color: rgb(100 116 139);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.dark .info-mini-label {
  color: rgb(148 163 184);
}
.info-mini-value {
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 0.25rem;
  color: rgb(15 23 42);
}
.dark .info-mini-value {
  color: white;
}

/* ========== 时间轴 ========== */
.timeline {
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0.875rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(to bottom, rgb(199 210 254), rgb(226 232 240));
}
.dark .timeline::before {
  background: linear-gradient(to bottom, rgb(67 89 202), rgb(51 65 85));
}

.timeline-item {
  position: relative;
}
.timeline-dot {
  position: absolute;
  left: -2rem;
  top: 0.375rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 0 2px rgb(199 210 254);
}
.dark .timeline-dot {
  border-color: rgb(15 23 42);
}

.timeline-year {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgb(31 63 199);
  background-color: rgb(219 234 254);
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}
.dark .timeline-year {
  color: rgb(165 180 252);
  background-color: rgb(30 58 138 / 0.4);
}

@media (min-width: 640px) {
  .timeline::before {
    left: 1.625rem;
  }
  .timeline-dot {
    left: -1.25rem;
  }
}

/* ========== 联系卡片 ========== */
.contact-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem;
  border-radius: 0.625rem;
  transition: background-color 0.15s ease;
}
.contact-item:hover {
  background-color: rgb(248 250 252);
}
.dark .contact-item:hover {
  background-color: rgb(30 41 59);
}

.contact-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== 表单 ========== */
.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(71 85 105);
  margin-bottom: 0.375rem;
}
.dark .form-label {
  color: rgb(203 213 225);
}

.form-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  background-color: rgb(248 250 252);
  border: 1px solid rgb(226 232 240);
  font-size: 0.875rem;
  color: rgb(15 23 42);
  transition: all 0.15s ease;
  outline: none;
}
.form-input:focus {
  border-color: rgb(31 63 199);
  background-color: white;
  box-shadow: 0 0 0 3px rgba(31, 63, 199, 0.1);
}
.form-input::placeholder {
  color: rgb(148 163 184);
}
.dark .form-input {
  background-color: rgb(15 23 42);
  border-color: rgb(51 65 85);
  color: white;
}
.dark .form-input:focus {
  border-color: rgb(99 102 241);
  background-color: rgb(15 23 42);
}
textarea.form-input {
  height: auto;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* ========== 选中文本高亮 ========== */
::selection {
  background-color: rgba(245, 158, 11, 0.3);
  color: rgb(15 23 42);
}
.dark ::selection {
  background-color: rgba(245, 158, 11, 0.4);
  color: white;
}

/* ========== 移动端微调 ========== */
@media (max-width: 768px) {
  .pdf-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .pdf-row > div {
    padding-left: 0 !important;
  }
}

/* ========== 项目案例缩略图轮播 ========== */
.animation-paused {
  animation-play-state: paused !important;
}