/* Aurora Popup 前端样式 */
:root {
  --ap-z: 9999;
}

#aurora-popup-root { position: fixed; inset: 0; z-index: var(--ap-z); }
.ap-hidden { display: none !important; }

.ap-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .2s ease; }
.ap-overlay.ap-open { opacity: 1; }

.ap-container { position: fixed; left: 50%; transform: translateX(-50%); width: auto; max-width: 96vw; padding: 16px; box-sizing: border-box; opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.ap-container.ap-open { opacity: 1; }
.ap-position-center { top: 50%; transform: translate(-50%, -50%); }
.ap-position-top { top: 40px; }
.ap-position-bottom { bottom: 40px; }

.ap-popup { background: #fff; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 20px; color: #2c3338; position: relative; width: 300px; }
.ap-title { margin: 0 0 10px; font-size: 18px; font-weight: 600; }
.ap-content { font-size: 14px; color: #444; margin-bottom: 15px; }
.ap-content img { max-width: 100%; height: auto; display: block; }
.ap-content video, .ap-content iframe { max-width: 100%; width: 100%; height: auto; display: block; }
/* 优先使用现代浏览器的纵横比支持，保证 iframe/video 自适应高度 */
.ap-content iframe, .ap-content video { aspect-ratio: 16/9; }
.ap-actions { display: flex; gap: 10px; justify-content: flex-end; }
.ap-btn { display: inline-block; padding: 8px 16px; border-radius: 4px; font-size: 14px; border: none; cursor: pointer; color: #fff; background: #2271b1; }
.ap-btn-danger { background: #d63638; }
.ap-close { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 18px; line-height: 1; cursor: pointer; color: #666; }

@media (max-width: 480px) {
  .ap-container { padding: 10px; }
  .ap-popup { width: 92vw; }
}

/* === UI-2 样例样式（三种布局）=== */
.modal { position: fixed; top:0; left:0; width:100%; height:100%; display:none; z-index: 1000; }
.modal-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); }
.modal-content { position: relative; background:#fff; border-radius:12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); overflow:hidden; animation: modalAppear 0.4s ease-out; }
.close-btn { position:absolute; top:15px; right:15px; background:none; border:none; font-size:24px; color:#7f8c8d; cursor:pointer; z-index:10; transition: color .3s; }
.close-btn:hover { color:#e74c3c; }
@keyframes modalAppear { from{ opacity:0; transform: translateY(-20px);} to{ opacity:1; transform: translateY(0);} }

/* 居中模态 */
.modal-1 { display:flex; align-items:center; justify-content:center; }
.modal-1 .modal-content { width:90%; max-width:500px; }
.modal-image { width:100%; height:150px; display:block; object-fit: cover; }
.modal-body { padding:25px; }
.modal-title { font-size:24px; color:#2c3e50; margin-bottom:15px; }
.modal-text { color:#7f8c8d; line-height:1.6; margin-bottom:20px; }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; }
.btn { padding:14px 28px; border:none; border-radius:8px; font-size:16px; font-weight:600; cursor:pointer; transition: all .3s ease; box-shadow:0 4px 6px rgba(0,0,0,0.1); }
.btn:hover { transform: translateY(-3px); box-shadow:0 6px 12px rgba(0,0,0,0.15); }
.btn-primary { background:#3498db; color:#fff; }
.btn-success { background:#2ecc71; color:#fff; }
.btn-warning { background:#e67e22; color:#fff; }

/* 右侧滑入 */
.modal-2 { display:flex; justify-content:flex-end; align-items:stretch; }
.modal-2 .modal-content { width:90%; max-width:400px; height:100%; border-radius:0; transform: translateX(100%); animation: slideInRight .4s ease-out forwards; }
@keyframes slideInRight { from{ transform: translateX(100%);} to{ transform: translateX(0);} }
/* 侧边滑入同样固定高度，随宽度裁切 */
.modal-2 .modal-image { height:150px; }

/* 底部弹出 */
.modal-3 { display:flex; align-items:flex-end; justify-content:center; }
.modal-3 .modal-content { width:90%; max-width:600px; margin-bottom:20px; transform: translateY(100%); animation: slideInUp .4s ease-out forwards; }
.modal-3 .modal-image { height:150px; }
.modal-3 .modal-body { padding:20px; }
.modal-3 .modal-footer { justify-content:center; }

@keyframes slideInUp { from { transform: translateY(100%);} to { transform: translateY(0);} }

@media (max-width: 600px) {
  .modal-content { width:95% !important; }
  .modal-2 .modal-content { width:85% !important; }
  .modal-title { font-size:20px; }
  .btn { padding:12px 20px; }
}