.modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; padding: 20px; }
.modal.active { display: flex; }
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.98); backdrop-filter: blur(20px); }

.premium-modal-box {
    background: #08080a; width: 100%; max-width: 1150px; height: 90vh;
    border-radius: 40px; position: relative; overflow: hidden;
    border: 1px solid var(--glass-border); box-shadow: 0 0 100px rgba(0,0,0,1);
    animation: modalIn 0.5s ease;
}

.p-modal-backdrop {
    position: absolute; top: 0; left: 0; width: 100%; height: 500px;
    background-size: cover; background-position: center;
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    opacity: 0.4; pointer-events: none;
}

.p-modal-body { position: relative; height: 100%; overflow-y: auto; padding: 0 60px 60px 60px; z-index: 5; }
.p-modal-content-grid { display: grid; grid-template-columns: 320px 1fr; gap: 60px; margin-top: 200px; }

.p-modal-left img { width: 100%; border-radius: 30px; border: 2px solid var(--glass-border); box-shadow: 0 30px 60px rgba(0,0,0,0.9); }
.p-modal-right h2 { font-size: 56px; font-weight: 950; margin-bottom: 20px; line-height: 1; }
.p-modal-meta { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; font-weight: 800; color: var(--text-muted); }
.p-rate { color: var(--accent); font-size: 22px; }

#modalDesc { font-size: 18px; line-height: 1.8; color: #cbd5e1; margin-bottom: 40px; }
.p-video-box { width: 100%; aspect-ratio: 16/9; border-radius: 30px; overflow: hidden; background: #000; border: 1px solid var(--glass-border); margin-bottom: 50px; }

.p-modal-footer { display: flex; align-items: center; gap: 20px; }
.p-btn-watch { background: var(--primary); color: white; text-decoration: none; padding: 20px 50px; border-radius: 20px; font-weight: 800; font-size: 16px; transition: 0.3s; }
.p-btn-watch:hover { transform: scale(1.05); }

.p-btn-icon { width: 65px; height: 65px; border-radius: 20px; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); color: white; font-size: 22px; cursor: pointer; transition: 0.3s; }
.p-btn-icon:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.p-btn-icon.active { background: #ef4444; border-color: #ef4444; }

.p-close-btn { position: absolute; top: 30px; right: 45px; font-size: 60px; color: #fff; background: none; border: none; cursor: pointer; z-index: 100; opacity: 0.4; transition: 0.3s; }
.p-close-btn:hover { opacity: 1; transform: rotate(90deg); color: var(--primary); }

/* AUTH CARD FIXED */
.auth-card {
    background: #0f0f13; padding: 50px 40px; border-radius: 40px;
    width: 460px; position: relative; z-index: 10;
    border: 1px solid var(--glass-border); box-shadow: 0 40px 100px rgba(0,0,0,1);
    text-align: center; animation: modalIn 0.4s ease;
}
.auth-subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 30px; display: block; }
.auth-steps { text-align: left; background: rgba(255,255,255,0.03); padding: 20px; border-radius: 20px; border: 1px solid var(--glass-border); margin-bottom: 30px; }
.step { display: flex; align-items: center; gap: 15px; margin-bottom: 12px; font-size: 14px; color: var(--text-dim); }
.step i { color: var(--primary); font-size: 16px; }

.auth-form { display: flex; flex-direction: column; gap: 15px; }
.auth-form input {
    background: #000; border: 2px solid var(--glass-border); color: #fff;
    padding: 22px; border-radius: 20px; font-size: 36px; text-align: center;
    letter-spacing: 12px; font-weight: 900; outline: none; width: 100%;
}
.btn-auth-submit { background: var(--primary); color: white; border: none; padding: 20px; border-radius: 20px; font-size: 16px; font-weight: 800; cursor: pointer; }

@keyframes modalIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 900px) {
    .p-modal-content-grid { grid-template-columns: 1fr; margin-top: 100px; text-align: center; }
    .p-modal-left { display: none; }
    .p-modal-body { padding: 30px 20px; }
    .p-modal-right h2 { font-size: 32px; }
}