/* SuinWeb 2026 — merged custom styles from all Stitch pages */

/* --- _1/code.html --- */
.glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(22, 93, 255, 0.1);
            box-shadow: 0 8px 32px rgba(22, 93, 255, 0.08);
        }
        .data-flow-bg {
            background-image: radial-gradient(circle at 2px 2px, rgba(15, 198, 194, 0.05) 1px, transparent 0);
            background-size: 24px 24px;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            vertical-align: middle;
        }
        @keyframes float-slow {
            0%, 100% { transform: translateY(0px) translateX(0px); }
            50% { transform: translateY(-20px) translateX(10px); }
        }
        .ai-particle {
            animation: float-slow 8s ease-in-out infinite;
        }
        .hover-lift:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(15, 198, 194, 0.15);
        }
        .tech-cyan-icon {
            color: #0FC6C2 !important;
        }
        .product-card-glow {
            transition: all 0.4s ease;
            border: 1px solid rgba(22, 93, 255, 0.08);
        }
        .product-card-glow:hover {
            border-color: rgba(22, 93, 255, 0.4);
            box-shadow: 0 0 30px rgba(22, 93, 255, 0.15);
        }
        .tech-mesh-bg {
            background-color: #faf8ff;
            background-image: 
                radial-gradient(at 0% 0%, rgba(22, 93, 255, 0.03) 0, transparent 50%), 
                radial-gradient(at 50% 0%, rgba(15, 198, 194, 0.03) 0, transparent 50%),
                radial-gradient(at 100% 0%, rgba(22, 93, 255, 0.03) 0, transparent 50%);
        }
        .timeline-line {
            background: linear-gradient(90deg, transparent, rgba(0, 71, 207, 0.2), transparent);
        }


/* --- _2/code.html --- */
.glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(115, 118, 136, 0.1);
        }
        .data-flow-bg {
            background-image: radial-gradient(circle at 2px 2px, rgba(0, 71, 207, 0.05) 1px, transparent 0);
            background-size: 32px 32px;
        }
        .perspective-lg {
            perspective: 1000px;
        }
        .rotate-x-12 {
            transform: rotateX(12deg);
        }
        .gradient-mask-t {
            mask-image: linear-gradient(to top, transparent, black 15%);
        }
        /* 仅画到当前步骤右缘：left 50% + width 100% 会到 150% 父宽，移动端/桌面均易横向溢出 */
        .step-connect::after {
            content: '';
            position: absolute;
            top: 2rem;
            left: 50%;
            width: 50%;
            height: 2px;
            background: repeating-linear-gradient(to right, #0047cf, #0047cf 4px, transparent 4px, transparent 8px);
            z-index: 0;
            opacity: 0.2;
            pointer-events: none;
        }


/* --- _3/code.html --- */
.glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .gravity-gradient {
            background: radial-gradient(circle at 50% 50%, rgba(22, 93, 255, 0.08) 0%, transparent 70%);
        }
        .particle-bg {
            background-image: radial-gradient(#0047cf 0.8px, transparent 0.8px);
            background-size: 32px 32px;
            opacity: 0.05;
        }
        .arch-connector {
            background: linear-gradient(to bottom, #0047cf 0%, #006a67 50%, #003bb0 100%);
        }
        .timeline-line {
            background: linear-gradient(to right, transparent, rgba(0, 71, 207, 0.2), rgba(0, 71, 207, 0.2), transparent);
        }


/* --- _4/code.html --- */
.glass-effect {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(115, 118, 136, 0.1);
        }
        .data-flow-bg {
            background-image: radial-gradient(circle at 2px 2px, rgba(22, 93, 255, 0.05) 1px, transparent 0);
            background-size: 24px 24px;
        }
        .tech-shadow {
            box-shadow: 0 8px 32px rgba(22, 93, 255, 0.08);
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            vertical-align: middle;
        }


/* --- _5/code.html --- */
.glass-effect {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(115, 118, 136, 0.1);
        }
        .data-flow-bg {
            background-image: radial-gradient(circle at 2px 2px, rgba(0, 71, 207, 0.05) 1px, transparent 0);
            background-size: 24px 24px;
        }
        .gradient-text {
            background: linear-gradient(135deg, #0047cf 0%, #165dff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }


/* --- _6/code.html --- */
.glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(195, 197, 217, 0.2);
            box-shadow: 0 8px 32px rgba(22, 93, 255, 0.08);
        }
        .data-flow-line {
            background: linear-gradient(90deg, transparent, rgba(0, 71, 207, 0.2), transparent);
            height: 1px;
            width: 100%;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .gradient-text {
            background: linear-gradient(135deg, #0047cf, #165dff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }


/* --- _7/code.html --- */
.glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(115, 118, 136, 0.1);
        }
        .data-flow-line {
            background: linear-gradient(90deg, transparent, #165dff, transparent);
            height: 1px;
            width: 100%;
            position: absolute;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }


/* --- _8/code.html --- */
.glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(115, 118, 136, 0.1);
            box-shadow: 0 8px 32px rgba(22, 93, 255, 0.08);
        }
        .data-flow-line {
            background: linear-gradient(90deg, transparent, #165dff, transparent);
            height: 1px;
            width: 100%;
            position: absolute;
            opacity: 0.2;
        }
        .text-gradient-primary {
            background: linear-gradient(135deg, #0047cf 0%, #60f5f0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }


/* --- _9/code.html --- */
.glass-card {
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
        }
        .data-flow-bg {
            background-image: radial-gradient(circle at 2px 2px, rgba(22, 93, 255, 0.05) 1px, transparent 0);
            background-size: 24px 24px;
        }
        .tech-pattern {
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230047cf' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2v-4h4v-2h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2v-4h4v-2H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            display: inline-block;
            vertical-align: middle;
        }
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .animate-marquee {
            animation: marquee 40s linear infinite;
        }
        @media (max-width: 767px) {
            .animate-marquee {
                animation: none !important;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .animate-marquee {
                animation: none !important;
            }
        }
        .suin-partner-logo {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 3rem;
            width: 7rem;
            min-width: 7rem;
            border-radius: 0.5rem;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: 0.02em;
            color: #5c5f6e;
            background: #eef2f7;
            transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
            cursor: default;
            filter: grayscale(1);
        }
        .suin-partner-logo:has(img) {
            padding: 0.25rem 0.5rem;
            background: #fff;
        }
        .suin-partner-logo img {
            max-height: 100%;
            max-width: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
        }
        @media (min-width: 640px) {
            .suin-partner-logo {
                height: 3.5rem;
                width: 8rem;
                min-width: 8rem;
                font-size: 12px;
                border-radius: 0.75rem;
            }
        }
        @media (min-width: 768px) {
            .suin-partner-logo {
                height: 4rem;
                width: 10rem;
                min-width: 10rem;
                font-size: 1rem;
                border-radius: 0.75rem;
            }
        }
        @media (hover: hover) {
            .suin-partner-logo:hover {
                color: #0047cf;
                background: #fff;
                box-shadow: 0 8px 24px rgba(22, 93, 255, 0.12);
                filter: grayscale(0);
            }
        }
        .filter-tag-active {
            box-shadow: 0 0 0 2px rgba(0, 71, 207, 0.1), 0 4px 12px rgba(0, 71, 207, 0.15);
        }


/* --- _10/code.html --- */
.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 8px 32px -4px rgba(0, 71, 207, 0.08);
        }
        .text-gradient {
            background: linear-gradient(135deg, #0047cf 0%, #165dff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .timeline-dot::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            background: #e1e1ef;
            top: 50%;
            left: 50%;
            z-index: -1;
        }
        .grid-pattern {
            background-image: radial-gradient(rgba(0, 71, 207, 0.1) 1px, transparent 1px);
            background-size: 32px 32px;
        }


/* --- _11/code.html --- */
.glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(200, 200, 220, 0.2);
            box-shadow: 0 8px 32px rgba(22, 93, 255, 0.08);
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }


/* --- _12/code.html --- */
.glass-effect {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(115, 118, 136, 0.1);
        }
        .data-flow-bg {
            background-image: radial-gradient(circle at 2px 2px, rgba(0, 71, 207, 0.05) 1px, transparent 0);
            background-size: 32px 32px;
        }


/* --- _13/code.html --- */
.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(115, 118, 136, 0.1);
        }
        .data-flow-line {
            background: linear-gradient(90deg, transparent, #165dff, transparent);
            height: 1px;
            width: 100%;
        }


/* --- ai/code.html --- */
body { background-color: #faf8ff; color: #191b24; -webkit-font-smoothing: antialiased; }
        .glass-card { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(16px); border: 1px solid rgba(115, 118, 136, 0.1); }
        .data-glow { box-shadow: 0 8px 32px rgba(22, 93, 255, 0.08); }
        .tech-gradient { background: linear-gradient(135deg, #0047cf 0%, #165dff 100%); }
        .particle-gravity { background-image: radial-gradient(circle at 2px 2px, rgba(22, 93, 255, 0.05) 1px, transparent 0); background-size: 24px 24px; }


/* --- aidgp_ai/code.html --- */
.glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(115, 118, 136, 0.1);
        }
        .hero-gradient {
            background: radial-gradient(circle at 50% 50%, rgba(22, 93, 255, 0.05) 0%, rgba(250, 248, 255, 0) 100%);
        }
        .data-flow-line {
            background: linear-gradient(90deg, transparent, rgba(0, 71, 207, 0.2), transparent);
            height: 1px;
            width: 100%;
        }


/* --- dataapi/code.html --- */
.glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(115, 118, 136, 0.1);
        }
        .data-flow-line {
            background: linear-gradient(90deg, transparent, #165dff, transparent);
            height: 1px;
            width: 100%;
            position: absolute;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

/* --- SuinWeb: mobile drawer navigation --- */
@media (min-width: 768px) {
  #site-nav-backdrop,
  #site-nav-drawer,
  #site-nav-toggle {
    display: none !important;
  }
}

body.site-nav-open {
  overflow: hidden;
  touch-action: none;
}

#site-nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

#site-nav-drawer.is-open {
  transform: translateX(0);
}

#site-nav-drawer {
  will-change: transform;
}

/* 移动端通用：略收紧水平边距、避免图片撑破布局 */
@media (max-width: 767px) {
  .px-margin {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  main img {
    max-width: 100%;
  }
}

/* 横向标签筛选：隐藏滚动条（仍可用触摸/滚轮横向滑动） */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* 首页「核心优势」数字：计数结束后轻微弹跳强调 */
.home-stat-value {
  transform-origin: center bottom;
}

.home-stat-value--done {
  animation: homeStatPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes homeStatPop {
  0% {
    transform: scale(0.94);
  }
  55% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-stat-value--done {
    animation: none;
  }
}

/* services.html 等：纵向堆叠时隐藏步骤间横线，避免视觉干扰 */
@media (max-width: 767px) {
  .step-connect::after {
    display: none;
  }
}

/* 帝国 listpagelistfun → user_ShowListMorePage
 * 桌面：首页/上一页/页码/下一页/尾页（文字，对齐原 gp-page 分支）；移动：仅上一页/下一页；639px 切换 */
.suin-list-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-inline: clamp(0.75rem, 3vw, 2rem);
}

.suin-lp-desktop {
  display: flex;
  width: 100%;
  justify-content: center;
}

.suin-lp-mobile {
  display: none;
  width: 100%;
  justify-content: center;
}

.suin-lp-mobile-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 22rem;
}

.suin-lp-mbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-outline-variant, #c3c5d9);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--color-on-surface, #191b24);
  box-sizing: border-box;
  background: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

a.suin-lp-mbtn:hover {
  background: var(--color-surface-container, #ededfa);
}

.suin-lp-mbtn--disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
  border-color: color-mix(in srgb, var(--color-outline-variant, #c3c5d9) 55%, transparent);
}

.suin-lp-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  box-sizing: border-box;
}

.suin-lp-num,
.suin-lp-edge {
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
}

.suin-lp-edge {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  min-height: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-on-surface-variant, #434656);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

a.suin-lp-edge:hover {
  border-color: color-mix(in srgb, var(--color-outline-variant, #c3c5d9) 60%, transparent);
  color: var(--color-primary, #0047cf);
  background: color-mix(in srgb, var(--color-on-surface, #191b24) 4%, transparent);
}

.suin-lp-edge--disabled {
  opacity: 0.42;
  pointer-events: none;
  cursor: not-allowed;
  border-color: transparent;
  color: var(--color-outline, #737688);
  background: transparent;
}

.suin-lp-nums {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  box-sizing: border-box;
}

.suin-lp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0 0.35rem;
  border: 1px solid var(--color-outline-variant, #c3c5d9);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Geist", "Inter", system-ui, sans-serif;
  color: var(--color-on-surface, #191b24);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.suin-lp-num:hover {
  background: var(--color-surface-container, #ededfa);
}

.suin-lp-num--current {
  background: var(--color-primary, #0047cf);
  color: var(--color-on-primary, #ffffff);
  border-color: transparent;
  cursor: default;
}

@media (min-width: 640px) {
  .suin-lp-edge {
    display: inline-flex;
  }
}

@media (max-width: 639px) {
  .suin-list-pagination {
    margin-top: 1.25rem;
    padding-inline: 1rem;
  }

  .suin-lp-desktop {
    display: none !important;
  }

  .suin-lp-mobile {
    display: flex !important;
  }
}

/* Tags：page1(...,1) / InfoUsePage(...,1) 包一层 .suin-page1-split（桌面+移动两套） */
.suin-page1-split {
  width: 100%;
}

.suin-page1-desktop {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  row-gap: 0.5rem;
}

.suin-page1-mobile {
  display: none;
  width: 100%;
  justify-content: center;
}

.suin-page1-mobile-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 22rem;
}

@media (max-width: 639px) {
  .suin-page1-desktop {
    display: none !important;
  }

  .suin-page1-mobile {
    display: flex !important;
  }
}

/* Tags / 搜索等：扁平分页样式（.page-total、.cur；兼容无 split 的旧 HTML） */
.suin-page1-wrap {
  gap: 0.35rem;
  row-gap: 0.5rem;
}

.suin-page1-wrap .suin-page1-desktop > .page-total,
.suin-page1-wrap > .page-total {
  font-size: 0.8125rem;
  color: var(--color-on-surface-variant, #434656);
  white-space: nowrap;
  padding: 0 0.25rem;
  border: none;
  background: transparent;
}

.suin-page1-wrap .suin-page1-desktop > a,
.suin-page1-wrap > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0 0.45rem;
  border: 1px solid var(--color-outline-variant, #c3c5d9);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Geist", "Inter", system-ui, sans-serif;
  text-decoration: none;
  color: var(--color-on-surface, #191b24);
  box-sizing: border-box;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.suin-page1-wrap .suin-page1-desktop > a:hover,
.suin-page1-wrap > a:hover {
  background: var(--color-surface-container, #ededfa);
}

.suin-page1-wrap .suin-page1-desktop > a.cur,
.suin-page1-wrap > a.cur {
  background: var(--color-primary, #0047cf);
  color: var(--color-on-primary, #ffffff);
  border-color: transparent;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 639px) {
  .suin-page1-wrap .suin-page1-desktop > .page-total,
  .suin-page1-wrap > .page-total {
    flex: 1 0 100%;
    text-align: center;
    padding-bottom: 0.25rem;
  }
}

/* 新闻详情正文（帝国 newstext）：段落与富文本图片自适应 */
.news-body {
  word-break: break-word;
}
.news-body > *:first-child {
  margin-top: 0;
}
.news-body p {
  margin-bottom: 1rem;
}
.news-body p:last-child {
  margin-bottom: 0;
}
.news-body img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.news-body h2,
.news-body h3 {
  color: var(--color-on-surface, #191b24);
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}
.news-body blockquote {
  margin: 1.25rem 0;
}
.news-titlepic img[src*="notimg"] {
  display: none;
}
.news-titlepic:has(img[src*="notimg"]) {
  display: none;
}