/* 公开名片页 —— 三套主题共享的布局,颜色变量由 [data-theme] 注入 */
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--page-bg);
  color:var(--text);
  font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  min-height:100vh;
  transition:background .25s ease,color .25s ease;
}
a{color:inherit;text-decoration:none}
.card-page{max-width:480px;margin:0 auto;padding-bottom:110px;position:relative}

.topbar{position:fixed;top:14px;left:0;right:0;max-width:480px;margin:0 auto;padding:0 14px;display:flex;justify-content:space-between;align-items:center;z-index:15}
.icon-btn{background:var(--btn-bg);backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur));border:none;color:var(--text);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease,background .15s ease}
.icon-btn:hover{background:var(--btn-hover);transform:scale(1.08)}
.icon-btn:active{transform:scale(.92)}
.theme-switch{display:flex;background:var(--btn-bg);backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur));border-radius:999px;padding:3px;gap:2px}
.theme-switch button{border:none;background:transparent;color:var(--text-mut);font-size:11px;font-weight:700;padding:6px 11px;border-radius:999px;cursor:pointer;transition:.15s ease}
.theme-switch button.on{background:var(--accent);color:var(--accent-text)}

.cover{height:200px;background-size:cover;background-position:center;background-color:var(--card-bg);position:relative}
.avatar{width:112px;height:112px;border-radius:50%;object-fit:cover;border:4px solid var(--avatar-ring);position:absolute;left:50%;bottom:-56px;transform:translateX(-50%);box-shadow:var(--shadow);background:#ddd}

.identity{text-align:center;margin-top:64px;padding:0 20px}
.identity h1{font-size:24px;font-weight:800}
.identity .job{color:var(--text-mut);margin-top:2px;font-size:15px}
.badge{display:inline-flex;align-items:center;gap:6px;background:var(--card-bg);backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur));border:1px solid var(--card-border);color:var(--text);font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;margin-top:12px}
.badge svg{width:15px;height:15px}

.bio{margin:20px 20px 0;padding:16px 18px;background:var(--card-bg);backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur));border:1px solid var(--card-border);border-radius:16px;font-size:14px;line-height:1.7;color:var(--text)}
.bio p{margin-bottom:8px}
.bio ul,.bio ol{padding-left:20px;margin-bottom:8px}
.bio a{text-decoration:underline}

.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 20px 0}
.info-card{display:flex;align-items:center;gap:10px;background:var(--card-bg);backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur));border:1px solid var(--card-border);border-radius:14px;padding:12px 14px;transition:transform .15s ease,background .15s ease}
a.info-card:hover{transform:translateY(-2px);background:var(--btn-hover)}
.info-icon{width:34px;height:34px;border-radius:50%;background:var(--btn-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.info-label{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-mut);font-weight:700}
.info-value{font-size:13.5px;font-weight:700;word-break:break-word}

.map-card{margin:16px 20px 0;border-radius:16px;overflow:hidden;border:1px solid var(--card-border)}
.map-card iframe{width:100%;height:160px;border:0;display:block}

.banner-carousel{margin-top:16px;padding:0 20px}
.banner-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:16px}
.banner-track::-webkit-scrollbar{display:none}
.banner-slide{flex:0 0 100%;scroll-snap-align:start;display:block;aspect-ratio:16/8;overflow:hidden;border-radius:16px;background:var(--card-bg);border:1px solid var(--card-border)}
.banner-slide img{width:100%;height:100%;object-fit:cover;display:block}
.banner-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.banner-dot{width:7px;height:7px;border-radius:50%;border:none;background:var(--card-border);cursor:pointer;padding:0;transition:width .2s ease,background .2s ease}
.banner-dot.on{background:var(--accent);width:18px;border-radius:4px}

.gallery-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px;margin-top:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gallery-strip::-webkit-scrollbar{display:none}
.gallery-card{position:relative;flex:0 0 auto;scroll-snap-align:start;width:150px;border-radius:16px;overflow:hidden;background:var(--card-bg);border:1px solid var(--card-border);transition:transform .15s cubic-bezier(.34,1.56,.64,1)}
a.gallery-card:active{transform:scale(.97)}
.gallery-card img{width:150px;height:150px;object-fit:cover;display:block;background:var(--btn-bg)}
.gallery-info{padding:9px 10px}
.gallery-title{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gallery-caption{font-size:11.5px;color:var(--text-mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.links-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 20px 0}
.link-btn{position:relative;z-index:0;display:flex;align-items:center;gap:10px;background:var(--card-bg);backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur));border:1px solid var(--card-border);border-radius:14px;padding:12px 14px;font-size:13.5px;font-weight:700;transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .15s ease,box-shadow .15s ease}
.link-btn:hover{transform:translateY(-3px) scale(1.02);background:var(--btn-hover);box-shadow:var(--shadow)}
.link-btn:active{transform:translateY(0) scale(.97)}
.link-icon{width:30px;height:30px;border-radius:50%;background:var(--btn-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}

.action-row{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;display:flex;gap:10px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));flex-wrap:wrap;background:var(--page-bg);border-top:1px solid var(--card-border);z-index:15}
.action-btn{position:relative;z-index:0;flex:1;min-width:110px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--card-bg);backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur));border:1px solid var(--card-border);color:var(--text);padding:13px 10px;border-radius:14px;font-size:13.5px;font-weight:700;cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .15s ease,box-shadow .15s ease}
.action-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:var(--shadow)}
.action-btn:active{transform:translateY(0) scale(.96)}
.action-btn.primary{background:var(--accent);color:var(--accent-text);border-color:transparent}
.action-btn.whatsapp{--accent:#25d366;background:#25d366;color:#fff;border-color:transparent}
.info-icon.whatsapp{background:#25d366;color:#fff}

/* 持续发光/流动边框:一段亮弧沿按钮边缘不停旋转,不需要 hover 就能看到 */
@property --border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.link-btn::before,.action-btn::before{
  content:"";
  position:absolute;
  inset:-1.5px;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from var(--border-angle),transparent 0 70%,var(--accent) 85%,#fff 90%,var(--accent) 95%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:border-rotate 3.5s linear infinite;
  pointer-events:none;
  z-index:-1;
}
@keyframes border-rotate{to{--border-angle:360deg}}
@media (prefers-reduced-motion:reduce){
  .link-btn::before,.action-btn::before{animation:none}
}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:20;padding:20px}
.modal.open{display:flex}
.modal-box{background:var(--card-bg,#fff);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--card-border);border-radius:20px;padding:26px;max-width:360px;width:100%;position:relative;color:var(--text)}
.modal-box h3{margin-bottom:16px;font-size:17px}
.modal-box label{display:block;font-size:12px;font-weight:700;color:var(--text-mut);margin-bottom:10px}
.datetime-row{display:flex;gap:10px}
.datetime-row label{flex:1}
.modal-box input,.modal-box textarea{display:block;width:100%;margin-top:5px;padding:9px 11px;border-radius:9px;border:1px solid var(--card-border);background:rgba(255,255,255,.06);color:var(--text);font-size:14px;font-family:inherit}
[data-theme="minimal"] .modal-box input,[data-theme="minimal"] .modal-box textarea{background:#fff}
.modal-box .icon-btn.close{position:absolute;top:14px;right:14px;width:32px;height:32px}
.honeypot{position:absolute;left:-9999px;opacity:0}
.copy-row{display:flex;gap:8px;margin-top:4px}
.copy-row input{flex:1;font-size:12px;padding:8px 10px;border-radius:8px;border:1px solid var(--card-border);background:rgba(255,255,255,.06);color:var(--text)}
[data-theme="minimal"] .copy-row input{background:#f5f5f5}
.btn-copy{flex-shrink:0;padding:8px 14px;border-radius:8px;border:none;background:var(--accent);color:var(--accent-text);font-size:12px;font-weight:700;cursor:pointer}
.modal-hint{font-size:12px;color:var(--text-mut);text-align:center;margin-top:8px}

.share-options{display:flex;gap:10px;margin-top:14px}
.share-opt{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:12px;background:var(--btn-bg);border:1px solid var(--card-border);color:var(--text);font-size:12px;font-weight:700;transition:transform .15s ease,background .15s ease}
.share-opt:hover{transform:translateY(-2px);background:var(--btn-hover)}
.share-opt:active{transform:translateY(0) scale(.96)}

.confirm-page{padding-bottom:20px}
.confirm-page .action-row{position:static;justify-content:center;max-width:none;margin:22px 20px 0;padding:0;background:none;border-top:none}

@media(max-width:380px){
  .info-grid,.links-grid{grid-template-columns:1fr}
}