.dialog-showcase{height:min(420px,46vw);min-height:330px}
.local-icon{font-style:normal;font-family:Arial,"Microsoft YaHei",sans-serif;line-height:1;display:inline-grid;place-items:center}
.portfolio-disclosure{margin-top:1.35rem;padding:1.4rem 1.55rem;display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start;border:1px solid rgba(106,168,255,.28);border-radius:18px;background:linear-gradient(135deg,rgba(106,168,255,.08),rgba(78,225,178,.045))}.disclosure-mark{font-size:.68rem;letter-spacing:.12em;font-weight:800;color:var(--accent2);border:1px solid rgba(106,168,255,.35);border-radius:7px;padding:.35rem .5rem}.portfolio-disclosure h3{font-size:.94rem;margin-bottom:.35rem}.portfolio-disclosure p{color:var(--muted);font-size:.79rem;line-height:1.75}.dialog-demo{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin:0 4rem 1.5rem;padding:1.25rem 1.4rem;border:1px solid rgba(78,225,178,.28);border-radius:16px;background:rgba(78,225,178,.055)}.dialog-demo div{display:flex;flex-direction:column}.dialog-demo span{font-size:.65rem;letter-spacing:.16em;color:var(--accent);font-weight:800}.dialog-demo strong{font-size:.92rem;margin:.25rem 0}.dialog-demo small{font-size:.72rem;color:var(--muted)}

/* 殿堂级交互式多图证据画廊 */
.dialog-gallery-wrap{margin:0 4rem 1.8rem;display:grid;grid-template-columns:minmax(188px,220px) minmax(0,1fr);grid-template-areas:"sidebar stage";gap:14px;align-items:stretch}
.dialog-gallery-wrap>.gallery-viewport{grid-area:stage}
.gallery-viewport{position:relative;width:100%;aspect-ratio:16/9;max-height:500px;background:#050a12;border:1px solid rgba(145,171,202,.25);border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.gallery-viewport img{width:100%;height:100%;object-fit:contain;transition:opacity .2s ease;background:#08111d}
.gallery-overlay{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 14px;background:linear-gradient(180deg,transparent 0%,rgba(6,11,19,.75) 30%,#060c15 100%);display:flex;align-items:flex-end;gap:12px}
.gallery-badge{font-size:10px;font-weight:800;color:var(--accent);background:rgba(78,225,178,.14);border:1px solid rgba(78,225,178,.35);padding:3px 9px;border-radius:6px;white-space:nowrap;letter-spacing:.05em}
.gallery-caption-text{flex:1;min-width:0}
.gallery-caption-text strong{display:block;font-size:14px;color:#fff;line-height:1.35;font-weight:700}
.gallery-caption-text small{display:block;font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gallery-zoom-btn{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;transition:all .2s ease;flex-shrink:0}
.gallery-zoom-btn svg{width:16px;height:16px}
.gallery-zoom-btn:hover{background:var(--accent);color:#06111d;border-color:var(--accent)}
.gallery-sidebar{grid-area:sidebar;min-width:0;max-height:500px;padding:10px;border:1px solid rgba(145,171,202,.2);border-radius:16px;background:linear-gradient(180deg,rgba(14,28,45,.78),rgba(7,15,25,.92));display:flex;flex-direction:column;overflow:hidden}
.gallery-sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 10px;border-bottom:1px solid rgba(145,171,202,.16)}
.gallery-sidebar-head span{font-size:11px;font-weight:800;color:var(--text);letter-spacing:.08em}
.gallery-sidebar-head small{font-size:8px;color:var(--muted);letter-spacing:.12em;white-space:nowrap}
.gallery-thumbs{display:flex;flex:1;min-height:0;flex-direction:column;gap:9px;overflow-y:auto;overflow-x:hidden;padding:10px 2px 2px;scrollbar-width:thin}
.thumb-btn{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:5px 8px;padding:7px;border-radius:11px;background:rgba(14,28,45,.55);border:1px solid rgba(145,171,202,.18);color:var(--muted);cursor:pointer;transition:all .2s ease;min-width:0;text-align:left}
.thumb-btn:hover{background:var(--surface);border-color:var(--accent2);color:var(--text)}
.thumb-btn.active{background:var(--surface2);border-color:var(--accent);color:var(--text);box-shadow:0 4px 16px rgba(78,225,178,.2)}
.thumb-btn.active:before{content:"";position:absolute;left:-11px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent);box-shadow:0 0 10px rgba(78,225,178,.65)}
.thumb-number{grid-row:1;grid-column:1;align-self:center;font-size:9px;font-weight:800;color:#71869b;text-align:center}
.thumb-btn img{grid-column:2;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center top;border-radius:6px;border:1px solid rgba(255,255,255,.12)}
.thumb-meta{grid-column:1/-1;display:flex;min-width:0;flex-direction:column;align-items:flex-start;text-align:left;padding:1px 2px 0}
.thumb-tag{font-size:10px;font-weight:800;color:var(--accent);letter-spacing:.04em}
.thumb-name{display:-webkit-box;width:100%;font-size:10px;line-height:1.45;color:var(--text);white-space:normal;overflow:hidden;overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* 项目卡片封面视觉质感提升 */
.project-card .project-media{background:#07101c;border-bottom:1px solid var(--line)}
.project-card .project-media img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .45s ease}
.project-card:hover .project-media img{transform:scale(1.03)}

/* Profile 侧边栏卡片联系与微信快捷 */
.profile-contacts{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:1.1rem}

/* 联系模块与微信卡片 (Contact Section) */
.contact-section{display:grid;grid-template-columns:1.35fr .85fr;gap:3rem;align-items:center;padding:3.5rem;border-radius:28px;background:linear-gradient(135deg,#0c1d2e 0%,#091522 55%,#0f2538 100%);border:1px solid rgba(106,168,255,.25);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.contact-info h2{font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.25;margin:.6rem 0 1rem}
.contact-subtext{font-size:.9rem;color:#a3bad0;line-height:1.75;margin-bottom:1.5rem}
.contact-pills{display:flex;flex-wrap:wrap;gap:.65rem;margin-bottom:2rem}
.status-pill,.location-pill,.time-pill{display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;padding:.4rem .85rem;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#d0e2f2}
.status-pill{border-color:rgba(78,225,178,.4);background:rgba(78,225,178,.08)}
.status-pill strong{color:var(--accent)}
.location-pill svg,.time-pill svg{width:14px;height:14px;color:var(--accent2)}
.contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
#copy-feedback{width:100%;font-size:.8rem;color:var(--accent);font-weight:700;transition:opacity .25s ease;min-height:1.2rem}

/* 微信专属卡片 */
.contact-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem 1.8rem;border-radius:22px;background:linear-gradient(160deg,rgba(18,36,58,.75),rgba(9,19,31,.9));border:1px solid rgba(78,225,178,.35);box-shadow:0 15px 40px rgba(0,0,0,.45)}
.contact-card-badge{position:absolute;top:1rem;right:1rem;font-size:.65rem;font-weight:800;letter-spacing:.14em;color:var(--accent);background:rgba(78,225,178,.12);border:1px solid rgba(78,225,178,.3);padding:.25rem .55rem;border-radius:6px}
.qr-box{position:relative;width:170px;height:170px;border-radius:16px;background:#fff;padding:8px;box-shadow:0 10px 30px rgba(0,0,0,.5);cursor:pointer;overflow:hidden;margin:1rem 0 1.2rem;transition:all .3s ease}
.qr-box:hover{transform:scale(1.04);box-shadow:0 12px 35px rgba(78,225,178,.35)}
.qr-image{width:100%;height:100%;object-fit:contain;display:block}
.qr-zoom-hint{position:absolute;inset:0;background:rgba(6,17,29,.75);backdrop-filter:blur(3px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;color:#fff;opacity:0;transition:opacity .2s ease}
.qr-box:hover .qr-zoom-hint{opacity:1}
.qr-zoom-hint svg{width:22px;height:22px;color:var(--accent)}
.qr-zoom-hint span{font-size:.75rem;font-weight:700}
.contact-card-meta strong{display:block;font-size:1.05rem;color:#fff;margin-bottom:.25rem}
.contact-card-meta p{font-size:.84rem;color:#b0c6dc;margin-bottom:.35rem}
.contact-card-meta code{font-family:Consolas,monospace;background:rgba(255,255,255,.1);padding:.2rem .45rem;border-radius:6px;color:var(--accent);font-weight:700}
.contact-card-meta small{font-size:.72rem;color:var(--muted);display:block}

/* 全局悬浮快捷工具栏 (Floating Widget) */
.floating-widget{position:fixed;right:24px;bottom:28px;z-index:90;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.floating-qr-group{position:relative}
.floating-btn{min-width:136px;height:52px;padding:0 12px 0 9px;border-radius:17px;background:linear-gradient(145deg,rgba(18,38,59,.96),rgba(9,22,36,.96));backdrop-filter:blur(18px);border:1px solid rgba(106,168,255,.36);color:#e6f1fb;display:flex;align-items:center;justify-content:flex-start;gap:10px;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.4);transition:all .25s ease;text-decoration:none;font-size:.8rem;font-weight:750;letter-spacing:.02em}
.floating-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;color:var(--accent);background:rgba(78,225,178,.12);border:1px solid rgba(78,225,178,.2)}
.floating-icon svg{width:18px;height:18px}
.floating-label{white-space:nowrap}
.floating-resume .floating-icon{color:#8db8ff;background:rgba(106,168,255,.13);border-color:rgba(106,168,255,.24)}
#back-to-top .floating-icon{color:#f4c873;background:rgba(244,200,115,.12);border-color:rgba(244,200,115,.22)}
.floating-btn:hover{background:var(--accent);border-color:var(--accent);color:#06111d;transform:translateY(-3px);box-shadow:0 12px 28px rgba(78,225,178,.35)}
#back-to-top{opacity:0;pointer-events:none;transform:scale(.8);transition:all .25s ease}
#back-to-top.visible{opacity:1;pointer-events:auto;transform:scale(1)}

/* 浮动二维码气泡预览 */
.floating-qr-popover{position:absolute;right:calc(100% + 12px);top:0;width:176px;padding:12px;background:#0c1d2e;border:1px solid rgba(78,225,178,.35);border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.6);text-align:center;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
.floating-popover-img{width:136px;height:136px;background:#fff;border-radius:8px;padding:4px;margin-bottom:6px}
.floating-qr-popover p{font-size:.75rem;font-weight:700;color:#fff}
.floating-qr-popover small{font-size:.65rem;color:var(--muted);display:block}
.floating-qr-group:hover .floating-qr-popover,.floating-qr-group:focus-within .floating-qr-popover{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0)}

/* 全屏二维码弹窗 (QR Dialog) */
.qr-dialog{position:fixed;inset:0;width:min(760px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);margin:auto;border:0;background:transparent;padding:0;overflow:auto}
.qr-dialog[open]{display:grid;place-items:center}
.qr-dialog::backdrop{background:rgba(3,8,15,.88);backdrop-filter:blur(14px)}
.qr-dialog-body{position:relative;width:100%;background:#0c1b2c;border:1px solid rgba(78,225,178,.4);border-radius:24px;padding:2.3rem;box-shadow:0 30px 90px rgba(0,0,0,.7);color:#fff;text-align:center;margin:auto}
.qr-dialog-body .dialog-close{position:absolute;top:1rem;right:1rem;margin:0}
.qr-dialog-content h3{font-size:1.35rem;margin-bottom:.4rem}
.qr-dialog-content p{font-size:.84rem;color:var(--muted);margin-bottom:1.5rem}
.qr-dialog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:1.4rem 0}
.qr-choice{padding:15px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.035);text-align:left}
.qr-choice-heading{display:flex;align-items:center;gap:10px;min-height:54px;margin-bottom:12px}
.qr-choice-heading>div{display:flex;flex-direction:column;line-height:1.35}
.qr-choice-heading strong{font-size:.88rem}
.qr-choice-heading small{font-size:.68rem;color:#8fa8c0;margin-top:3px}
.qr-choice-badge{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:rgba(106,168,255,.15);color:#8db8ff;font-size:.72rem;font-weight:800}
.qr-choice-wechat .qr-choice-badge{background:rgba(59,190,98,.14);color:#63dc87}
.qr-dialog-img-wrap{width:100%;aspect-ratio:1;background:#fff;border-radius:15px;padding:10px;margin:0;box-shadow:0 10px 28px rgba(0,0,0,.35);overflow:hidden}
.qr-dialog-img{width:100%;height:100%;object-fit:contain}
.qr-dialog-footer{display:flex;flex-direction:column;gap:.8rem;align-items:center}
.qr-dialog-footer span{font-size:.85rem;color:#b2c7dc}
.qr-dialog-footer code{background:rgba(255,255,255,.1);padding:.2rem .5rem;border-radius:6px;color:var(--accent);font-weight:700}
.footer-resume-link{color:var(--accent);font-weight:700}

/* 手机已经是目标设备，不再展示“用手机扫码打开本页”的桌面端入口。 */
html[data-device="mobile"] #contact-qr-card,
html[data-device="mobile"] .floating-qr-group{display:none}

@media(max-width:980px){
  .contact-section{grid-template-columns:1fr;padding:2.5rem 1.8rem;gap:2rem}
}

@media(max-width:720px){
  #contact-qr-card,.floating-qr-group{display:none}
  .project-card .project-media img{object-fit:contain;object-position:center;background:#07101c}
  .project-card:hover .project-media img{transform:none}
  .portfolio-disclosure{grid-template-columns:1fr}
  .disclosure-mark{width:max-content}
  .dialog-demo{margin:0 1.4rem 1.2rem;align-items:stretch;flex-direction:column;gap:1rem}
  .dialog-demo .button{width:100%}
  .dialog-gallery-wrap{margin:0 1.4rem 1.4rem;display:flex;flex-direction:column;gap:10px}
  .gallery-viewport{aspect-ratio:16/10}
  .gallery-sidebar{order:2;max-height:none;padding:8px;border-radius:13px}
  .gallery-sidebar-head{padding:1px 3px 7px}
  .gallery-thumbs{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:8px 1px 2px}
  .thumb-btn{flex:0 0 152px;grid-template-columns:20px minmax(0,1fr);padding:6px}
  .thumb-btn.active:before{left:8px;right:8px;top:auto;bottom:-9px;width:auto;height:3px}
  .thumb-name{-webkit-line-clamp:2}
  .gallery-caption-text small{display:none}
  .gallery-overlay{padding:14px 12px 10px}
  .floating-widget{right:12px;bottom:12px;gap:8px}
  .floating-btn{min-width:128px;height:48px;padding:0 10px 0 8px;border-radius:15px;background:linear-gradient(145deg,rgba(18,38,59,.97),rgba(7,18,30,.97));font-size:.77rem}
  .floating-icon{width:32px;height:32px;border-radius:10px}
  .floating-qr-popover{display:none}
  .qr-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}
  .qr-dialog-body{padding:2.8rem 1rem 1.2rem;border-radius:20px}
  .qr-dialog-grid{grid-template-columns:1fr;gap:12px}
  .qr-choice{display:grid;grid-template-columns:1fr 132px;gap:10px;align-items:center;padding:12px}
  .qr-choice-heading{margin:0;align-items:flex-start}
  .qr-dialog-footer{padding-bottom:4px}
}