/* Navigation stays visible while the résumé and AI tools scroll. */
#view-about > .sub-topnav,
#view-ai > .sub-topnav { position: fixed; top: 20px; }

#view-ai {
  background: linear-gradient(to bottom, rgba(10,14,20,.18) 0%, rgba(10,14,20,.06) 56%, rgba(10,14,20,.16) 100%);
}
#view-ai .sub-inner { position: relative; z-index: 2; }
#view-ai .sub-inner { padding-top: 130px; }
#view-ai .capabilities { margin-top: 20px; }
.sub-topnav .ai-nav { white-space: nowrap; }
.sub-topnav .brand { cursor: pointer; transition: transform .2s, filter .2s; }
.sub-topnav .brand:hover,.sub-topnav .brand:focus-visible { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(90,200,250,.42)); outline: none; }
.ai-section-nav { margin: 24px 0; }
.ai-section-nav a { transition: color .2s; }
.ai-section-nav a:hover,.ai-section-nav a:focus-visible { color: #fff; }

/* Prominent but compact external-case links beside section descriptions. */
.archive-intro a.external-case-cta {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-height: 42px; margin-left: 18px; padding: 9px 14px 9px 17px;
  color: #8edcff; font-weight: 650; letter-spacing: .02em; text-decoration: none;
  border: 1px solid rgba(92,200,250,.55); border-radius: 999px;
  background: linear-gradient(115deg,rgba(22,77,112,.88),rgba(8,30,48,.96));
  box-shadow: 0 0 0 1px rgba(92,200,250,.07) inset, 0 7px 24px rgba(26,156,221,.12);
  transition: color .22s, border-color .22s, background .22s, box-shadow .22s, transform .22s;
}
.archive-intro a.external-case-cta::after {
  content: ""; display: block; flex: 0 0 24px; width: 24px; height: 24px;
  border-radius: 50%;
  background-color: rgba(255,255,255,.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dff6ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
  background-position: center; background-repeat: no-repeat; background-size: 14px 14px;
  transition: transform .22s, background .22s;
}
.archive-intro a.external-case-cta:hover,
.archive-intro a.external-case-cta:focus-visible {
  color: #fff; border-color: #79d9ff; transform: translateY(-2px) scale(1.07);
  background: linear-gradient(115deg,rgba(56,180,238,.3),rgba(11,34,52,.9));
  box-shadow: 0 0 0 1px rgba(121,217,255,.12) inset, 0 10px 30px rgba(31,174,237,.24), 0 0 24px rgba(67,193,248,.13);
}
.archive-intro a.external-case-cta:hover::after,
.archive-intro a.external-case-cta:focus-visible::after { transform: translate(1px,-1px); background-color: rgba(255,255,255,.17); }
@media (max-width:700px) {
  .archive-intro a.external-case-cta { display: inline-flex; margin: 12px 0 0; }
}
@media (prefers-reduced-motion:reduce) {
  .archive-intro a.external-case-cta,.archive-intro a.external-case-cta::after { transition: none; }
}

/* Author verification opened from the YU鱼 mark. */
.author-gate {
  position: fixed; inset: 0; z-index: 16000; display: none; place-items: center; padding: 20px;
  background: rgba(2,6,11,.76); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  cursor: default;
}
.author-gate * { cursor: default; }
.author-gate button { cursor: pointer; }
.author-gate input { cursor: text; }
.author-gate.open { display: grid; }
.author-gate-box {
  position: relative; width: min(420px,94vw); padding: 34px;
  border: 1px solid rgba(107,203,248,.34); border-radius: 20px;
  background: linear-gradient(145deg,rgba(21,32,45,.98),rgba(8,14,22,.98));
  box-shadow: 0 30px 90px #000c, 0 0 40px rgba(55,179,237,.1); text-align: center;
}
.author-gate-close { position: absolute; right: 13px; top: 11px; width: 34px; height: 34px; border-radius: 50%; color: #aab3bf; font-size: 24px; }
.author-gate-close:hover { color: #fff; background: #ffffff12; }
.author-gate-icon { width: 56px; height: 56px; margin: 0 auto 15px; display: grid; place-items: center; border-radius: 50%; background: #e9f3fb; box-shadow: 0 0 24px rgba(90,200,250,.24); }
.author-gate-icon svg { width: 25px; height: 25px; fill: none; stroke: #23394b; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.author-gate h2 { color: #fff; font-size: 24px; line-height: 1.3; }
.author-gate p { margin: 9px 0 22px; color: #8e99a8; font-size: 13px; }
.author-gate input { width: 100%; height: 46px; padding: 0 15px; border: 1px solid #354254; border-radius: 10px; outline: none; color: #fff; background: #0b111a; text-align: center; font: 14px/1 var(--font-cn); }
.author-gate input:focus { border-color: #5ac8fa; box-shadow: 0 0 0 3px rgba(90,200,250,.1); }
.author-gate-error { min-height: 30px; padding-top: 8px; color: #ff8490; font-size: 12px; }
.author-gate.already-author .author-gate-error { color: #9eea74; }
.author-gate-submit { width: 100%; height: 44px; border-radius: 999px; color: #07121b; background: #5ac8fa; font-weight: 700; transition: transform .2s, box-shadow .2s; }
.author-gate-submit:hover { transform: scale(1.025); box-shadow: 0 8px 28px rgba(90,200,250,.25); }
.author-gate-logout { display: none; width: 100%; height: 44px; border: 1px solid #425063; border-radius: 999px; color: #b9c3cf; background: #121a25; }
.author-gate-logout:hover { color: #fff; border-color: #5ac8fa; }
.author-gate.already-author input,.author-gate.already-author .author-gate-submit { display: none; }
.author-gate.already-author .author-gate-logout { display: block; }

.back-to-top {
  position: fixed; right: 28px; bottom: 28px; z-index: 12000;
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: #92969c; color: #fff; box-shadow: 0 8px 24px #0005;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s, transform .2s, visibility .2s, background .2s;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #5ac8fa; }
.back-to-top svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

#creativeGrid { display: grid!important; grid-template-columns: repeat(4,minmax(0,1fr))!important; gap: 24px; align-items: start; }
#view-cases .sub-inner { max-width: none; width: min(90vw, 1880px); padding: 130px 0 80px; }
#creativeGrid .archive-work { display: block; break-inside: auto; margin: 0; text-align: left; }
#creativeGrid .archive-work img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
#modal:has(.detail-image) { overflow: hidden; padding: 3vh 0 92px!important; }
#modalContent.detail-image { width: 80vw!important; max-width: none!important; height: calc(94vh - 92px)!important; min-height: 0; overflow: hidden!important; border: 0!important; border-radius: 0!important; background: transparent!important; }
#modalContent.detail-image .image-scroll { width: 100%; height: 100%; overflow: auto; cursor: default; scrollbar-width: thin; }
#modalContent.detail-image .image-scroll.pan-enabled { cursor: grab; }
#modalContent.detail-image .image-scroll.dragging { cursor: grabbing; }
#modalContent.detail-image .image-canvas { position: relative; margin: auto; }
#modalContent.detail-image .image-scroll img { position: absolute; left: 50%; top: 50%; display: block; width: auto; max-width: none; height: auto; margin: 0; user-select: none; -webkit-user-drag: none; }
.image-tools { display: none; position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 12001; align-items: center; gap: 2px; padding: 5px 8px; border: 1px solid #fff9; border-radius: 999px; background: rgba(255,255,255,.72); color: #20252b; box-shadow: 0 8px 30px #0007; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#modal:has(.detail-image) .image-tools { display: flex; }
.image-tools button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border-radius: 50%; color: inherit; }
.image-tools button:hover,.image-tools button:focus-visible,.image-tools button[aria-pressed="true"] { background: #31374027; }
.image-tools svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.image-tools .zoom-level { min-width: 48px; text-align: center; font: 12px Arial,sans-serif; }

@media (max-width: 1000px) { #creativeGrid { grid-template-columns: repeat(3,minmax(0,1fr))!important; } }
@media (max-width: 700px) {
  #view-cases .sub-inner { width: calc(100vw - 32px); padding-top: 100px; }
  .sub-topnav, #view-brand .sub-topnav { overflow-x: auto!important; justify-content: flex-start!important; }
  .sub-topnav button, #view-brand .sub-topnav button { flex: 0 0 auto!important; }
  #creativeGrid { grid-template-columns: repeat(2,minmax(0,1fr))!important; gap: 16px; }
  #modalContent.detail-image { width: 94vw!important; }
  .image-tools { max-width: 96vw; overflow-x: auto; bottom: 12px; }
  .back-to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
  #view-about > .sub-topnav, #view-ai > .sub-topnav { top: 12px; }
}

/* ===== 提示词板块 ===== */
.prompts-section { margin-top: 80px; padding-bottom: 80px; }
.prompts-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.prompts-title-row .section-title { margin-bottom: 0; }
.prompts-access-badge {
  display: inline-flex; align-items: center; min-height: 30px; padding: 5px 11px;
  border: 1px solid #334154; border-radius: 999px; color: #9aa6b6;
  background: rgba(19,27,38,.82); font: 11px/1.2 "Microsoft YaHei",sans-serif;
}
.prompts-access-badge.author { color: #9eea74; border-color: #6ec84e80; background: #17301caa; }
.prompts-toolbar { margin: 20px 0 24px; }
.prompts-cats {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 18px;
}
.prompt-cat {
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid #2a3140; color: #9aa0ac;
  font: 13px/1 "Microsoft YaHei", sans-serif; transition: all .2s;
}
.prompt-cat:hover { border-color: #5ac8fa; color: #5ac8fa; }
.prompt-cat.active {
  background: #5ac8fa; border-color: #5ac8fa; color: #0a0e14; font-weight: 600;
}
.prompts-search {
  width: 100%; max-width: 520px; padding: 12px 18px;
  background: #151a22; border: 1px solid #2a3140; border-radius: 999px;
  color: #e6e8ee; font: 14px/1.5 "Microsoft YaHei", sans-serif; outline: none;
  transition: border-color .2s;
}
.prompts-search::placeholder { color: #6b7280; }
.prompts-search:focus { border-color: #5ac8fa; }

.prompts-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px; align-items: start;
}
.prompt-card {
  cursor: pointer; break-inside: avoid;
  transition: transform .2s, opacity .2s;
}
.prompt-card:hover { transform: translateY(-3px); }
.prompt-thumb {
  position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 10px;
  background: #151a22;
}
.prompt-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s;
}
.prompt-card:hover .prompt-thumb img { transform: scale(1.04); }
.prompt-title {
  margin-top: 10px; font: 13px/1.5 "Microsoft YaHei", sans-serif;
  color: #c8ccd4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 弹窗 */
.prompt-modal {
  position: fixed; inset: 0; z-index: 13000;
  background: rgba(0,0,0,.82); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: 3vh 3vw;
  cursor: default;
}
.prompt-modal.open { display: flex; }
.prompt-modal button { cursor: pointer; }
#glowCursor { z-index: 14001 !important; }
.prompt-modal-box {
  width: min(1280px, 94vw); height: min(880px, 92vh);
  background: #0f1319; border: 1px solid #2a3140; border-radius: 14px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 80px #000a;
}
.prompt-modal-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px; border-bottom: 1px solid #232936;
}
.prompt-modal-title {
  flex: 1; font: 600 16px/1.4 "Microsoft YaHei", sans-serif; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prompt-modal-copy {
  padding: 8px 16px; border-radius: 999px; border: 1px solid #5ac8fa;
  background: transparent; color: #5ac8fa; cursor: pointer;
  font: 13px/1 "Microsoft YaHei", sans-serif; transition: all .2s;
}
.prompt-modal-copy:hover { background: #5ac8fa; color: #0a0e14; }
.prompt-modal-copy.is-locked,
.prompt-modal-copy.is-locked:hover {
  position: relative; color: #747b86; border-color: #3a414b; background: #252a31;
  cursor: not-allowed; opacity: .72;
}
.prompt-modal-copy.is-locked:hover::after {
  content: "无复制权限"; position: absolute; left: 50%; top: calc(100% + 10px);
  transform: translateX(-50%); width: max-content; padding: 7px 10px; border-radius: 7px;
  color: #e5e9ef; background: #242a33; border: 1px solid #404957;
  font: 11px/1 "Microsoft YaHei",sans-serif; box-shadow: 0 8px 20px #0008;
}
.prompt-modal-close {
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: #1c222c; color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
.prompt-modal-close:hover { background: #2a3140; }
.prompt-modal-body {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0; overflow: hidden;
}
.prompt-modal-cover {
  background: #000; display: flex; align-items: center; justify-content: center;
  overflow: auto;
}
.prompt-modal-cover img { max-width: 100%; max-height: 100%; display: block; }
.prompt-modal-text-wrap { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.prompt-modal-text {
  width: 100%; height: 100%; margin: 0; padding: 24px 28px; overflow: auto;
  font: 14px/1.8 "Microsoft YaHei", sans-serif; color: #d4d7de;
  white-space: pre-wrap; word-break: break-word;
  border-left: 1px solid #232936;
}
.prompt-modal-text-wrap.is-locked .prompt-modal-text {
  overflow: hidden; filter: blur(6px); opacity: .62; user-select: none; pointer-events: none;
}
.prompt-modal-lock {
  display: none; position: absolute; inset: 0; z-index: 2; align-items: center; justify-content: center;
  flex-direction: column; gap: 7px; color: #dce8f4; background: rgba(9,13,18,.18);
}
.prompt-modal-text-wrap.is-locked .prompt-modal-lock { display: flex; }
.prompt-modal-lock span {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(235,243,250,.95); box-shadow: 0 10px 30px #0009;
}
.prompt-modal-lock svg { width: 26px; height: 26px; fill: none; stroke: #27394a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prompt-modal-lock strong { margin-top: 5px; font: 600 14px/1.3 "Microsoft YaHei",sans-serif; }
.prompt-modal-lock small { color: #8f9bab; font: 12px/1.3 "Microsoft YaHei",sans-serif; }

@media (max-width: 1000px) {
  .prompts-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .prompt-modal-body { grid-template-columns: 1fr; overflow: auto; }
  .prompt-modal-cover { max-height: 40vh; }
  .prompt-modal-text-wrap { min-height: 42vh; }
  .prompt-modal-text { border-left: 0; border-top: 1px solid #232936; }
}
@media (max-width: 700px) {
  .prompts-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  .prompt-modal-box { width: 96vw; height: 94vh; }
}

/* Skill cards keep their still covers and remain direct links. */
.skill-link{display:block;color:inherit;text-decoration:none;border-radius:12px}.skill-link:focus-visible{outline:2px solid #b8ee82;outline-offset:6px}.skill-preview{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:12px}.skill-preview img{display:block;width:100%;height:100%;object-fit:contain}.skill-cta{display:block;margin:8px 0 16px;font-size:13px;color:#b8ee82}.skill-link:hover h3{color:#b8ee82}