.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.75); overflow: auto; animation: modalFadeIn 0.2s ease; }
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-content { background: #222629; border: 1px solid #3d4450; border-top: 2px solid #cc3333; margin: 2% auto; width: 75%; height: 90vh; border-radius: 0; position: relative; box-sizing: border-box; display: flex; flex-direction: column; box-shadow: 0 24px 80px rgba(0,0,0,0.7); }

.close { position: absolute; right: 20px; top: 12px; font-size: 20px; cursor: pointer; z-index: 1001; color: #5a6270; line-height: 1; transition: color 0.2s ease; font-weight: 300; }
.close:hover { color: #cc3333; }

iframe { border: none; width: 100%; height: 100%; flex: 1; border-radius: 0; }

@media (max-width: 768px) { .modal-content { width: 95%; height: 85vh; margin: 5% auto; } }
@media (max-width: 480px) { .modal-content { width: 100%; height: 100%; margin: 0; } iframe { height: calc(100vh - 50px); } .close { font-size: 24px; right: 16px; top: 10px; } }