:root{--modal-radius:18px;--modal-shadow:0 24px 64px rgba(0,0,0,0.18),0 0 0 1px rgba(0,0,0,0.04);--modal-overlay-bg:rgba(0,0,0,0.50);--modal-blur:6px;--modal-z:10000;--modal-header-border:var(--border-color,#e5e7eb);--modal-bg:var(--card-bg,#ffffff);--modal-text:var(--text-primary,#1a1a2e);--modal-text-muted:var(--text-secondary,#94a3b8)}.modal-overlay{display:none;position:fixed;inset:0;background:var(--modal-overlay-bg);backdrop-filter:blur(var(--modal-blur));-webkit-backdrop-filter:blur(var(--modal-blur));z-index:var(--modal-z);align-items:center;justify-content:center;padding:20px}.modal-overlay.active{display:flex;animation:modalOverlayIn 0.25s ease both}@keyframes modalOverlayIn{from{opacity:0}to{opacity:1}}.modal-container{background:var(--modal-bg);border-radius:var(--modal-radius);width:100%;max-width:560px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--modal-shadow);animation:modalSlideUp 0.35s cubic-bezier(0.22,1,0.36,1) both}@keyframes modalSlideUp{from{opacity:0;transform:translateY(24px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-container.modal-sm{max-width:400px}.modal-container.modal-md{max-width:560px}.modal-container.modal-lg{max-width:720px}.modal-container.modal-xl{max-width:960px}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--modal-header-border);flex-shrink:0}.modal-header h3,.modal-title{margin:0;font-size:16px;font-weight:700;color:var(--modal-text);display:flex;align-items:center;gap:8px;line-height:1.4}.modal-header h3 i,.modal-title i{font-size:16px;opacity:0.7}.modal-close{width:32px;height:32px;border:none;border-radius:8px;background:var(--hover-bg,#f3f4f6);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--modal-text-muted);font-size:14px;transition:all 0.2s ease;flex-shrink:0}.modal-close:hover{background:#ef4444;color:white;transform:scale(1.08)}.modal-body{padding:20px 24px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}.modal-body::-webkit-scrollbar{width:4px}.modal-body::-webkit-scrollbar-track{background:transparent}.modal-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:4px}.modal-footer{padding:16px 24px;border-top:1px solid var(--modal-header-border);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}.modal-btn{padding:10px 20px;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all 0.2s ease;font-family:inherit}.modal-btn i{font-size:12px}.modal-btn-cancel{background:var(--hover-bg,#f3f4f6);color:var(--modal-text-muted);border:1px solid var(--modal-header-border)}.modal-btn-cancel:hover{background:var(--modal-header-border);color:var(--modal-text)}.modal-btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:white}.modal-btn-primary:hover{opacity:0.9;transform:translateY(-1px);box-shadow:0 4px 16px rgba(102,126,234,0.3)}.modal-btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:white}.modal-btn-danger:hover{opacity:0.9;transform:translateY(-1px);box-shadow:0 4px 12px rgba(239,68,68,0.35)}.modal-btn-success{background:linear-gradient(135deg,#10b981,#059669);color:white}.modal-btn-success:hover{opacity:0.9;transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,163,127,0.35)}@media (min-width:1400px){.modal-container.modal-sm{max-width:440px}.modal-container.modal-md{max-width:620px}.modal-container.modal-lg{max-width:800px}.modal-container.modal-xl{max-width:1080px}.modal-header{padding:22px 28px}.modal-body{padding:24px 28px}.modal-footer{padding:18px 28px}}@media (max-width:1024px){.modal-container.modal-lg{max-width:90%}.modal-container.modal-xl{max-width:95%}}@media (max-width:768px){.modal-overlay{padding:12px;align-items:flex-end}.modal-container{max-width:100% !important;max-height:85vh;border-radius:20px 20px 0 0;animation:modalSlideUpMobile 0.4s cubic-bezier(0,0.55,0.45,1) both}.modal-container.modal-sm,.modal-container.modal-md,.modal-container.modal-lg,.modal-container.modal-xl{max-width:100% !important}@keyframes modalSlideUpMobile{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.modal-header::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:40px;height:4px;background:#d1d5db;border-radius:4px}.modal-header{position:relative;padding:24px 20px 16px}.modal-header h3,.modal-title{font-size:15px}.modal-body{padding:16px 20px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}.modal-footer{padding:14px 20px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));flex-direction:column-reverse}.modal-footer .modal-btn{width:100%;justify-content:center}.modal-btn{padding:12px 20px}}@media (max-width:480px){.modal-container{max-height:90vh}.modal-header{padding:22px 16px 14px}.modal-header h3,.modal-title{font-size:14px}.modal-body{padding:14px 16px}.modal-footer{padding:12px 16px}}[data-theme="dark"] .modal-overlay{--modal-overlay-bg:rgba(0,0,0,0.65)}[data-theme="dark"] .modal-container{background:#1e2130;box-shadow:0 24px 64px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.06)}[data-theme="dark"] .modal-header{border-bottom-color:rgba(255,255,255,0.08)}[data-theme="dark"] .modal-header::before{background:#4a4e68}[data-theme="dark"] .modal-close{background:#2a2e42;color:#a0a4b8}[data-theme="dark"] .modal-close:hover{background:#ef4444;color:white}[data-theme="dark"] .modal-footer{border-top-color:rgba(255,255,255,0.08)}[data-theme="dark"] .modal-btn-cancel{background:#2a2e42;border-color:#353a52;color:#a0a4b8}[data-theme="dark"] .modal-btn-cancel:hover{background:#353a52;color:#e4e6f0}.modal-header-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:white;font-size:16px;flex-shrink:0}.modal-divider{height:1px;background:var(--modal-header-border);margin:16px 0}.modal-help-text{font-size:13px;color:var(--modal-text-muted);line-height:1.6;margin:0 0 16px}.modal-loading{text-align:center;padding:40px 20px;color:var(--modal-text-muted)}.modal-loading i{font-size:28px;margin-bottom:12px;animation:modalSpin 1s linear infinite}@keyframes modalSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}