/*
 * 项目进度查询页（`/about`，2026-10-21）。
 *
 * 页面级样式单独一份，不动 `style.min.css` —— 那份是原型基准，改它会影响所有页面。
 *
 * 背景视频拷贝自 okplay 的 `login-bg.mp4`（学习中心/登录页共用），
 * 铺满整块内容区、`object-fit: cover`，透明度按 okplay 那边的 50%。
 * 视频是纯装饰：`pointer-events: none`，不挡输入框。
 */

.project-query {
   position: relative;
   /* 纵向 flex：标语 → 查询框按流排，流程图用 `margin-top: auto` 贴到底部。 */
   display: flex;
   flex-direction: column;
   /* 顶栏约 96px；减去它让首屏刚好一屏，内容再长自然撑开。 */
   min-height: clamp(520px, calc(100svh - 96px), 960px);
   overflow: hidden;
   background: #0a0512;
}

.project-query__bg {
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
}

.project-query__bg video {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* 用户在 2026-10-21 要求：满不透明，并把画面水平镜像（亮的那半边翻到屏幕右侧）。 */
   opacity: 1;
   transform: scaleX(-1);
}

/*
 * 左侧压暗：视频偏亮时白字会糊。左边深、右边透，按钮与输入框落在深的那半边。
 */
.project-query__bg::after {
   content: "";
   position: absolute;
   inset: 0;
   /* 用户 2026-10-22：去掉压暗层，背景视频按 100% 原样显示。 */
   background: none;
}

/*
 * 查询框跟着标语走（用户 2026-10-21：始终在「数字赋能…」那一行下面 20px）。
 * 标语在流里，这里只给 20px 上内边距，标语换行变高时它自动跟着下移。
 */
.project-query__inner {
   position: relative;
   z-index: 1;
   display: flex;
   /*
    * 查询框在「标语 → 流程图」之间的剩余空间里**垂直居中**；
    * `safe` 让它放不下时退回顶部，于是始终至少离标语 20px（padding-top）。
    */
   align-items: center;
   align-items: safe center;
   flex: 1 1 auto;
   padding: 20px 0 0;
}

/* 左侧整块内容套一个透明底框（用户 2026-10-21）：
 * 只描边、不填色，圆角比输入框大一级。 */
.project-query__panel {
   max-width: 380px;
   /* 底部 16px：框底到「项目进度查询」按钮的距离（用户 2026-10-22）。 */
   /* 顶部等值（用户 2026-10-23）：标题文字到外框的间距 = 按钮底到外框的间距。
      标题有 25px 行高（20px × 1.25），文字上沿还差约 2.5px 的 leading，所以 padding-top 取 12px。 */
   padding: 12px 28px 15px;
   /* 整框右移 60px（用户 2026-10-22）。 */
   margin-left: 60px;
   border: 1px solid rgba(255, 255, 255, .22);
   border-radius: 20px;
   background: transparent;
   position: relative;
   isolation: isolate;
}

/*
 * 渐变描边（用户 2026-10-22）：双层 mask 抠出中间，只留 1px 边 ——
 * 写法与 `shell-fixes.css` 里 `.btn-gradient-border::before` 相同，
 * 取值就是站点那五段品牌渐变。`pointer-events: none` 必加，否则盖住输入框点不到。
 */
.project-query__panel::before {
   content: "";
   position: absolute;
   inset: 0;
   padding: 1px;
   border-radius: inherit;
   background-image: linear-gradient(131.19deg, #f85e76 .853%, #a324b0 21.993%, #7807cd 45.503%, #514fd8 74.136%, #2baedf 103.716%);
   -webkit-mask: conic-gradient(#000 0 0) content-box, conic-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask: conic-gradient(#000 0 0) content-box exclude, conic-gradient(#000 0 0);
   pointer-events: none;
}

/*
 * 居中大标语（用户 2026-10-21）：水平居中、距顶部导航底部 20px。
 * 渐变与页头标语同一串品牌渐变；字号 50px / 斜体是用户指定值。
 *
 * `position: relative` + `z-index` 是必须的：背景视频是 `absolute` 的定位元素，
 * 普通流里的文字会被它盖住。
 */
.project-query__slogan {
   position: relative;
   z-index: 1;
   /* 段落顶部就是导航底边（header 是 sticky、在流里），10px 直接就是间距（用户 2026-10-23）。 */
   margin: 10px auto 0;
   max-width: calc(100% - 80px);
   background: linear-gradient(131.19deg, #f85e76 3.025%, #a324b0 22.986%, #7807cd 45.185%, #514fd8 72.222%, #2baedf 100.153%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   text-fill-color: transparent;
   font-size: 50px;
   font-weight: 700;
   font-style: italic;
   line-height: 1.4;
   text-align: center;
   white-space: nowrap;
}

/*
 * ── 项目流程导图 ─────────────────────────────────────────────────────────
 * 版式来自 `项目流程导图.html`（用户提供）：玻璃卡 + 连线 + 箭头。
 *
 * 2026-10-22 用户把 16 步两行蛇形改成 **11 步单行**，并要求「正好占满内容宽度」：
 * 卡片 `flex: 1` 均分整行，整块宽度就是 `.container`（与首页同一个
 * `min(100% - 80px, 1360px)`）。卡片仍是正方形（`aspect-ratio: 1`）。
 */
/*
 * 流程块本身**贴内容区底部**（用户 2026-10-22）：`.project-query` 是纵向 flex，
 * 这里 `margin-top: auto` 把它顶到底边；宽度与首页容器一致。
 */
.project-flow {
   position: relative;
   z-index: 1;
   width: min(100% - 80px, 1360px);
   margin: auto auto 0;
   padding: 20px 0 72px;
}

.project-flow__title {
   margin: 0 0 24px;
   text-align: center;
   font-size: clamp(20px, 2vw, 28px);
   font-weight: 600;
   letter-spacing: .12em;
   /* 行高必须显式给：继承下来的是 18.9px（小于 28px 字号），
      `background-clip:text` 会把字形上下截掉，看起来像被挡住（用户 2026-10-23）。 */
   line-height: 1.3;
   padding: 2px 0 4px;
   /* 用户 2026-10-22：标题改成品牌渐变色。 */
   background: linear-gradient(90deg, #f16da9 0%, #b859ed 50%, #53b8f6 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
}

.project-flow__grid {
   --flow-gap: clamp(8px, 1.1vw, 22px);
}

.project-flow__row {
   display: flex;
   gap: var(--flow-gap);
   position: relative;
}

.project-flow__step {
   position: relative;
   /* 现在是 <button>：清掉浏览器默认外观，保持原来的卡片视觉。 */
   padding: 0;
   font: inherit;
   color: inherit;
   text-align: inherit;
   cursor: pointer;
   appearance: none;
   flex: 1 1 0;
   min-width: 0;
   /* 正方形：高度跟着均分后的宽度走。 */
   aspect-ratio: 1 / 1;
   border: 1.5px solid rgba(158, 179, 255, .95);
   border-radius: 20px;
   background: linear-gradient(145deg, rgba(175, 197, 255, .20), rgba(74, 91, 170, .12) 55%, rgba(124, 137, 255, .26));
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
   box-shadow: inset 0 1px rgba(235, 242, 255, .18), 0 14px 35px rgba(29, 36, 116, .22);
   transition: transform .2s ease;
}

/* 悬停轻微上移（用户 2026-10-21） */
.project-flow__step:hover {
   transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
   .project-flow__step {
      transition: none;
   }

   .project-flow__step:hover {
      transform: none;
   }
}

.project-flow__step::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
   background: radial-gradient(circle at 8% 0%, rgba(184, 226, 255, .14), transparent 48%);
}

.project-flow__num {
   position: absolute;
   top: 9px;
   left: 11px;
   color: #a8e8ff;
   font: 300 clamp(15px, 1.3vw, 20px)/1 Arial, sans-serif;
}

.project-flow__icon {
   display: block;
   width: clamp(24px, 2.3vw, 34px);
   height: clamp(24px, 2.3vw, 34px);
   margin: 27px auto 0;
   color: #bfeaff;
   filter: drop-shadow(0 0 7px rgba(102, 210, 255, .32));
}

.project-flow__icon path,
.project-flow__icon rect,
.project-flow__icon circle,
.project-flow__icon polyline,
.project-flow__icon line {
   fill: none;
   stroke: currentColor;
   stroke-width: 2.6;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* 卡片文字：默认 68% 白，悬停回到 100%（用户 2026-10-21） */
.project-flow__name {
   position: absolute;
   left: 4px;
   right: 4px;
   bottom: 9px;
   text-align: center;
   /* 用户 2026-10-23：卡片文字 16px。 */
   font-size: 16px;
   line-height: 1.15;
   font-weight: 500;
   letter-spacing: .01em;
   white-space: nowrap;
   color: rgba(255, 255, 255, .68);
   transition: color .2s ease;
}

.project-flow__step:hover .project-flow__name {
   color: #fff;
}

@media (prefers-reduced-motion: reduce) {
   .project-flow__name {
      transition: none;
   }
}

/* 卡片之间的连线 + 箭头（单行、全部朝右） */
.project-flow__row .project-flow__step:not(:last-child)::after {
   content: "";
   position: absolute;
   width: calc(var(--flow-gap) - 10px);
   top: 50%;
   left: calc(100% + 5px);
   border-top: 1.5px solid #8da9ff;
   filter: drop-shadow(0 0 5px #83d8ff);
}

.project-flow__arrow {
   position: absolute;
   top: calc(50% - 5px);
   right: -18px;
   transform: rotate(45deg);
   width: 9px;
   height: 9px;
   border-right: 2px solid #b9c8ff;
   border-top: 2px solid #b9c8ff;
   filter: drop-shadow(0 0 5px #83d8ff);
}

/*
 * 窄屏：11 张正方形并排会缩成 20 多像素一张，读不了。
 * 改成**横向滚动**的单行，卡片保持 96px 见方，行宽按内容撑开。
 */
@media (max-width: 900px) {
   .project-flow__grid {
      overflow-x: auto;
      padding-bottom: 6px;
      /* 触屏横向滑动时不要顺带翻页/缩放。 */
      touch-action: pan-x;
   }

   .project-flow__row {
      width: max-content;
      gap: 10px;
   }

   .project-flow__step {
      flex: 0 0 auto;
      width: 96px;
   }

   .project-flow__num {
      top: 8px;
      left: 10px;
      font-size: 16px;
   }

   .project-flow__icon {
      width: 26px;
      height: 26px;
      margin: 26px auto 0;
   }

   .project-flow__name {
      bottom: 8px;
      font-size: 11px;
   }
}

.project-query__title {
   margin: 0;
   /* 用户 2026-10-22：标题在框内居中。 */
   text-align: center;
   font-size: 20px;
   font-weight: 700;
   line-height: 1.25;
   /* 用户 2026-10-22：标题文字改成蓝色。 */
   color: #2f80ed;
   letter-spacing: .02em;
}

.project-query__desc {
   margin: 12px 0 0;
   font-size: 15px;
   line-height: 1.6;
   color: rgba(255, 255, 255, .62);
}

.project-query__form {
   display: flex;
   flex-direction: column;
   gap: 10px;
   /* 用户 2026-10-22：表单整体上移 15px（32 → 17）。 */
   margin-top: 17px;
}

.project-query__label {
   font-size: 14px;
   color: rgba(255, 255, 255, .75);
}

.project-query__input {
   width: 100%;
   height: 48px;
   padding: 0 16px;
   border: 1px solid rgba(255, 255, 255, .22);
   border-radius: 12px;
   background: rgba(255, 255, 255, .08);
   color: #fff;
   font-family: inherit;
   font-size: 15px;
   outline: none;
   transition: border-color .2s ease, background-color .2s ease;
}

.project-query__input::placeholder {
   color: rgba(255, 255, 255, .38);
}

.project-query__input:focus-visible {
   border-color: rgba(184, 76, 255, .8);
   background: rgba(255, 255, 255, .12);
}

.project-query__submit {
   width: 100%;
   height: 48px;
   margin-top: 6px;
   padding: 0 24px;
   border: 0;
   cursor: pointer;
}

/*
 * 悬停/聚焦换成蓝青渐变（用户 2026-10-21）。
 *
 * 选择器带上 `.project-query`：`style.min.css` 里还有一条 `.btn:hover`
 * （把 `background` 改成半透明白），同权重下谁后加载谁赢 —— 这里提高一级权重，不靠顺序。
 */
.project-query .project-query__submit:hover,
.project-query .project-query__submit:focus-visible {
   background: linear-gradient(90deg, #2f80ed 0%, #2baedf 50%, #35e0d0 100%);
}

/*
 * 页头对齐首页。
 *
 * 首页那份样式表（`prototype-home.css`）把 logo 与标语排成一行
 * （`.header__brand` 是 flex 行、gap 18px），标语本身是 16px/700 的渐变字。
 * 本页不加载那份样式表，标语就退回行内默认样式、掉到 logo 下面 ——
 * 与首页一比 `x` 差 150px、页头还高 18px（实测 7.16）。
 * 这里补同样的一套，只在本页生效（`PrototypeStyles` 按页启停）。
 */
/*
 * 顶部导航吸顶（用户 2026-10-21：「像首页一样」）。
 * 首页那条写在 `prototype-home.css` 里：`position: sticky; top: 0`。
 * 本页不加载那份，补同一条。
 */
.header {
   position: sticky;
   top: 0;
   background: transparent;
}

/*
 * 页头两个按钮（ok学院 / 在线咨询）悬停轻微上移（用户 2026-10-21）。
 * 只在本页生效 —— 要全站都这样，得挪到 `shell-fixes.css`，那会影响像素对照基线。
 */
.header .header__buttons > a,
.header .header__buttons > button {
   transition: transform .2s ease;
}

.header .header__buttons > a:hover,
.header .header__buttons > button:hover {
   transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
   .header .header__buttons > a,
   .header .header__buttons > button {
      transition: none;
   }

   .header .header__buttons > a:hover,
   .header .header__buttons > button:hover {
      transform: none;
   }
}

.header__brand {
   display: flex;
   align-items: center;
   gap: 18px;
   min-width: 0;
}

.header__tagline {
   background: linear-gradient(131.19deg, #f85e76 3.025%, #a324b0 22.986%, #7807cd 45.185%, #514fd8 72.222%, #2baedf 100.153%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   text-fill-color: transparent;
   font-size: 16px;
   font-weight: 700;
   line-height: 1.4;
   white-space: nowrap;
}

@media (max-width: 700px) {
   .header__brand {
      gap: 10px;
   }

   .header__tagline {
      font-size: 12px;
      white-space: normal;
      max-width: 150px;
   }
}

.project-query__hint {
   margin: 12px 0 0;
   font-size: 13px;
   line-height: 1.5;
   color: rgba(255, 255, 255, .7);
}

/* 50px + `nowrap` 大约要 850px 宽；1024 及以下会顶出视口，提前换行。 */
@media (max-width: 1100px) {
   .project-query__slogan {
      max-width: calc(100% - 96px);
      font-size: clamp(26px, 4.4vw, 40px);
      white-space: normal;
   }
}

@media (max-width: 767px) {
   .project-query {
      min-height: calc(100svh - 72px);
   }

   .project-query__inner {
      padding: 20px 0 0;
   }

   .project-query__panel {
      max-width: none;
      margin-left: 0;
   }

   /* 标题统一 20px（用户 2026-10-22），窄屏也不再放大。 */

   /* 50px 在窄屏放不下 17 个字：换成两行、字号降到 20px。 */
   .project-query__slogan {
      max-width: calc(100% - 48px);
      font-size: 20px;
      white-space: normal;
   }

   .project-query__panel {
      /* 窄屏同样：标题到框顶 = 按钮底到框底（12 + 15）。 */
      padding: 12px 22px 15px;
   }

   .project-query__bg::after {
      background: none;
   }
}

@media (prefers-reduced-motion: reduce) {
   .project-query__input {
      transition: none;
   }
}

/* --------------------------- 验证码行与查询结果 --------------------------- */

.project-query__captcha {
   display: flex;
   gap: 8px;
   align-items: stretch;
}

.project-query__captcha .project-query__input {
   flex: 1 1 auto;
   min-width: 0;
}

.project-query__captcha-image {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 110px;
   height: 48px;
   padding: 0 8px;
   border: 1px solid rgba(255, 255, 255, .22);
   border-radius: 12px;
   background: rgba(255, 255, 255, .06);
   color: rgba(255, 255, 255, .7);
   font-size: 12px;
   cursor: pointer;
   overflow: hidden;
}

.project-query__captcha-image img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 8px;
}

.project-query__submit:disabled {
   opacity: .55;
   cursor: not-allowed;
}

/* 查询结果卡：进度条 + 节点时间线 */
.project-progress {
   margin-top: 18px;
   padding-top: 16px;
   border-top: 1px solid rgba(255, 255, 255, .12);
}

.project-progress__title {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
   color: #fff;
}

.project-progress__meta {
   margin: 6px 0 10px;
   font-size: 13px;
   color: rgba(255, 255, 255, .62);
}

.project-progress__bar {
   height: 6px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .14);
   overflow: hidden;
}

.project-progress__bar span {
   display: block;
   height: 100%;
   border-radius: inherit;
   background: linear-gradient(90deg, #2f80ed, #2baedf 50%, #35e0d0);
}

.project-progress__percent {
   margin: 6px 0 12px;
   font-size: 13px;
   color: rgba(255, 255, 255, .75);
}

.project-progress__steps {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 8px;
}

.project-progress__steps li {
   padding: 8px 10px;
   border-left: 2px solid rgba(158, 179, 255, .5);
   background: rgba(255, 255, 255, .04);
   border-radius: 0 8px 8px 0;
   font-size: 13px;
   color: rgba(255, 255, 255, .8);
}

.project-progress__steps li[data-status='completed'] {
   border-left-color: #35e0d0;
}

.project-progress__steps li[data-status='in_progress'] {
   border-left-color: #2baedf;
}

.project-progress__steps strong {
   display: block;
   color: #fff;
   font-weight: 500;
}

.project-progress__steps span {
   display: block;
   margin-top: 2px;
   font-size: 12px;
   color: rgba(255, 255, 255, .55);
}

.project-progress__steps em {
   display: block;
   margin-top: 4px;
   font-style: normal;
   font-size: 12px;
   color: rgba(255, 255, 255, .62);
}

/* ------------------------- 滑块拼图验证（弹窗内） ------------------------- */

.project-slider {
   position: fixed;
   inset: 0;
   z-index: 1200;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   background: rgba(4, 2, 10, .72);
}

.project-slider__box {
   width: min(420px, 100%);
   padding: 18px;
   border: 1px solid rgba(158, 179, 255, .45);
   border-radius: 18px;
   background: #0e0a1d;
   box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.project-slider__head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px;
}

.project-slider__head h2 {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
   color: #fff;
}

.project-slider__close {
   width: 30px;
   height: 30px;
   border: 0;
   border-radius: 50%;
   background: rgba(255, 255, 255, .08);
   color: rgba(255, 255, 255, .75);
   font-size: 18px;
   line-height: 1;
   cursor: pointer;
}

.project-slider__status {
   margin: 10px 0 0;
   font-size: 12px;
   color: rgba(255, 255, 255, .55);
   text-align: center;
}

.slider-captcha__box {
   position: relative;
   width: 100%;
   border-radius: 12px;
   overflow: hidden;
   background: #07040f;
   touch-action: none;
   cursor: grab;
   outline: none;
}

.slider-captcha__box[data-dragging='true'] {
   cursor: grabbing;
}

.slider-captcha__box:focus-visible {
   box-shadow: 0 0 0 2px rgba(184, 76, 255, .8);
}

.slider-captcha__bg {
   display: block;
   width: 100%;
   height: 100%;
   user-select: none;
   pointer-events: none;
}

.slider-captcha__piece {
   position: absolute;
   user-select: none;
   pointer-events: none;
   filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .55));
}

.slider-captcha__hint {
   margin: 8px 0 0;
   font-size: 12px;
   color: rgba(255, 255, 255, .55);
}


/* ---------- 流程卡说明弹层（用户 2026-10-22） ---------- */

/* 弹层用与节点卡同一套玻璃渐变，保证「弹出来的就是那张卡」。 */
.project-flow__modal {
   position: fixed;
   inset: 0;
   z-index: 80;
   display: grid;
   place-items: center;
   padding: 24px;
   background: rgba(4, 6, 24, .66);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
}

.project-flow__modal-box {
   width: min(460px, 100%);
   padding: 20px 24px 24px;
   border: 1.5px solid rgba(158, 179, 255, .95);
   border-radius: 20px;
   background:
      linear-gradient(145deg, rgba(175, 197, 255, .20), rgba(74, 91, 170, .12) 55%, rgba(124, 137, 255, .26)),
      #10142f;
   box-shadow: inset 0 1px rgba(235, 242, 255, .18), 0 26px 60px rgba(8, 12, 48, .55);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
}

.project-flow__modal-head {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 12px;
}

.project-flow__modal-num {
   display: grid;
   place-items: center;
   width: 34px;
   height: 34px;
   flex: none;
   border: 1.5px solid rgba(158, 179, 255, .8);
   border-radius: 12px;
   color: #bcd2f3;
   font: 22px/1 Arial, sans-serif;
}

.project-flow__modal-head h3 {
   margin: 0;
   font-size: 19px;
   color: #f5f7ff;
   letter-spacing: .04em;
}

.project-flow__modal-close {
   margin-left: auto;
   width: 32px;
   height: 32px;
   border: 0;
   border-radius: 9px;
   color: #cdd6f7;
   background: transparent;
   font-size: 20px;
   line-height: 1;
   cursor: pointer;
}

.project-flow__modal-close:hover {
   color: #fff;
   background: rgba(255, 255, 255, .1);
}

.project-flow__modal-box p {
   margin: 0;
   color: #ccd3ee;
   font-size: 14.5px;
   line-height: 1.85;
}


/*
 * 卡片文字放大到 16px 之后，图标要往上让位，避免和文字叠在一起（用户 2026-10-23）。
 * 1440 宽时卡内空间够；900–1180 之间卡片只有 80 多像素，把图标 margin-top 收紧。
 */
.project-flow__step {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
}

.project-flow__icon {
   margin-top: 20px;
}

@media (max-width: 1180px) {
   .project-flow__icon {
      margin-top: 14px;
      width: 28px;
      height: 28px;
   }
}

@media (max-width: 900px) {
   .project-flow__icon {
      margin-top: 18px;
      width: 30px;
      height: 30px;
   }

   .project-flow__name {
      bottom: 8px;
   }
}

/*
 * 本页页脚只保留最底下的版权条（用户 2026-10-23），与 `/project-progress` 一致。
 * 这份样式表只在 `/about` 加载。
 */
.footer__body {
   display: none;
}